:root {
  --primary: rgb(137, 58, 143);
  --secondary: rgb(204, 143, 209);
  --border: rgb(64, 3, 77);
  --link: white;
  
  --switch: rgb(220, 53, 53);
  --wiiu: rgb(0, 154, 199);
  --threeds: rgb(207, 24, 31);
  --wii: rgb(141, 140, 144);
  --gamecube: rgb(106, 76, 255);
  --pc: rgb(255, 242, 0);
  --ds: rgb(60, 64, 61);
}
body {
  background-color: var(--secondary);
  color: var(--primary);
  font-family: 'VCR';
}
@font-face {
  font-family: 'Yoster Island';
  src: url(/fonts/e_yoster.otf);
}
@font-face {
  font-family: 'VCR';
  src: url('/fonts/VCRosdNEUE.ttf');
}
h1 {
  color: purple;
}
h2 {
  font-size: 2em;
  margin-bottom: 0;
  /* border: 2px solid red; */
}
h3 {
  text-decoration: underline;
  font-size: 1.5em;
}
p {
  font-size: 1.25em;
}
div {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
iframe {
  width: 48%;
  height: 500px;
  float: left;
  margin-bottom: 2%;
}
a {
  color: white;
  text-decoration: none;
}
.spoiler {
  color: black;
  background-color: black;
  border-radius: 7px;
  padding-top: 0.1%;
  padding-bottom: 0.1%;
  padding-left: 0.2%;
  padding-right: 0.2%;
  cursor: pointer;
  text-shadow: none;
  transition: color 0.25s;
}
header {
  color: var(--secondary);
  background-color: var(--primary);
  padding: 0.25%;
  padding-left: 2%;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}
header h2:first-child {
  margin-top: 7%;
}
.platform {
  font-size: 0.5em;
  padding-left: 1.5vw;
}
.rating {
  color: rgb(108, 46, 114);
  text-align: left;
}
img {
  box-shadow: none;
  transition: width 1s;        
  border: 2px solid;
  border-radius: 10%;
  cursor: pointer;
  width: 8vw;
  margin: 0.5vw;
  position: relative;
  padding: 0px;
}
.star {
  position: absolute;
  left: 0%;
  top: 0%;
  z-index: 10;
  width: 8vw;
  height: 8vw;
  border: none;
  transition: width 1s, height 1s;
}
.container:hover img {
  box-shadow: 0 0 10px 5px rgba(255, 174, 201, 0.5);
  width: 9vw;
}
.container:active img {
  filter: contrast(150%);
}
.container:hover .star {
  width: 9vw;
  height: 9vw;
}
.boxed {
  background-color: var(--primary);
  color: var(--secondary);
  padding: 1% 2%;
  border-radius: 25px;
  flex-flow: column;
  align-items: flex-start;
  margin-top: 5%;
}
.boxed h1 {
  color: var(--secondary);
}
button {
  font-family: 'Yoster Island';
  padding: 1%;
  font-size: 1.25em;
  text-align: center;
  background-color: var(--primary);
  color: var(--secondary);
  border: 4px groove var(--secondary);
  cursor: pointer;
  margin: 0 2px;
}
button:hover {
  background-color: var(--secondary);
  color: var(--primary);
  border-color: var(--primary);
}
button:active {
  background-color: var(--primary);
  color: var(--secondary);
  border-color: var(--secondary);
}
.selected {
  background-color: var(--border);
  color: var(--primary);
  border: 4px groove var(--secondary);
}
.select:hover {
  background-color: var(--primary);
  color: var(--secondary);
  border-color: var(--primary);
}
.select:active {
  background-color: var(--secondary);
  color: var(--primary);
  border-color: var(--primary);
}
#reviewList {
  width: 48%;
  max-height: 500px;
  overflow-y: scroll;
  float: right;
  border: 2px solid;
  margin-bottom: 2%;
  flex-direction: column;
}
.row:first-child {
  margin-top: 145%; /*I have no clue why it's doing this, but you'll probably have to update this value with time for all reviews to be visible*/
}
.row:last-child {
  margin-bottom: 2%;
}
#maincontent {
  justify-content: space-around;
}
#readerbutton {
  position: absolute;
  top: 1%;
  right: 1%;
}
@media only screen and (orientation: portrait) {
  #maincontent {
    flex-flow: column;
  }
  #iframe {
    width: 90%;
  }
  #reviewList {
    width: 90%;
  }
  .row:first-child {
    margin-top: 76%; /*Same thing here*/
  }
  img {
    width: 10vh;
    margin: 0.5vh;
  }
  .star {
    width: 10vh;
    height: 10vh;
  }
  .container:hover img {
    width: 11vh;
  }
  .container:hover .star {
    width: 10vh;
    height: 10vh;
  }
}