body{
	background-color: #000;
	color: white;
}

@font-face {
	font-family: dtfont;
	src: url(euphorigenic.ttf);
}

body::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(1,0,0,0.3);
	background-color: #142631;
}

body::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

body::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #2d6382;
}

#container {
	background: rgb(12,18,21);
	background: url(../img/left_panel.png) left top repeat-y,
				url(../img/right_panel.png) right top repeat-y,
				linear-gradient(0deg, rgba(12,18,21,1) 0%, rgba(28,61,82,1) 53%, rgba(12,18,21,1) 100%);
}

#hero {
	width:100%;
	border-bottom: 7px solid rgba(28,61,82,1);
	/*background-image: url(../img/newsitebanner.jpg);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	height:600px;*/
}

#header-socials {
	position: absolute;
	right: 10px;
	top: 10px;
	padding-top: 14px;
	color: white;
	font-size: 35px;
	height: 56px;
	background: #0000009c;
	border-radius: 25px;
}

#header-socials a {
	margin: 0 11px;
	color: white;
}

#platform-links {
	text-align: center;
	margin-bottom: 40px;
}

#platform-links a {
	margin: 0 10px;
	outline: none;
	text-decoration: none;
}

#avail-text {
	font-family: dtfont;
	text-align: center;
	font-size: 43px;
	width:200px;
	margin: auto;
}

#platform-icons i {
	font-size: 98px;
	color:white;
}

#platform-icons a {
	margin: 0 30px;
}

.platform-icon {
	width:100px;
}

#video_container {
	width:80%;
	height:600px;
}

.hands{
	position: relative;
	height: 597px;
	top: -506px;
	z-index: 1;
}

#lhand {
	left: -63px;
}

#rhand {
	right: -842px;
}

#player {
	position: relative;
	width:100%;
	height:100%;
}

#vidholder {
	margin:20px auto 134px auto;
	width:960px;
	height:540px;
}

#vidcons {
	position: relative;
	left: 92px;
	bottom: 586px;
}

.vplay{ background-image:  url(../img/play_icon.png); }
.vpause{ background-image: url(../img/pause_icon.png); }
.vmute{ background-image:  url(../img/mute_icon.png); }
.vsound{ background-image: url(../img/sound_icon.png); }


.viditems {
	float:left;
	height:60px;
	width:60px;
	background-size:100%;
	background-repeat: no-repeat;
	cursor: pointer;
}

#timeline {
	height:27px;
	width:65%;
	border-radius: 25px;
	background-color: white;
	margin-top: 19px;
	float: left;
}

#scrub_icon {
	position: relative;
	background-image: url(../img/scrub_icon.png);
	background-size:100% 100%;
	height:60px;
	width:60px;
	transform: translate(-50%);
	top:-19px;
	left:0%;
	cursor: grab;
}

#playcon {
	margin-left: 35px;
}

#volumecon {
	margin-left: 5px;
}

.wlbutton {
	margin: 9px auto;
	display: block;
	width: 50%;
}

#intro_text {
	font-family: dtfont;
	text-align: center;
	font-size: 33px;
	width:900px;
	margin: auto;
}

#socials {
	width: 502px;
	margin: 22px auto;
}

.sicon {
	width:80px;
}

