:root {
  --bg: rgb(56, 40, 50);
  --text: rgb(254, 243, 221);
  --h1:rgb(229, 152, 20);
  --h2:rgb(198, 119, 15);
  --h3:rgb(255, 255, 255);
  --h4: rgb(182, 178, 172);
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  height: 100%;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-family: 'Kumbh Sans', sans-serif;
}

body {
  margin: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  background: var(--bg);
  color: var(--text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

p {
  margin-top: 0.1rem;
  margin-bottom: 1.25rem;
}

a {
  color: var(--text);
  transition: 0.1s color;
  text-decoration: underline;
  font-weight: 600;
}

.c-button {
  appearance: none;
  font-family: inherit;
  display: inline-block;
  width:100%;
  border: 0;
  background: var(--h2);
  color: var(--h3);
  font-weight: bold;
  padding: 0.5rem 0.5rem;
  margin: 0.25rem 0;
  font-size: clamp(0.62rem, 0.9rem, 1rem);
  text-transform: uppercase;
  text-decoration: none;
	cursor: pointer;
	vertical-align: middle;
	white-space: nowrap;
}

.c-button i{padding-right:0.1rem;padding-left:0.25rem;}

.c-button:hover,
.c-button:focus {
  background: var(--h1);
	color: var(--h3);
}

a:hover,
a:focus {
  color: var(--h3);
  background:var(--h1);
}

.bloglink {
  --social_media_bg: var(--text);
  --social_media_color: #f0b104;
}

.discord {
  --social_media_bg: var(--text);
  --social_media_color: #5865F2;
}

.bluesky {
  --social_media_bg: var(--text);
  --social_media_color: #1185fe;
}

.tiktok {
  --social_media_bg: var(--text);
  --social_media_color: linear-gradient(to bottom right, #00f2ea 25%, #000 25%, #000 75%, #ff0050 75%, #ff0050 100%);
}

.instagram {
  --social_media_bg: var(--text);
  --social_media_color: linear-gradient(to bottom, #833ab4, #e1306c);
}

.email {
  --social_media_bg: var(--text);
  --social_media_color: #f0b104;
}

#top-Logo {
  display: flex;
  justify-content: start;
  align-items: center;
  position: absolute;
  width: 100%;
  top: 1rem;
  left: 1rem;
  z-index:5;
}

#top-Logo a:hover {
  background: transparent;
}

#top-Logo img {width: calc(85px + 1vw);height: auto;text-align: center;}

#splash {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 20vh;
  width: 100%;
}

#splash .links {
  z-index: 500;
  position: absolute;
  top: 1rem;
  gap: clamp(0.2em,0.6em,0.75em);
}

@media (max-width: 600.98px) {
  #splash .links {
    width: 100%;
    font-size: calc(1.3rem - 0.25vw);
    right: 1rem;
    justify-content: end;
  }
}

@media (min-width: 601px) {
  #splash .links {
    font-size: calc(1.5rem - 0.5vw);
    right: 1rem;
  }
}

.backtotop {
  position:absolute;
    bottom: 1rem;
    right: max(2rem, 50vw - 62rem / 2) ;
    text-transform:uppercase;
    font-weight: 600;
    font-size: 0.75rem;
    width:auto;
}

.links {
  display: flex;
  justify-content: center;
  gap: 0.5em;
}

.links a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.75em;
  height: 1.75em;
  border-radius: 50%;
  background-color: var(--social_media_bg);
  color: var(--bg);
  transition: color 0.1s, background-color 0.1s;
  text-decoration: none;
}

.links a:hover,
.links a:focus {
  color: var(--h3);
  background: var(--social_media_color);
}

.post-Feature-Container {
  position: relative;
	width:100%;
	height: 450px;
	padding: 0;
	margin: 0;
}

.post-Feature {
  background: linear-gradient(to top, var(--bg) 20%, rgba(0, 0, 0, 0) 42%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	padding: 1.5rem 1.5rem 1.5rem max(2rem, 50vw - 62rem / 2);
	gap: 0.5rem;
	z-index:3;
	width:100%;
	height:450px;
	border-radius: 6px;
	position: relative;
	bottom: 0;
	left: 0;
}

.post-Feature > h1 {
  text-align: left;
  font-size: 2.3rem;
  font-weight: 700;
  word-wrap:break-word;
  z-index:10;
  text-transform: uppercase;
}

.post-Feature > h2 {
  font-size: 1.3rem;
  display: block;
	font-weight: 500;
  text-transform: uppercase;
}

.post-FeatureBG {
  position: absolute;
	top: 0;
	left: 0;
	z-index:1;
	width:100%;
	height:450px;
}

.post-FeatureBG img {
  width:100%;
	height:450px;
	object-fit: cover;	
	border-radius: 6px;
}

#post img {
  width:100%;
}

