@font-face {
  font-family: 'poster'; /* Replace with the desired font family name */
  src: url('../fonts/poster.woff') format('woff'); 
}


:root {
  --main: #D16F29; 
  --white: #F6EEE1;
  --disabled: #6B5F56;
}

::selection {
  color: #1F1E1C;             /* text color when selected */
  background-color: var(--main);   /* highlight color */
}


html, body { 
	height: 100%; 
	margin: 0; 
	padding: 0; 
	scroll-behavior: smooth;
}



body { 
	background-color: #1F1E1C; 
	position: relative; 
	height: unset;
	color: var(--white);
	
	font-size: 19px;
	font-family: "adobe-garamond-pro", serif;
	font-weight: 400;
	font-style: normal;
	@media (min-width: 768px) { font-size: 24px; }
}

emphasis { font-style: italic; }

a { 
	color: var(--main);
	text-decoration-style: dotted;
	transition: color .2s; 
}
a:hover { color: var(--white); }

h1 { 
	font-family: 'poster', sans-serif; 
	font-weight: normal;
	text-transform: uppercase;
	font-size: 57px;    
	line-height: .95em;
	margin-bottom: 30px;
	@media (min-width: 768px) { font-size: 96px; margin-bottom: 44px; }
}

h2 {
	font-weight: 600;
	font-style: italic;
	border-bottom: 1px dotted var(--white);
	padding-bottom: 20px;
	margin-bottom: 80px;
	@media (min-width: 768px) { margin-bottom: 120px; }
}

h3 {
	font-family: 'poster', sans-serif; 
	font-weight: normal;
	font-size: 28px;
	@media (min-width: 768px) { font-size: 32px; }
}


p { margin-top: 0; }
.disabled { 
	color: var(--disabled); 
	text-decoration: line-through;  
	
	position: relative;
}

/* Tooltip styling */
a.disabled::after {
  content: "Coming Soon!";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

/* Show tooltip on hover */
a.disabled:hover::after {
  opacity: 1;
  visibility: visible;
}

aside { font-style: italic; }


section {
	margin-bottom: 120px;
	@media (min-width: 768px) { margin-bottom: 200px; }
}



h2.subHead {
	font-size: 36px;
	font-weight: normal;
	border-bottom: 0;
	font-style: normal;
}

img { max-width: 100%; height: auto; }

#container {
	margin: 0 16px;
	padding: 60px 0 200px 0;
	@media (min-width: 768px) { 
		margin: 0 auto; 
		padding: 73px 0 200px 0;
	}
	max-width: 914px;
	position: relative; 
  
	#titlebar {
		@media (min-width: 768px) {
			display: flex;
            justify-content: space-between;
            align-items: flex-start;
		}
		
		#logo{
			margin-bottom: 30px;
		}
		
		nav {
			display: flex;
			gap: 57px;
			a {
				display: inline-block;
				text-decoration: none;
				color: var(--white);
				font-style: italic;
			}
			a:hover {
				color: var(--main);
			}
		}
		
	}
}

body::after { 
	content: ""; 
	display: block; 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	pointer-events: none; 
	opacity: .5;
	background-image: 
		url(../img/bgNoise.png), 
		image-set(url(../img/bgNoise.png) 1x, url(../img/bgNoise@2x.png) 2x); 
	mix-blend-mode: exclusion; 
}



#games{ 
	
	article {
		margin-bottom: 157px;
		
		@media (min-width: 768px) {
			display: grid; 
			grid-auto-columns: 1fr; 
			grid-template-columns: 161px 88px 1fr; 
			grid-template-rows: auto 1fr; 
			gap: 0px 0px; 
			grid-template-areas: 
			". . main"
			"aside . copy"; 
		}
		
		header { grid-area: main; margin-bottom: 50px; }
		h3 {
			padding-left: 30px;
			position: relative;
		}
		h3::before {
			background-color: var(--main);
			position: absolute;
			left: 0;
			bottom: 0;
			content: '';
			width: 11px;
			height: 35px;
		}
		aside { 
			grid-area: aside; 
			@media (min-width: 768px) { text-align: right; }
			
			a, span { display: block; }
		}
		div { grid-area: copy;  }
		
	}
	
}


#about {
	article {
		@media (min-width: 768px) {
			display: flex;            
			align-items: center;
			gap: 100px;
		}
	}
}


#contact {
	article{
		@media (min-width: 768px) { 
			display: flex;
			gap: 100px;
			flex-direction: row-reverse;
		}
		aside { 
			@media (min-width: 768px) { 
				text-align: right; 
				width: 134px;
			} 
			a, span { display: block; }
		}
	}
}

#email { color: var(--main); cursor: pointer; }

#copyright { font-size: 20px; text-align: right; }