#imageAboutus{
	filter: invert(1);
}

#imageourgames{
	filter: invert(1);
}

#imageDiary{
	filter: invert(1);
}

#loading-overlay img {
    max-width: 80%;
}

#theme-toggle
{
	cursor:pointer;
}
body{
	font: 15px/1.5 Arial, Helvetica, inter;
	box-sizing: border-box !important;
	background-color: #dddddd !important;
	margin: 0px;
	padding: 0px;
	width: 100%;
  }

  a {
	text-decoration: none;
  }
  
  /* 
  slider vv
	*/
  
	
  *,
  *::before,
  *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style-type: none;
  }
  
  #roott {
	  text-align: center;
	--primary: #811B1B;
	--white: #ffffff;
	--bg: #f5f5f5;
	width: 798px !important;
	height: 420px !important;
	 position: relative;
	top: -5% !important;
  }

  html {
	font-size: 62.5%;
	scroll-behavior: smooth;
	scrollbar-width: none;
	box-sizing: border-box !important;
  }

  ::-webkit-scrollbar {
	display: none;
  }

  @media (max-width: 900px) {
	html {
		zoom: 1 !important;
	}
  }

  @media (min-width: 1070px) {
	html {
	  zoom: 0.9;
	}
  }

  @media (min-width: 1470px) {
	html {
	  zoom: 1.2;
	}
  }

  @media (min-width: 1710px) {
	html {
	  zoom: 1.5;
	}
  }

  
  @media (min-width: 2560px) {
	html {
	  zoom: 1.54;
	}
  }
  @media (max-width: 1470px) {
	#roott {
		margin-left: 13% !important;
	}
  }

  @media (min-width: 1600px) {
	#roott {
		margin-left: 5% !important;
	}
  }

  @media (min-width: 2100px) {
	#roott {
		margin-left: 15% !important;
	}
  }
  
  @media (min-width: 3860px) {
	html {
	  zoom: 2.5;
	}
  }

  @media (max-width: 1230px) {
	#roott {
		margin-left: 1% !important;
	}
  }

.slider {
  align-items: center;
  max-width: 124rem;
  padding: 0 1rem;
  margin: 0 auto;
  width: 41em;
}

.text-center {
  text-align: center;
}

.section-heading {
  font-size: 3rem;
  color: var(--primary);
  padding: 2rem 0;
}

#tranding {
  padding: 4rem 0;
}

@media (max-width:1440px) {
  #tranding {
    padding: 7rem 0;
  }
}

#tranding .tranding-slider {
  height: 52rem;
  padding: 2rem 0;
  position: relative;
}

@media (max-width:500px) {
  #tranding .tranding-slider {
    height: 45rem;
  }
}

.tranding-slide {
  width: 25rem;
  height: 36rem;
  position: relative;
}

@media (max-width:500px) {
  .tranding-slide {
    width: 26rem !important;
    height: 36rem !important;
  }
  .tranding-slide .tranding-slide-img img {
    width: 28rem !important;
    height: 36rem !important;
  }
}

.tranding-slide .tranding-slide-img img {
  width: 26rem;
  height: 34rem;
  border-radius: 2rem;
  object-fit: cover;
}

