body {
  font-family: Arial, sans-serif;
  margin: 0;
  background-color: #ffffe3;
}

/* HEADER */
header {
  padding: 1em;
  text-align: center;
  background-color: #bdb4ff;
}

.all {
  padding: 1em;
}

.all h3 {
  background-color: #808034;
  padding: 0.5em;
  margin-bottom: 0.25em;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

h2 {
  font-size: 2em;
}

.toc {
  padding: 0;
  width: 860px;
}

.toc ul {
  list-style-type: none;
  padding: 0;
  background-color: #bdb4ff;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

.toc li {
  line-height: 2;
  padding-left: 0.5em
}

.toc a {
  text-decoration: none;
  color: #723480;
}

.toc a:hover {
  color: #ffffe3;
}

.casualintro p,
.compintro p,
.storyintro p,
.hardcoreintro p,
.friendintro p {
  line-height: 2;
  text-indent: 4em;
}

.intro ul {
  line-height: 2;
}

.description {
  background-color: #bdb4ff;
  padding: 0.5em;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  line-height: 2;
  text-indent: 4em;
}

.caption {
  font-style: italic;
  margin: 0;
  font-size: 0.8em;
  padding-bottom: 1em;
}

/* NAV BAR */
nav ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
  padding: 0;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #808034;
}

nav {
  font-weight: bold;
}

nav a {
  text-decoration: none;
}

nav li {
  padding: 0.5em;
}

nav a:link {
  color: #723480;
}

nav a:visited {
  color: #bdb4ff;
}

nav a:hover {
  color: #ffffe3;
}

/* MAIN LAYOUT */
.container {
  display: flex;
  align-items: flex-start;
}

.container2 {
  display: flex;
  flex-direction: column;
  border-top: 2px solid black;
}

/* MAIN CONTENT */
main {
  flex: 3;
  padding: 1em;
}

/* SIDEBAR */
aside {
  flex: 1;
  padding: 1em;
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #723480;
}

aside h3 {
  text-align: center;
}

aside p {
  margin: 0;
  padding-bottom: 0.5em;
}

aside a {
  text-decoration: none;
}

aside a:link,
aside a:visited {
  color: #bdb4ff;
}

aside a:hover {
  color: #808034;
}

/* GAME CARD */
.game-card {
  border-top: 3px solid black;
  padding-top: 1em;
}

.media {
  background-color: #723480;
  height: 400px;
  border: 1px solid black;
  margin: 1em 0;
  display: flex;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.herocontainer {
  display: flex;
}

#homehero1 {
  background-image: url(BotW.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#homehero2 {
  background-image: url(rdr2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#homehero2-2 {
  background-image: url(rdr22.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#homehero3 {
  background-image: url(odyssey.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#homehero3-2 {
  background-image: url(odyssey2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#homehero4 {
  background-image: url(baldursgate.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#homehero4-2 {
  background-image: url(baldursgate2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#homehero5 {
  background-image: url(fatamorgana.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#homehero5-2 {
  background-image: url(fatamorgana2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#homehero6 {
  background-image: url(eldenring.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#homehero6-2 {
  background-image: url(eldenring2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#homehero7 {
  background-image: url(tears.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#homehero7-2 {
  background-image: url(tears2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#homehero8 {
  background-image: url(portal.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#homehero8-2 {
  background-image: url(portal2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#homehero9 {
  background-image: url(hades2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#homehero9-2 {
  background-image: url(hades22.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#homehero10 {
  background-image: url(p5r.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#homehero10-2 {
  background-image: url(p5r2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#casualhero1 {
  background-image: url(minecraft.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#casualhero2 {
  background-image: url(stardew.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#casualhero2-2 {
  background-image: url(stardew2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#casualhero3 {
  background-image: url(animalcrossing.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#casualhero3-2 {
  background-image: url(animalcrossing2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#casualhero4 {
  background-image: url(sims.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#casualhero4-2 {
  background-image: url(sims2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#casualhero5 {
  background-image: url(slimerancher.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#casualhero5-2 {
  background-image: url(slimerancher2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#casualhero6 {
  background-image: url(terraria.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#casualhero6-2 {
  background-image: url(terraria2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#casualhero7 {
  background-image: url(dreamlight.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#casualhero7-2 {
  background-image: url(dreamlight2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#casualhero8 {
  background-image: url(dave.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#casualhero8-2 {
  background-image: url(dave2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#casualhero9 {
  background-image: url(bloons.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#casualhero9-2 {
  background-image: url(bloons2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#casualhero10 {
  background-image: url(powerwash.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#casualhero10-2 {
  background-image: url(powerwash2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#comphero1 {
  background-image: url(league.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#comphero2 {
  background-image: url(cs2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#comphero2-2 {
  background-image: url(cs22.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#comphero3 {
  background-image: url(val.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#comphero3-2 {
  background-image: url(val2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#comphero4 {
  background-image: url(dota.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#comphero4-2 {
  background-image: url(dota2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#comphero5 {
  background-image: url(smash.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#comphero5-2 {
  background-image: url(smash2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#comphero6 {
  background-image: url(rocketleague.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#comphero6-2 {
  background-image: url(rocketleague2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#comphero7 {
  background-image: url(apex.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#comphero7-2 {
  background-image: url(apex2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#comphero8 {
  background-image: url(fortnite.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#comphero8-2 {
  background-image: url(fortnite2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#comphero9 {
  background-image: url(streetfighter.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#comphero9-2 {
  background-image: url(streetfighter2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#comphero10 {
  background-image: url(ow2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#comphero10-2 {
  background-image: url(ow22.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#storyhero1 {
  background-image: url(lastofus.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#storyhero2 {
  background-image: url(rdr2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#storyhero2-2 {
  background-image: url(rdr22.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#storyhero3 {
  background-image: url(witcher.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#storyhero3-2 {
  background-image: url(witcher2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#storyhero4 {
  background-image: url(gow.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#storyhero4-2 {
  background-image: url(gow2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#storyhero5 {
  background-image: url(clairobscur.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#storyhero5-2 {
  background-image: url(clairobscur2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#storyhero6 {
  background-image: url(baldursgate.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#storyhero6-2 {
  background-image: url(bg32.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#storyhero7 {
  background-image: url(masseffect.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#storyhero7-2 {
  background-image: url(masseffect2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#storyhero8 {
  background-image: url(cyberpunk.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#storyhero8-2 {
  background-image: url(cyberpunk2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#storyhero9 {
  background-image: url(skyrim.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#storyhero9-2 {
  background-image: url(skyrim2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#storyhero10 {
  background-image: url(gta5.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#storyhero10-2 {
  background-image: url(gta52.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#hardcorehero1 {
  background-image: url(sekiro.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#hardcorehero2 {
  background-image: url(battletoads.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#hardcorehero2-2 {
  background-image: url(battletoads2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#hardcorehero3 {
  background-image: url(darksouls.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#hardcorehero3-2 {
  background-image: url(darksouls2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#hardcorehero4 {
  background-image: url(celeste.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#hardcorehero4-2 {
  background-image: url(celeste2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#hardcorehero5 {
  background-image: url(bloodborne.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#hardcorehero5-2 {
  background-image: url(bloodborne2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#hardcorehero6 {
  background-image: url(eldenring.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#hardcorehero6-2 {
  background-image: url(eldenring2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#hardcorehero7 {
  background-image: url(meatboy.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#hardcorehero7-2 {
  background-image: url(meatboy2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#hardcorehero8 {
  background-image: url(cuphead.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#hardcorehero8-2 {
  background-image: url(cuphead2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#hardcorehero9 {
  background-image: url(returnal.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#hardcorehero9-2 {
  background-image: url(returnal2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#hardcorehero10 {
  background-image: url(hollowknight.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#hardcorehero10-2 {
  background-image: url(hollowknight2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#friendhero1 {
  background-image: url(minecraft.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#friendhero2 {
  background-image: url(mariokart.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#friendhero2-2 {
  background-image: url(mariokart2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#friendhero3 {
  background-image: url(fortnite.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#friendhero3-2 {
  background-image: url(fortnite3.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#friendhero4 {
  background-image: url(borderlands.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#friendhero4-2 {
  background-image: url(borderlands2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#friendhero5 {
  background-image: url(lamb.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#friendhero5-2 {
  background-image: url(lamb2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#friendhero6 {
  background-image: url(overcooked.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#friendhero6-2 {
  background-image: url(overcooked2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#friendhero7 {
  background-image: url(ittakestwo.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#friendhero7-2 {
  background-image: url(ittakestwo2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#friendhero8 {
  background-image: url(awayout.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#friendhero8-2 {
  background-image: url(awayout2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#friendhero9 {
  background-image: url(drg.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#friendhero9-2 {
  background-image: url(drg2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

#friendhero10 {
  background-image: url(amongus.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 1;
  background-repeat: no-repeat;
}

#friendhero10-2 {
  background-image: url(amongus2.jpg);
  height: 400px;
  background-size: 100% 100%;
  flex: 2;
  background-repeat: no-repeat;
}

/* FORM */
.feedback {
  border-top: 2px solid black;
  padding: 1em;
}

form {
  display: flex;
  flex-direction: column;
  max-width: 400px;
}

input,
textarea {
  margin-bottom: 0.5em;
}

/* TABLE */
.table {
  border-collapse: collapse;
  width: 100%;
}

.table th,
.table td {
  border: 1px solid black;
  padding: 10px 15px;
  text-align: center;
}

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: black;
  color: white;
  padding: 10px 15px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
}

.back-to-top:hover {
  background-color: black;
}

/* FOOTER */
footer {
  border-top: 2px solid black;
  padding: 1em;
}

/* side-by-side layout */
.footer-container {
  display: flex;
  justify-content: space-between;
  gap: 0;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

/* form side */
.footer-form {
  flex: 2;
  background-color: #723480;
  padding-left: 1em;
  padding-bottom: 1em;
}

.footer-form form {
  display: flex;
  flex-direction: column;
  max-width: 300px;
}

/* contact side */
.footer-contact {
  flex: 1;
  text-align: right;
  background-color: #808034;
  padding-right: 1em;
}

/* spacing */
input,
textarea {
  margin-bottom: 0.5em;
}