/* Gallery container */
#gallery {
	max-width: 1200px;                     /* cap total width */
	width: 90vw;                           /* responsive width */
	margin: 0 auto 40px auto;              /* center horizontally */
	padding: 8px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;                             /* space between tiles */
	justify-items: center;                 /* center items in each cell */
  }
  
  /* Each tile */
  #gallery a.image-link {
	position: relative;
	display: block;                        /* was inline-block, changed */
	width: 100%;                           /* take full grid cell width */
	aspect-ratio: 16 / 9;                  /* keeps rows aligned */
	overflow: hidden;
	border-radius: 6px;
	background: #111;
  }
  
  /* Images */
  #gallery a.image-link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
  }

  /* Magnifying glass overlay */
  #gallery a.image-link .magnifying-glass{
	position: absolute;
	inset: 140px;                    /* cover the tile */
	display: grid;
	place-items: center;
	opacity: 0;
	transition: opacity 200ms ease;
	pointer-events: none;
	/* Use a smaller, responsive icon instead of fixed 512px */
	background: none;
  }
  
  #gallery a.image-link .magnifying-glass::before{
	content: "";
	width: 36%;
	max-width: 160px;
	aspect-ratio: 1 / 1;
	background: url('src/img/magnify-image.png') no-repeat center / contain;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
  }
  
  /* Reveal on hover/focus */
  #gallery a.image-link:hover .magnifying-glass,
  #gallery a.image-link:focus-visible .magnifying-glass{
	opacity: 1;
  }
  
  /* (Optional) subtle zoom on hover */
  #gallery a.image-link:hover img{
	transform: scale(1.03);
	transition: transform 200ms ease;
  }
  
  /* Respect reduced motion users */
  @media (prefers-reduced-motion: reduce){
	#gallery a.image-link .magnifying-glass,
	#gallery a.image-link:hover img{
	  transition: none;
	}
}

#dticon {
	margin: 105px auto 34px auto;
	width: 180px;
	display: block;
}

#about_text {
	font-family: dtfont;
	text-align: center;
	font-size: 43px;
	width:900px;
	margin: auto;
}

#housebotttom {
	width:900px;
	display: block;
	margin: 60px auto 0 auto;
}

pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

.info {
	margin: 5px auto;
	text-align: center;
	color: #979797;
}

.image-link {
	position: relative;
	display: inline-block;
	background-color: #91060670;
	height: 260px;
	width: 465px;
}

/* images */
/* Style for the magnifying glass overlay */
.image-link .magnifying-glass {
	width: 512px;
	height: 512px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/*top: 0;
	left: 0;
	right: 0;
	bottom: 0;*/
	background: url('https://darktidesgame.com/wp-content/themes/darktides2020/assets/img/magnify-image.png') no-repeat center center;
	opacity: 0; /* Hide it initially */
	pointer-events: none; /* This ensures clicks pass through to the underlying image */
	transition: opacity 0.5s; /* Optional: for smooth fade-in effect */
}

/* Reveal the magnifying glass overlay on hover */
.image-link:hover .magnifying-glass {
	opacity: 1;
}

.links {
	text-align: center;
}

.links a {
	margin: 0 15px;
	color: #ffffff;
	text-decoration: none;
	font-size: 29px;
}

.link a:hover {
	color: #ba60e6;
}

.links i {
	margin-right: 5px;
}

.site-info {
	text-align: center;
	font-size: 18px;
	color: #666;
	margin: 40px 0 20px 0;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

@media screen and (max-width: 1516px) {
	#container {
		background: linear-gradient(0deg, rgba(12,18,21,1) 0%, rgba(28,61,82,1) 53%, rgba(12,18,21,1) 100%);
	}
	/* .wlbutton { position: unset; } */
	.wlbutton { width:70%; }
}

@media screen and (max-width: 1200px) {
	#gallery { width:80%; }
	.hands { display: none; }
	#timeline { display: none; }
	.viditems {	height: 90px; width: 90px; }
	#vidcons { width: 80%; bottom: -13px; }
	#housebotttom {	width:80%; }
	#about_text { width:80%; }
	#intro_text { width:80%; }
	.wlbutton { width:70%; }
	#container { --main-width: 96vw; }
	#vidholder {
		height: calc(var(--main-width) * var(--aspect-ratio));;
  		max-width: var(--main-width);
	}
	#player { height: calc(var(--main-width) * var(--aspect-ratio)); }
}

@media screen and (max-width: 1009px) {
	#gallery img { width: 100%; margin-left: 0;}
	.sicon { width:60px; }
	#socials { width:382px; }

}