.tranding-slide .tranding-slide-content {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.tranding-slide-content .food-price {
  position: absolute;
  top: 2rem;
  right: 2rem;
  color: var(--white);
}

.tranding-slide-content .tranding-slide-content-bottom {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  color: var(--white);
}

.food-rating {
  padding-top: 1rem;
  display: flex;
  gap: 1rem;
}

.rating ion-icon {
  color: var(--primary);
}

.swiper-slide-shadow-left,
.swiper-slide-shadow-right {
  display: none;
}

.tranding-slider-control {
  position: relative;
  bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tranding-slider-control .swiper-button-next {
  left: 58% !important;
  transform: translateX(-58%) !important;
}

@media (max-width:990px) {
  .tranding-slider-control .swiper-button-next {
    left: 70% !important;
    transform: translateX(-70%) !important;
  }
}

@media (max-width:450px) {
  .tranding-slider-control .swiper-button-next {
    left: 80% !important;
    transform: translateX(-80%) !important;
  }
}

@media (max-width:990px) {
  .tranding-slider-control .swiper-button-prev {
    left: 30% !important;
    transform: translateX(-30%) !important;
  }
}

@media (max-width:450px) {
  .tranding-slider-control .swiper-button-prev {
    left: 20% !important;
    transform: translateX(-20%) !important;
  }
}

.tranding-slider-control .slider-arrow {
  background: var(--white);
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  left: 42%;
  transform: translateX(-42%);
  filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
}

.tranding-slider-control .slider-arrow ion-icon {
  font-size: 2rem;
  color: #222224;
}

.tranding-slider-control .slider-arrow::after {
  content: '';
}

.tranding-slider-control .swiper-pagination {
  position: relative;
  width: 15rem;
  bottom: 1rem;
}

.tranding-slider-control .swiper-pagination .swiper-pagination-bullet {
  filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
}

.tranding-slider-control .swiper-pagination .swiper-pagination-bullet-active {
  background: var(--primary);
}

  
  
  /* 
  slider ^^
	*/
	/* HEADER */
	
    #container {
		overflow: hidden;

	}

	header {
	  display: flex;
	  background-color:#dddddd;
	  padding-top: 1.5em;
	  min-height: 90px;
	  height: 5em;
	  white-space: nowrap;
	}
	
	hr {
	  margin-top: 0;
	  background-color: black;
	  height: 0.75px;
	  border: none;
	  width: 98%;
	}
	
	/* navigation */

	header nav{
	  text-align: end;
	  position: relative;
	  display: flex;
	  flex:6;
	  margin-left: 2.9em;
	  align-items: flex-end;
	  margin-bottom: 1em;
	  width: 100%;
	}
	
	header ul {
	  width: 100%;
	  position: relative;
	  padding-right: 0;
	  margin-bottom: 0;
	  margin-left: 2em;
	}
	
	header li{
	  font-size: 17px;
	  display: inline;
	  padding: 20px 20px 5px 20px;
	}
	
	header a {
	  color: black;
	  text-decoration: none;
	}
	
	body > main {
		box-sizing: border-box;
		
	  }
	
	  body > main {
		box-sizing: border-box;
		
	  }

	  @media (max-width: 1900px) {
		body > main {
			box-sizing: border-box;
			max-height: 329vh !important;
		}
	}


	#main {
	  position: relative;
	  box-sizing: border-box;
	  border-bottom: 3px solid;
	  color:#811B1B;
	  padding-left: 0.65em;
	  padding-right: 0.65em;
	  
	}
	
	html, body {
		margin: 0;
		padding: 0;
		overflow-x: hidden;
	  }

	#language {
	  position: relative;
	  right: 3%;
	  color: white;
	  background-color:#811B1B;
	  padding: 8px;
	  border-radius: 25px;
	  font-size: 12px;
	}
	
	
	/* logo */
	
	#logo {
	  display: flex;
	  flex:4;
	  position: relative;
	  left: 5.5em;
	  height: 3.5em;
	}
	
	#kremlin {
	  position: relative;
	  top: -20%;
	  height: 120%;
	}
	
	#logowriting {
	  display: flex;
	  flex-direction: column;
	  width: 70%;
	  margin-right: 15px;
	}
	
	#studio {
	  flex:1;
	  color: #811B1B;
	  font-size: 15px;
	}
	
	#kremlingames {
	  display: flex;
	  align-items: flex-end;
	  flex: 1;
	}
	
	#writing {
	  width: 10em;
	}
	
	
	/* MAIN */
	
	section {
	  display: flex;
	  overflow: hidden;
	}
	
	#right {
	  display: flex;
	  flex: 2;
	  flex-direction: column;
	}
	
	#js {
	  position: relative;
	  top: 5%;
	  height: 420px;
	}
	
	#left {
	  position: relative;
	  flex: 1;
	  height: 430px;
	  text-align: center; 
	}
	
	#games-button{
	  position: relative;
	  top: 60px;
	  left: 10%;
	  width: 76%;
	  height: 19%;
	  border: 1px;
	  border-radius: 26px;
	  font-size: 35px;
	  text-align: center;
	  background-color: #7C1010;
	  color: white;
	}
  
	/* Steam/Darkmode icons */
	
	#steam-style-bar {
	  position: relative;
	  right: -80%;
	  justify-content: space-between;
	  display: flex;
	  width: 10.5em;
	  height: 3em;
	  margin: 0.5em 2em;
	}
	
	#mainsteam { 
		position: relative;
	}

	#steam-style-bar button {
	  margin: 0em 1em;
	  background-color: transparent;
	  border: none;
	}
	
	#steam-style-bar img {
	  width: 130%
	}
	
	/* Main showcase */
	
	#showcase-kg{
	  font-size: 22px;
	  color: #990000;
	}
	
	#showcase {
	  font-family: 'Montserrat Alternates', sans-serif;
	  text-align: left;
	  font-size: 35px;
	  padding-top: 1.3em;
	  margin-left: 22%;
	  width: 80%;
	  height: 70%;
	  line-height: 120%;
	}
	


	/*
	  Second Section 
	*/
	#main2 {
		
	}
  
	#sectionTwo {
		position: static;
		display: flex;
		flex-direction: row;
		justify-content: center;
  		align-items: center;
		width: 100%;
		margin: 0px;
		box-sizing: border-box;
		padding-bottom: 5em;
	  	height: 35em;
	}

	#imageAboutus {
	  position: relative;
	  top: 5em;
	  right: 7%;
	  width: 30em;
	  height: 380px;
	  object-fit: cover;
	  border-radius: 11%;
	}
	
	#ourgamessteam {
		position: relative;
		top: -4em;
		z-index: 1;
		right: -80%;
		height: 3em;
		width: 2.5em;
	}

	#aboutus {
	  position: relative;
	  height: 50%;
	  margin: 10%;
	}
	
	#aboutcont {
	  position: relative;
	  left: -50px;
	  font-size: 25px;
	  font-family: 'Montserrat Alternates', sans-serif;
	  font-weight: bold;
	  width: 23em;
	}
  
	#aboutheader {
	  font-size: 30px;
	  margin-bottom: 30px;
	  width: 61%;
	  border-bottom: 1px solid #990000; 
	}
	
	/*
	  Third Section
	*/

	#sectionThree {
		position: static;
		display: flex;
		flex-direction: row;
		justify-content: center;
  		align-items: center;
		width: 100%;
		margin: 0px;
		box-sizing: border-box;
		padding-bottom: 5em;
	  	height: 35em;
	  }

	  #imageourgames {
		position: relative;
		top: 5em;
		left: -4em;
		width: 30em;		
		height: 380px;
		object-fit: cover;
		border-radius: 11%;
	  }

	  #ourgamesright {
		position: relative;
		display: flex;
		flex-direction: column;	
		left: 1em;
		top: 6em;
		width: 40%;
		height: 90%;
		margin-bottom: 10%;
		margin-top: 10%;
		box-sizing: border-box;
	  }

	  #ourgames {
		
	  }

	  #ourgamescont {
		position: relative;
		font-size: 25px;
		width: 21em;
		top: -0.5em;
		font-family: 'Montserrat Alternates', sans-serif;
		font-weight: bold;
		text-align: end;
		box-sizing: border-box;
	  }

	  #ourgamesheader {
		text-align: end;
		position: relative;
		left: 5em;
		height: 3em;
		width: 13em;
		font-size: 30px;
		margin-bottom: 30px;
		margin-right: 0px !important;
		border-bottom: 1px solid #990000; 
		box-sizing: border-box;
	  }

	/*
	  Fourth Section
	*/

	  #sectionFourth {
		position: static;
		display: flex;
		flex-direction: row;
		justify-content: center;
  		align-items: center;
		width: 100%;
		margin: 0px;
		box-sizing: border-box;
		padding-bottom: 5em;
	  	height: 35em;
		
	  }
	
	  #imageDiary {
		position: relative;
		left: -6%;
		width: 30em;
		height: 380px;
		object-fit: cover;
		border-radius: 11%;
	  }

	  #diary {
		position: relative;
		height: 50%;
		width: 40em;
		margin: 10%;
	  }
	  
	  #diarycont {
		position: relative;
		left: -50px;
		font-size: 25px;
		font-family: 'Montserrat Alternates', sans-serif;
		font-weight: bold;
		width: 110%;
	  }
	
	  #diaryheader {
		font-size: 30px;
		margin-bottom: 30px;
		width: 90%;
		border-bottom: 1px solid #990000; 
	  }

	/*
	  Section Bar
	*/

	  #SectionBar {
		position: relative;
		top: -1em;
		left: -50px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 110%;
		height: 9em;
	  }

	  #SectionBar button {
		margin: 0em 0.7em;
		background-color: transparent;
		border: none;
	  }

	  #SectionBar img {
		object-fit: contain;
		width: 3.8em;
		height: 3.8em;
	  }

	  	/*
	  Section fifth
	*/

	  #sectionFifth {
		position: static;
		color: white;
		background-color: #403434;
		width: 100%;
		margin-top: 12.1em;
		overflow: hidden;
		padding-bottom: 0.8em;
	  }

	  #secLeft {
		width: 35em;
		float: left;
	  }

	  #writtingcont1 {
		font-weight: bold;
		font-size: 28px;
		justify-content: center;
		width: 17.5em;
	  }

	  #resourcesheader {
		position: relative;
		top: 0.5em;
		margin-left: 2em;
		text-align: center;
		font-size: 30px;
		width: 17em;
		border-bottom: 1px solid white;
	  }

	  #resourcescont {
		position: relative;
		padding-left: 3.9em;
		margin-top: 1em;
		height: 11.5em;
		text-align: center;
		font-family: 'Montserrat Alternates', sans-serif;
	  }

	  #developers {
		font-size: 28px;
		margin-left: 1.4em;
	  }

	  #contact {
		font-size: 20px;
		margin-top: 1.2em;
		z-index: 5 !important;
	  }

	  #copyrights {
		font-size: 18px;
		position: relative;
		bottom: 0;
		left: 3em;
	  }

	  #leninIcons {
		position: relative;
		top: 1em;
		left: 4%;
		width: 50%;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	  }

	  
	  .lIcon img{
		height: 3em;
	  }

	  #lsteam {
		position: relative;
	  }

	  #lenin {
		display: flex;
		box-sizing: border-box;
		position: relative;
		padding-left: 2%;
		left: 10%;
		top: 2em;
		width: 1em;
		z-index: 0;
		height: 13em;
	  }

	  #lenin img{
		width: 22em;
		height: 22em;
		filter: invert(1);
	  }

	  #secKremlin img{
		position: relative;
		bottom: 15em;
		left: 19em;
		width: 8em;
		height: 8em;
	  }

	  #secKremlin {
		position: relative;
		bottom: -10em;
		left: -24em;
		height: 0em;
	  }
	
  	/*
	  Second Main 
	*/

	  #ourgamesheader2 {
		position: relative;
		float: left;
		font-weight: bold;
		font-size: 50px;
		border-bottom: 1px solid #990000;
		width: 7em;
		left: 2em;
		text-align: end;
	  }

	  #rightsteam {
		position: relative;
		width: 30em;
		left: 20em;
	  }








	  

	  

	  

	  

	  







	  /* Games ↔ DLC table: big game icons on the left, that game's DLC
	     cards to the right, rows and columns separated by rules. */
	  #gamesTable {
		clear: both;
		position: relative;
		width: 94%;
		margin: 3em auto 4em;
	  }

	  #gamesTableHead {
		display: flex;
	  }

	  #gamesheader {
		font-size: 40px;
		font-weight: bold;
		margin: 0.2em 0;
	  }

	  #dlcheader {
		font-size: 40px;
		font-weight: bold;
		margin: 0.2em 0 0.2em 0.8em;
	  }

	  .gameRow {
		display: flex;
		border-top: 2px solid #990000;
	  }

	  /* #gamesTable prefix outweighs .nonestyle (border: none; padding: 0) on the link cells. */
	  #gamesTable .gameCell {
		flex: 0 0 16em;
		position: relative;
		text-align: center;
		padding: 1.2em;
		border-right: 2px solid #990000;
	  }

	  .gameIcon {
		width: 10em;
		height: 10em;
	  }

	  .gameName {
		font-family: 'Montserrat Alternates', sans-serif;
		font-weight: bold;
		font-size: 20px;
		margin-top: 0.6em;
	  }

	  .gameTagline {
		font-family: 'Montserrat Alternates', sans-serif;
		font-size: 15px;
		color: #555;
		margin-top: 0.5em;
	  }

	  #newgameimg {
		position: absolute;
		top: 0.4em;
		left: 0;
		width: 7em;
		height: 2.3em;
	  }

	  .gameDlcs {
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		gap: 1em;
		align-content: flex-start;
		padding: 1.2em;
	  }

	  #gamesTable .dlcCard {
		width: 10em;
		margin: 0;
	  }

	  #ourgamesnav {
	  	position: static;
	  	box-sizing: border-box;
	  	border-bottom: 3px solid;
	  	color:#811B1B;
	  	padding-left: 0.65em;
	  	padding-right: 0.65em;
	  	max-height: 100vh;
	  }



	  #ourgamesback0 img{
		z-index: -3;
		position: absolute;
		top: 5.7em;
		width: 100%;
		height: 30em;
	  }

	  #ourgamesback1 img{
		position: absolute;
		z-index: -1;
		top: 40.7em;
		width: 60%;
		margin-left: -30em;
		height: 25em;
	  }

	  #ourgamesback2 img{
		position: absolute;
		top: 60.7em;
		z-index: -1;
		width: 60%;
		margin-left: -5em;
		height: 30em;
	  }



	/*
	  MAIN3
	*/

	.nonestyle {
		text-decoration: none;
		color: inherit; 
		background: none; 
		border: none; 
		padding: 0; 

	  }

	  #subHeader {
		padding: 2em;
	  }

	  #headerwriting {
		position: relative;
		margin-left: 1.7em;
		top: -0.1em;
		font-weight: bold;
		border-bottom: 1px solid #990000;
		width: 89%;
		font-size: 1.4em;
		color: #811B1B;
	  }

	  #subVector {
		float: left;
	  }

	  #subImage img{
		margin-left: 2em;
		border-radius: 7%;
		object-fit: cover;
		width: 24em;
		height: 21em;
	  }

	  #subImage video{
		margin-left: 2em;
		border-radius: 7%;
		object-fit: cover;
		width: 24em;
		height: 21em;
		background: #000000;
	  }

	  #subContent {
		font-weight: normal;
		font-size: 1.2em;
		line-height: 1.5;
		max-height: 15em;
		overflow-y: auto;
		padding-right: 0.5em;
		scrollbar-width: thin;
		scrollbar-color: #811B1B transparent;
	  }

	  #subContent::-webkit-scrollbar {
		display: block;
		width: 8px;
	  }

	  #subContent::-webkit-scrollbar-thumb {
		background: #811B1B;
		border-radius: 4px;
	  }

	  #subContent::-webkit-scrollbar-track {
		background: transparent;
	  }

	  @media (pointer: coarse) {
		#subContent::-webkit-scrollbar {
		  width: 14px;
		}
	  }

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

	  #subThumbs {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5em;
		margin-left: 2em;
		margin-top: 0.7em;
		width: 24em;
	  }

	  #subThumbs img {
		flex: 0 0 calc(25% - 0.375em);
		min-width: 0;
		height: 3em;
		object-fit: cover;
		border-radius: 7%;
		cursor: pointer;
	  }

	  #subThumbs .videoThumb {
		position: relative;
		flex: 0 0 calc(25% - 0.375em);
		min-width: 0;
		height: 3em;
		cursor: pointer;
	  }

	  #subThumbs .videoThumb img {
		width: 100%;
		height: 100%;
	  }

	  #subThumbs .videoThumb::after {
		content: '▶';
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-size: 1.3em;
		text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
		pointer-events: none;
	  }

	  #subDlc {
		margin-left: 2em;
		margin-top: 1.5em;
		width: 24em;
	  }

	  #subDlcHeader {
		font-size: 1.5em;
		font-weight: bold;
		border-bottom: 1px solid #990000;
		margin-bottom: 0.5em;
	  }

	  .dlcCard {
		display: inline-block;
		width: 11.5em;
		margin: 0 0.5em 0.8em 0;
		color: inherit;
		vertical-align: top;
	  }

	  .dlcCard img {
		width: 100%;
		border-radius: 7%;
		display: block;
	  }

	  .dlcCardName {
		font-size: 0.95em;
		font-weight: bold;
		margin-top: 0.3em;
	  }



	  #buttonwriting {
		font-size: 2.5em;
		margin-top: 0.43em;
		color: white;
	  }

	  /* Torn-paper art behind the description — stretches with the text block. */
	  #backcont::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		background: url("background/back12.webp");
		background-size: 100% 100%;
	  }
	  
	  #subButtonSteam {
		position: relative;
		bottom: 2.7em;
		left: 10em;
		width: 2em;
		height: 2em;
	  }
	  
	  #backcont {
		position: relative;
		padding: 2.4em 3em 3.6em;
	  }

 	  #subButton {
		margin-top: 2em;
		width: 28em;
		height: 6em;
		text-align: center;
		background: #811B1B;
		border-radius: 32px;
	  }

	  #subReviewBadge {
		margin: 0.8em 0 0 2em;
		width: 24em;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		gap: 0.6em;
		background: #811B1B;
		color: #ffffff;
		border-radius: 10px;
		padding: 0.55em 0.9em;
	  }

	  #subReviewBadge svg {
		width: 1.7em;
		height: 1.7em;
		flex: none;
	  }

	  .brPct {
		font-size: 1.5em;
		font-weight: bold;
	  }

	  .brLabel {
		font-size: 1.05em;
	  }

	  #subright {
		width: 48em;
		display: flex;
		flex-direction: column;
		padding-right: 3em;
	  }

	  #subleft {
		float: left;
		width: 40%;
	  }
	  #backg0 {
		display: flex;
		justify-content: center;
		
	  }

	    /*
	  WIKI
		*/

	    .main4 {
			float: left;
			width: 40em;
		}

	    #wikiback {
			position: absolute;
			z-index: -1;
			margin-left: 5em;
		}

		#wikicontHeader{
			color: #720505;
			font-weight: bold;
			margin-left: 4.2em;
			margin-top: 1em;
			font-size: 2em;
			font-family: 'Montserrat Alternates', sans-serif;
		}

		#wikibackimg{
			width: 40em;
			height: 20em;
		}

		#wikiarrow img {
			width: 2.3em;
		}

		#wikilenin {
			position: relative;
			left: 20%;
			height: 23em;
		}

		#wikiarrow {
			position: relative;
			top: -2em;
			margin-left: 5em;
			width: 2em;
		}

		#wikicont {
			font-size: 1.7em;
			margin-left: 5em;
			margin-top: 0.2em;
			font-weight: bold;
			font-family: 'Montserrat Alternates', sans-serif;
		}

		#wikicopyrights {
			margin-top: 2em;
			font-size: 1.3em;
		}

		#wikileft {
			width: 45em;
		}

	    #wikilenin img{
			width: 20em;
			height: 23em;
		}

 	/*
	  backgrounds
	*/
	#back0 {
		position: absolute;
		z-index: -1;
		margin-left: 5em;
		width: 90em;
		height: 35em;
	}

	#back1 {
		position: absolute;
		z-index: -1;
		margin-left: -20em;
		margin-top: -5em;
		width: 105em;
		height: 35em;
	}

	#back2 {
		position: absolute;
		z-index: -1;
		width: 40em;
		margin-left: -3.5em;
		height: 25em;
	}

	#back3 {
		position: absolute;
		z-index: -1;
		margin-top: -8em;
		width: 80em;
		margin-left: -8em;
		height: 45em;
	}
  	/*
	  responsive nav
	*/
	
	  
	  	/*
	  Media
	*/

	#games-button:hover {
		cursor: pointer;
	}

	@media (max-width: 1990px) {
		#leninIcons {
			width: 41% !important;
		}

		#subright {
			font-size: 14px;
		}
	}

	@media (max-width: 1152px) {
		#headerwriting {
			position: relative;
			left: 60%;
		}

		#subHeader {
			text-align: center;
			width: 120%;
		}

		#backcont {
			width: 100%;
			text-align: center;
		}

		#subContent {
			margin-left: 13%;
			width: 80%;
			margin-top: 2em;
			font-size: 20px;
			text-align: center;
		}

		#subright {
			width: 100%
		}

		#subleft {
			float: none;
		}

		#subBack {
			margin-top: 28em;
			margin-left: 15%;
			display: none;
		}

		#subBack1 {
			display: none;
		}

		#steams {
			position: relative;
			bottom: 29em;
			left: 10%;
		}

		#subImage img,
		#subImage video {
			width: 200%;
			margin-left: 25%;

		}

		#subButton {
			margin-top: 4em;
			margin-left: 30%;
			width: 45%;
		}
	}

	@media (max-width: 1069px) {
		#imageourgames {
			width: 35%;
			left: -7em;
			position: relative;
		}
		
		#ourgamesright {
			left: -3em;
		}
		
		#aboutheader {
			margin-top: -1em;
		}
		
		#sectionTwo {
			font-size: 70%;
			margin-left: 2em;
		}
		
		#showcase {
			font-size: 33px;
		}
		
		 #steam-style-bar {
			right: -65%;
		  }
		
		#ourgamessteam {
			position: relative;
			top: -4em;
			right: -70%;
			height: 3em;
		}	

	


	
	
	
	
	
		  
	
		  
	
		  
	
		  
	
		  
	
	
	}

	@media (max-width: 1009px) {

		#showcase {
			font-size: 33px !important;
		}

		#sectionFourth {
			margin-top: 16em;
			display: block;
		}

		#sectionFifth {
			margin-top: 23em !important;
		}

		#imageDiary {
			width: 80%;
			top: 5em;
			left: 10%;
			height: 17em;
			border-radius: 1em;
		}

		#diary {
			text-align: center;
			left: 15%
		}

		#back1 {
			left: -30em;
			opacity: 50%;
		}

		#back2 {
			opacity: 30%;
			left: -5em;
		}

		#sectionThree {
			display: block !important;
			margin-top: 7em;
		}

		#ourgamesheader {
			text-align: center;
			width: 150%;
			left: -5%;
		}

		#imageourgames {
			width: 80%;
			top: 24em !important;
			left: 10%;
			height: 17em;
			border-radius: 1em;
		}

		#ourgamescont {
			text-align: center;
			left: 0%;
		}

		#ourgamesright {
			text-align: center;
			top: -22em;
			left: 23%;
		}

		#sectionTwo {
			display: block !important;
		}

		#aboutus {
			text-align: center;
			left: 12em;
			top: -6em;
		}

		#aboutheader {
			left: 0.8em;
			position: relative;
		}

		#aboutcont {
			left: -0.5em;
			width: 70%;
		}

		#imageAboutus {
			z-index: -1;
			border-radius: 1em;
			width: 80%;
			height: 17em !important;
			position: relative;
			top: -0.2em;
			left: 10%;
		}
	}

	@media (max-width: 930px) {
		#developers {
			margin-left: 2em;
			font-size: 35px;
		}

		#copyrights {
			top: 4.7em;
		}

		#sectionFifth {
			height: 38em;
		}

		#mainsteam { 
			position: relative;
			right: 26%;
			top: -27em;
		}

		#imageDiary {
			width: 80%;
			top: 5em;
			left: 10%;
			height: 17em;
			border-radius: 1em;
		}
		
		#diary {
			text-align: center;
			left: 7%;
			width: 75%;
		}

		section {
			display: inline;
		  }
		  
		  #aboutcont {
			left: -1em;
		}

		#aboutus {
			text-align: center;
			width: 400%;
			left: -2em;
		}

		  #aboutcont {
			width: 22%;
			left: -0%;
		  }

		  #aboutheader {
			width: 20%;
			left: 1em;
			position: relative; 
		  }

		  #ourgamesheader {
			text-align: center;
			width: 150%;
			left: -10%;
		}

		#imageourgames {
			width: 80%;
			top: 33em;
			left: 10%
		}

		#ourgamescont {
			font-size: 25px;
			text-align: center;
			width: 200%;
			left: -38%;
		}

		#ourgamesright {
			text-align: center;
			top: -22em;
			left: 23%;
		}

		  #secLeft {
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-left: auto;
			margin-right: auto;
			width: 32em;
			height: 34.5em;
			float: left;
		  }
	
		  #secRight {
			width: 100%;
			height: 34.5em;
		  }
	
		  #writtingcont1 {
			font-weight: bold;
			font-size: 40px;
			width: 12.3em;
			padding-right: 0em;
		  }

		  #imageAboutus {
			z-index: -1;
			border-radius: 1em;
			width: 80%;
			height: 17em !important;
			position: relative;
			left: 9%;
		}

		  #right {
			display: flex;
			position: relative;
			width: 500%;
			right: 200%;
			flex: 2;
			text-align: center !important; 
		  }
		  
		  #left {
			flex: 1;
			height: 430px;
			text-align: center; 
		  }
		  
		  #games-button{
			position: relative;
			top: 13%;
			left: 10%;
			width: 76%;
			height: 19%;
			border: 1px;
			border-radius: 26px;
			margin-left: -20%;
			font-size: 35px;
			text-align: center;
			background-color: #990000;
			color: white;
		  }
		
		  
		 #steam-style-bar {
			position: relative;
			left: 82.2%;
			top: -1.5em;
			justify-content: space-between;
			display: flex;
			width: 10.5em;
			height: 3em;
			margin: 0.5em 2em;
		  }
		  
		  #steam-style-bar button {
			margin: 0em 1em;
			background-color: transparent;
			border: none;
		  }
		  
		  #steam-style-bar img {
			width: 130%
		  }
		 
		  #showcase-kg{
			font-size: 20px;
			color: #990000;
		  }
		  
		  #showcase {
			font-family: 'Montserrat Alternates', sans-serif;
			text-align: center;
			font-size: 35px;
			padding-top: 1.3em;
			margin-left: 8%;
			width: 80%;
			height: 70%;
			line-height: 120%;
		  }	  

		  #roott {
			text-align: center;
		  --primary: #811B1B;
		  --white: #ffffff;
		  --bg: #f5f5f5;
		  width: 100% !important;
		  height: 420px !important;
		  position: relative;
		  margin-left: auto !important;
		  margin-right: auto !important;
		  left: 0% !important;
		  top: -3% !important;
		  margin-bottom: 7em;
		  }

		  #leninIcons {
			left: 0%; 
		  }

		  #lenin {
			top: 5em;
		  }
	}

	@media (max-width: 900px) {
		#steam-style-bar {
			position: relative;
			right: -55%;
			justify-content: space-between;
			display: flex;
			width: 10.5em;
			height: 3em;
			top: 0.1em;
			margin: 0.5em 2em;
		  }

		#subVector {
			z-index: 10;
			margin-right: 1em;
		}

		#headerwriting {
			position: relative;
			left: 12%;
			z-index: 0;
		}

		#subBack {
			margin-top: 39em;
			margin-left: 7%;
			font-size: 12.5px;
			display: none;
		}

		#backcont {
			width: 100%;
			text-align: center;
		}

		#subContent {
			margin-left: 13%;
			width: 80%;
			margin-top: 1em;
			font-size: 18px;
			text-align: center;
		}

		#subright {
			width: 100%
		}

		#steams {
			position: relative;
			bottom: 28.5em;
			left: 74%;
			width: 5em;
		}

		#subImage img,
		#subImage video {
			width: 200%;
			margin-left: 25%;

		}

		#subButton {
			margin-top: 4em;
			margin-left: 25%;
			width: 55%;
		}

		#subHeader {
			width: 200%;
		}

		.main4 {
			float: none;
			font-size: 12px;
			width: 200% !important;
			margin-left: 10%;
		}

		#wikileft {
			z-index: 0;
		}

		#wikicontHeader {
			z-index: 1;
		}

		#wikicont {
			z-index: 1;
		}

		#wikiback {
			z-index: -1;
		}

		#wikicopyrights {
			margin-top: 23em;
		}

		#wikilenin {
			opacity: 70%;
			z-index: -2;
			font-size: 25px;
			margin-top: -11em;
			position: absolute;
		}



	
	
	
	
	
	
		  
	
		  
	
		  
	
		  
	
		  
	
	

	.main-navigation {
		display: flex;
		flex-direction: row-reverse;
	}	

	#language {
		position: relative;
		right: 8em;
	}

	.extra {
		display: none;
	}

		#sectionFifth {
			position: static;
			color: white;
			background-color: #403434;
			width: 100%;
			margin-top: 19.2em;
			height: 46.5em;
		  }

		  #imageDiary {
			width: 80%;
			top: 12em;
			left: 10%;
			height: 17em;
			border-radius: 1em;
		}

		#diary {
			margin-bottom: 6em;
		}

		  #aboutus {
			text-align: center;
			width: 400%;
			left: -5em;
		}

		  #aboutcont {
			width: 22%;
			left: -0%;
			top: -3em;
		  }

		  #aboutheader {
			width: 20%;
			left: 1em;
			position: relative; 
			top: -2.6em;
		  }

		 .tranding-slider-control {
			 bottom: 7em;
		 }

		  #secLeft {
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-left: auto;
			margin-right: auto;
			width: 35em;
			height: 34.5em;
			float: left;
		  }
	
		  #secRight {
			width: 100%;
			height: 34.5em;
		  }
	
		  #writtingcont1 {
			font-weight: bold;
			font-size: 40px;
			width: 12.3em;
			padding-right: 2.5em;
		  }
	
		  #resourcesheader {
			position: relative;
			top: 0.5em;
			margin-left: 0em;
			text-align: center;
			font-size: 30px;
			height: 3em;
			width: 17em;
			border-bottom: 1px solid white;
		  }
	
		  #resourcescont {
			position: relative;
			margin-top: 2em;
			height: 20em;
			text-align: center;
			font-family: 'Montserrat Alternates', sans-serif;
		  }
	
		  #developers {
			font-size: 25px;
			padding-right: 5em;
		  }
	
		  #contact {
			font-size: 23px;
			margin-top: 1em;
			padding-right: 3em;
		  }
	
		  #copyrights {
			font-size: 18px;
			position: relative;
			top: 6.5em;
			left: 3em;
		  }
	
		  #leninIcons {
			position: relative;
			top: 7.5em;
			left: 3.2em !important;
			width: 90% !important;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;	
		  }
	
		  
		  .lIcon img{
			height: 3em;
		  }
	
		  #lsteam {
			position: relative;
		  }
	
		  #lenin {
			box-sizing: border-box;
			position: relative;
			display: flex;
			top: 6em;
			width: 1em;
			left: 2%;
			padding-left: 0;
		  }
	
		  #lenin img{
			width: 23em;
			height: 23em;
		  }
	
		  #secKremlin img{
			position: relative;
			bottom: 12em;
			left: 0em;
			margin-top: 0.8em;
			width: 4em;
			height: 4em;
		  }
	}

	@media (max-width: 710px) {

		#headerwriting {
			position: relative;
			left: 18%;
			z-index: 0;
		}

		#mainsteam { 
			position: relative;
			right: 28%;
			top: -27em;
		}

		#ourgamessteam {
			top: -2.9em;
			right: -60%;
		}

		#diarycont {
			font-size: 23px;
		}

		#rightsteam {
			position: relative;
			right: 14em;
		  }

		#ourgamesback0 img{
			top: 10em;
			width: 100%;
			height: 30em;
		  }

		  #ourgamesback1 img{
			position: absolute;
			top: 35.7em;
			width: 100%;
			height: 30em;
		  }

		  #ourgamesback2 img{
			position: absolute;
			top: 60.7em;
			z-index: -1;
			width: 70%;
			margin-left: -5em;
			height: 30em;
		  }

		#subHeader {
			font-size: 12px;
			width: 184%;
		}

		#subBack {
			margin-top: 39em;
			margin-left: 7%;
			font-size: 12.5px;
			display: none;
		}

		#backcont {
			width: 100%;
			text-align: center;
		}

		#subContent {
			margin-left: 13%;
			width: 80%;
			margin-top: -1em;
			font-size: 14px;
			text-align: center;
		}

		#wikilenin {
			opacity: 70%;
			z-index: -2;
			margin-left: -3em;
			font-size: 24px;
			margin-top: -10em !important;
			position: absolute;
		}

		#subright {
			width: 100%
		}

		#subButton {
			font-size: 13px;
			position: relative;
			bottom: 3em;
			width: 100%;
			margin-left: 2em;
		}
		
		#subBack {
			font-size: 10px;
			margin-top: 52em;
		}

		#steams {
			position: relative;
			bottom: 28em;
			left: 69%;
			width: 5em;
		}

		#wikisteams {
			margin-right: 15%;
		}

		.main4 {
			float: none;
			font-size: 10px;
			width: 200% !important;
			margin-left: 8%;
		}

		#wikicopyrights {
			margin-top: 26.7em;
		}

		#wikilenin {
			margin-top: 3em;
		}

		


		#ourgamesheader2 {
			font-size: 30px;
		}

		.main-navigation {
			position: relative;
			top: 1.5em;
			right: 42%;
			width: 200%;
			text-align: center;
			margin-left: 0px;
		}	
	
		header {
			display: block !important;
			margin-bottom: 4em;
		}

		#language {
			position: relative;
			right: 8em;
		}

	
	
	
	
	
	
	
		  
	
		  
	
		  
	
		  
	
		  
	
	
	}

	@media (max-width: 527px) {
		.tranding-slider-control {
			 bottom: 2em;
		 }
		
		#secKremlin img {
			left: 24em;
			top: -20em !important;
			width: 7em;
			height: 7em;
		}

		#mainsteam { 
			position: relative;
			right: 30%;
			top: -29em;
		}

		#ourgamessteam {
			top: -2.9em;
			right: -45%;
		}


		#steam-style-bar {
			position: relative;
			right: 82.5%;
			justify-content: space-between;
			display: flex;
			width: 10.5em;
			height: 3em;
			margin: 0.5em 2em;
		  }

		#ourgamesback2 img{
			position: absolute;
			top: 60.7em;
			z-index: -1;
			width: 70%;
			margin-left: -5em;
			height: 30em;
		  }

		#subBack {
			margin-top: 20em;
			margin-left: -1em;
			font-size: 20px;
			height: 14em;
			display: none;
		}

		#subBack {
			margin-top: 39em;
			margin-left: 7%;
			font-size: 12.5px;
			display: none;
		}

		#backcont {
			width: 100%;
			text-align: center;
		}

		#subContent {
			margin-left: 13%;
			width: 80%;
			margin-top: -2em;
			font-size: 14px;
			text-align: center;
		}

		#subright {
			width: 100%
		}

		#subHeader {
			font-size: 13px;
			width: 180%;
		}

		#steams {
			position: relative;
			bottom: 28.5em;
			left: 64%;
			width: 5em;
		}

		#wikisteams {
			margin-right: 23%;
		}

		#ourgamesheader2 {
			margin-left: -1.3em;
		}

		.main4 {
			float: none;
			font-size: 9px;
			width: 200% !important;
			margin-left: 12%;
		}

		#wikicopyrights {
			margin-top: 30em;
		}

		#wikilenin {
			margin-top: 3em;
			font-size: 19px;
		}

	
	
	
	
	
	
		  
	
		  
	
		  
	
		  
	
		  
	
	


		header li {
			font-size: 14px;
		}

		#imageDiary {
			width: 80%;
			top: 10em;
			left: 10%;
			height: 17em;
			border-radius: 1em;
		}

		#diarycont {
			font-size: 20px;
		}

		#diary {
			width: 80%;
		}

		#ourgamesheader {
			font-size: 20px;
			text-align: center;
			width: 200%;
			left: -34%;
		}

		#imageourgames {
			width: 80%;
			left: 10%
		}

		#diaryheader {
			font-size: 20px;
			width: 100%;
			position: relative;
			left: -10%;
		}

		#diarycont {
			left: -15%;
			position: relative;
		}

		#ourgamescont {
			font-size: 20px;
			text-align: center;
			left: -34%;
		}

		#ourgamesright {
			text-align: center;
			top: -22em;
			left: 23%;
		}


		#aboutcont {
			width: 22%;
			left: 0.4%;
			font-size: 20px;
		  }

		  #aboutheader {
			width: 20%;
			left: 1em;
			position: relative; 
			font-size: 20px;
		  }

		#ourresources {
			position: relative;
			display: flex;
			width: 400% !important;
			right: 149% !important;
		}

		#resourcesheader {
			font-size: 20px;
			margin-left: 4.2em;
		}

		#writtingcont1 {
			font-size: 26px;
			margin-left: 2.4em;
		}

		#developers {
			font-size: 27px;
			margin-right: 0em;
		}

		#contact {
			font-size: 20px;
		}

		#copyrights {
			font-size: 14px;
			margin-left: 4em;
			position: relative;
			top: 27.5em;
		}

		#sectionFifth {
			position: relative;
			color: white;
			background-color: #403434;
			width: 100%;
			margin-top: 25em;
			height: 77.5em;
		  }

		  #lenin img{
			position: relative;
			top: -5em;
		}

		  #leninIcons {
			top: 7em;
			left: 3% !important;
			flex-wrap: wrap;
		  }

		  .lIcon {
			margin-left: 1em !important;
		  }

		  
	}

	@media (max-width: 461px) {
		#imageAboutus {
			left: 2em;
		}
		
		#aboutcont {
			left: 0.8em;
		}
		
		#aboutheader {
			left: 2em;
		}
		
		#secKremlin img {
			left: 20em;
			top: -10em;
		}

		#lenin {
			left: 1em;
		}

		#subButton {
			font-size: 10px;
		}

		#steams {
			position: relative;
			bottom: 28.5em;
			left: 59%;
			width: 5em;
		}

		#subBack {
			margin-top: 39em;
			margin-left: 7%;
			font-size: 12.5px;
			display: none;
		}

		#backcont {
			width: 100%;
			text-align: center;
		}

		#subContent {
			margin-left: 16%;
			width: 80%;
			margin-top: -3em;
			font-size: 13px;
			text-align: center;
		}

		#subright {
			width: 100%
		}

		.main4 {
			float: none;
			font-size: 7px;
			width: 200% !important;
			margin-left: 7%;
		}

		#wikicopyrights {
			margin-top: 26em;
		}

		#wikilenin {
			margin-top: 4em;
			font-size: 15.5px;
		}

		header {
			right: 30em !important;
		}

	}