#press {
  width:100%;
  gap: 0.5rem 3rem;
  @media (max-width:999px) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  @media (min-width:1000px) {
    display: grid; 
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto); 
  }
}

#press hr {
  height: 0rem;
	border: 0;
	color:transparent;
}

#press .factsheet,
#press .body {
  width:100%;
  position: relative;
}

#press .factsheet {
  @media (max-width:999px) {
  }
  @media (min-width:1000px) {
    grid-area: 1 / 3 / 2 / 4;
  }
}
@media (max-width:999px) {
  #press .factsheet .facts {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.5rem;
  }
  .sort {
    display: flex;
    flex-direction: column;
  }
  .sort :nth-child(1){
    order:2;
  }
  .facts dl {padding-top: 0;margin-top: 0;}
}
#press .body {
  grid-area: 1 / 1 / 2 / 3;
}

#press .about {
  grid-area: 2 / 1 / 3 / 3;
}

#press .credits {
  grid-area: 3 / 1 / 4 / 3;
}

#press .credits p {
  margin-bottom:0.25rem;
}

#press .credits .team {
  display: grid; 
  grid-template-rows: 1fr repeat(2, 0.6fr);
  grid-template-columns: repeat(3,minmax(0,1fr));
  grid-auto-flow: row;
  gap: 1.5rem;
  width:100%;
  padding:1rem 0;
}

#press .credits .team div {
  grid-row: span 1;
grid-column: span 1;
}

#press .body div {
  padding-bottom: 1.5rem;
}

#press .factsheet p {
  margin: 0.1rem 0 1rem;
}

#press .galleryTwo,
#press .galleryThree {
  display: grid; 
  grid-auto-rows: auto; 
  gap: 0.25em 0.5em;
}

#press .galleryThree {
  grid-template-columns: 1fr 1fr 1fr;
}

#press .two {
  display: grid; 
  grid-auto-rows: auto; 
  grid-template-columns: 1fr 1fr; 
  gap: 1em;
}

#press .two div {
  position: relative;
  width: 100%;
}

#press .two div iframe {
  position:relative;
  aspect-ratio: 16 / 9;
  width: 100%;
}

.team,
.game-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding: 2rem max(2rem, 50vw - 62rem / 2);
  gap: 1.5rem;
}

.slideshow::-webkit-scrollbar {
  height: 0;
  background: transparent;
}

footer {
  padding: 0.1rem 0;
  text-align: center;
  line-height: 1.5;
}

footer .copyright {
  font-size: 0.85em;
  margin-top: 0.5rem;
  margin-bottom:0.5rem;
  display: block;
  line-height: 1.5em;
  color: var(--h4);
}

footer .copyright a {
  color: var(--h4);
  text-decoration: underline;
  font-size: inherit;
  font-weight: inherit;
}

footer .copyright a:hover{
  background-color: var(--bg);
  color: var(--text);
}

* {
  scrollbar-width: thin; 
	scrollbar-color: dark;
}

*::-webkit-scrollbar {
  width: 0.5rem; 
	height: 0.5rem;
}

*::-webkit-scrollbar-track {
  background: var(--bg);
}

*::-webkit-scrollbar-thumb {
  background: var(--h4);
	border-radius: 1rem;
	border: calc(1rem/ 4) solid var(--h4);
}

*::-webkit-scrollbar-thumb:hover {
  background: #303030;
}

#post {
  width: 100%;
	margin: auto;
	text-align: left;
}

#post-Content {
  text-align: left;
  padding: 0.5rem max(2rem, 50vw - 62rem / 2)
}

#post-Content img {
  font-weight: 700;
    font-size: 1em;
	text-align:center;
}

#post-Content h1 {
  font-size: 1.3rem;
	margin: 0.1rem 0 0.3rem;
	display: block;
	font-weight: 700;
  text-transform: uppercase;
  color: var(--h1);
}

#press h2 {
  font-size: 1rem;
	margin: 0.5rem 0 0;
	display: block;
	font-weight: 700;
  text-transform: uppercase;
  color: var(--h4);
}

#press h3, #press dt {
  font-size: 0.8rem;
	display: block;
	font-weight: 700;
  color: var(--h4);
  text-transform: uppercase;
}

#press h4 {
  font-size: 0.8rem;
	display: block;
	font-weight: 700;
  text-transform: uppercase;
}

#press dd {
  margin:0;
}

#press i {
  width:30px;
  padding-right:1em;
}

@media (max-width: 767.98px) {
  html {
    font-size: 15px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  html {
    font-size: 16px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  html {
    font-size: 17px;
  }
}

@media (min-width: 1200px) and (max-width: 2549.98px) {
  html {
    font-size: 19px;
  }
}

@media (min-width: 2550px) and (max-width: 3549.98px) {
  html {
    font-size: 27px;
  }
}

@media (min-width: 3550px) {
  html {
    font-size: 34px;
  }
}