/* Floating read-aloud accessibility button (populated on every page). */
#read-aloud {
	position: fixed;
	right: 1.5em;
	bottom: 1.5em;
	width: 3.2em;
	height: 3.2em;
	border: none;
	border-radius: 50%;
	background-color: #811B1B;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 1000;
}

#read-aloud img {
	width: 60%;
	height: 60%;
}

#read-aloud.reading {
	background-color: #3d0c0c;
	outline: 2px solid #ffffff;
}


/* The bar sizes icons as % of the button, which collapses SVG — pin explicit size. */
#contrast-toggle img {
	width: 2.4em;
	height: 2.4em;
}


#contrast-toggle {
	cursor: pointer;
}


/* Social icon hover tint (brand red). */
#SectionBar img,
#leninIcons img {
	transition: filter 0.2s;
}

#SectionBar button:hover img,
#leninIcons .lIcon:hover img {
	filter: sepia(1) saturate(9) hue-rotate(-35deg) brightness(0.65);
}


/* Smooth cross-document page transitions (progressive enhancement; no-op in Firefox). */
@view-transition {
	navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}
}

/* Game and DLC card hover. */
.gameIcon,
.dlcCard img {
	transition: transform 0.2s;
}

.gameCell:hover .gameIcon,
.dlcCard:hover img {
	transform: scale(1.04);
}


/* Small-screen fixes: header must fit 390px, the Join page paper must hold its text. */
@media (max-width: 600px) {
	#logo {
		left: 0.5em;
	}

	header nav {
		margin-left: 0.5em;
	}

	header ul {
		margin-left: 0;
		padding-left: 0;
	}

	header li {
		font-size: 13px;
		padding: 12px 5px 5px 5px;
	}

	header li .extra {
		display: none;
	}

	#language {
		right: 0;
		font-size: 11px;
		padding: 6px;
	}

	#wikileft {
		width: 88%;
		margin-left: 6%;
	}

	#wikicontHeader {
		font-size: 1.3em;
		margin-left: 0;
	}

	#wikicont {
		margin-left: 0;
		font-size: 1.05em;
	}

	#wikiback,
	#wikibackimg {
		width: 100%;
	}
}


@media (max-width: 600px) {
	header li {
		font-size: 12px;
		padding: 12px 3px 5px 3px;
	}

	#language {
		position: static;
		font-size: 10px;
		padding: 5px;
	}

	#showcase {
		width: 96%;
	}

	#showcase p {
		font-size: 26px;
	}

	#wikicontHeader,
	#wikicont {
		width: 95%;
	}
}


@media (max-width: 600px) {
	#showcase {
		margin-left: 4%;
		width: 92%;
		font-size: 27px;
	}

	#language {
		margin-right: 10px;
	}

	#wikicontHeader,
	#wikicont {
		width: 84%;
	}
}


@media (max-width: 600px) {
	#wikileft {
		width: 90vw;
		margin-left: 4vw;
	}

	#wikiback,
	#wikibackimg {
		width: 96vw;
	}

	#showcase-kg h1 {
		font-size: 1.4em;
	}
}


@media (max-width: 600px) {
	#showcase {
		font-size: 24px !important;
	}

	#wikicontHeader,
	#wikicont {
		width: 80% !important;
	}
}


@media (max-width: 600px) {
	.main4 {
		margin: 0 !important;
		padding: 0 !important;
	}

	#wikileft {
		margin-left: 2vw !important;
		width: 88vw !important;
	}

	#wikiback {
		margin-left: 2vw !important;
		width: 94vw !important;
	}

	#wikibackimg {
		width: 94vw !important;
	}
}



/* Language dropdown. */
#langMenu {
	position: relative;
	display: inline-block;
}

#langBtn {
	background-color: #811B1B;
	color: #ffffff;
	border: none;
	border-radius: 25px;
	padding: 8px 12px;
	font-size: 12px;
	cursor: pointer;
}

#langList {
	position: absolute;
	right: 0;
	top: 120%;
	background: #f5f5f5;
	border: 1px solid #811B1B;
	border-radius: 8px;
	padding: 4px 0;
	margin: 0;
	list-style: none;
	z-index: 100;
	min-width: 11em;
	text-align: left;
}

#langList li {
	display: block;
	padding: 0;
}

#langList a {
	display: block;
	padding: 6px 14px;
	color: #000000;
	font-size: 14px;
}

#langList a:hover {
	background: #811B1B;
	color: #ffffff;
}

#langList a[aria-current="true"] {
	font-weight: bold;
}


/* News page: baked Telegram feed. */
#newsMain {
	margin: 2em auto 3em;
	width: min(650px, 92vw);
}

#newsHeader {
	font-size: 2em;
	font-weight: bold;
	border-bottom: 1px solid #990000;
	margin-bottom: 0.6em;
}

.tgPost {
	background: #f5f5f5;
	border-radius: 10px;
	padding: 1em;
	margin-bottom: 1em;
}

.tgPostPhoto {
	width: 100%;
	border-radius: 8px;
	display: block;
	margin-bottom: 0.6em;
}

.tgPostText {
	line-height: 1.45;
}

.tgPostDate {
	display: block;
	margin-top: 0.5em;
	font-size: 0.85em;
	color: #811B1B;
}

#newsFollow {
	margin-top: 1.2em;
}

/* Guides page: a scrollable top-guides list per game. */
#guidesMain {
	margin: 2em auto 3em;
	width: min(650px, 92vw);
}

#guidesHeader {
	font-size: 2em;
	font-weight: bold;
	border-bottom: 1px solid #990000;
	margin-bottom: 0.6em;
}

.guideGame {
	margin-bottom: 1.6em;
}

.guideGameHeader {
	font-size: 1.3em;
	font-weight: bold;
	border-bottom: 1px solid #990000;
	margin-bottom: 0.5em;
}

.guideList {
	max-height: 24em;
	overflow-y: auto;
	padding-right: 0.4em;
	scrollbar-width: thin;
	scrollbar-color: #990000 transparent;
}

.guideList::-webkit-scrollbar {
	width: 8px;
}

.guideList::-webkit-scrollbar-thumb {
	background: #990000;
	border-radius: 4px;
}

.guideCard {
	display: flex;
	gap: 0.8em;
	background: #f5f5f5;
	border-radius: 10px;
	padding: 0.8em;
	margin-bottom: 0.7em;
	color: inherit;
	text-decoration: none;
}

.guideCard:hover {
	background: #e7e7e7;
}

.guideThumb {
	width: 4.5em;
	height: 4.5em;
	object-fit: cover;
	border-radius: 8px;
	flex: none;
}

.guideTitle {
	font-weight: bold;
}

.guideStars {
	height: 1em;
	vertical-align: -0.15em;
}

.guideAuthor {
	font-size: 0.85em;
	color: #666666;
	margin-top: 0.15em;
}

.guideDesc {
	font-size: 0.9em;
	margin-top: 0.3em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Per-game credits. */
#subCredits {
	margin: 1.5em 0 0 2em;
	width: 24em;
}

#subCreditsHeader {
	font-size: 1.2em;
	font-weight: bold;
	border-bottom: 1px solid #990000;
	margin-bottom: 0.3em;
}


/* Narrow layouts hide the paper (as the old absolute image did). */
@media (max-width: 1152px) {
	#backcont::before {
		display: none;
	}
}

/* Games ↔ DLC table collapses to one column on narrow screens. */
@media (max-width: 1009px) {
	#gamesTableHead .gameCell {
		display: none;
	}

	.gameRow {
		flex-direction: column;
		align-items: center;
	}

	#gamesTable .gameCell {
		flex-basis: auto;
		border-right: none;
	}

	.gameDlcs {
		justify-content: center;
	}
}