* {
  box-sizing: border-box;
}
body {
  background-color: green;
  color:white;
}
a {
	color:var(--link-color);
	text-decoration: none;
}

header {
  grid-area: header;
  font-size: 1.6em;
  border: var(--border);
  border-radius: var(--round-borders);
  background: var(--content-background-color);
  width: 1212px;
  text-align: center;display: block; margin-left: auto; margin-right: auto;
}
aside {
  grid-area: sidebar;
  font-size: 1.4em;
  border: var(--border);
  border-radius: var(--round-borders);
  background: var(--content-background-color);
  padding: var(--padding);
  width: 200px;
	text-align: left;display: block; margin-left: auto;
}
.main {
  grid-area: main;

  font-size: 1.6em;
  padding: var(--padding);
  border: var(--border);
  border-radius: var(--round-borders);
  background: var(--content-background-color);
  width: 1000px;
	text-align: center;display: block;

}
.single-main {
  grid-area: single-main;
  font-size: 1.6em;
  border: var(--border);
  border-radius: var(--round-borders);
  background: var(--content-background-color);
  width: 1212px;
  text-align: center;display: block; margin-left: auto; margin-right: auto;

}
.game1 {
  grid-area: game1;
  padding: var(--padding);
  border: var(--border);
  border-radius: var(--round-borders);
  background: var(--content-background-color);
  width: 700px;
	text-align: center;display: block; margin-left: auto;

}
.game2 {
  grid-area: game2;
  	  padding: var(--padding);
  border: var(--border);
  border-radius: var(--round-borders);
  background: var(--content-background-color);
  width: 700px;
	text-align: center;display: block;
}

.single-layout {
  display: grid;
  grid-gap: 10px;
  grid-template:
    "header"
    "single-main"
}

.index-layout {
  display: grid;
  grid-gap: 10px;
  grid-template:
    "header header"
    "sidebar main"
}
.games-layout {
  display: grid;
  grid-gap: 10px;
  grid-template:
    "header header"
    "game1 game2"
}
.header-content {
  padding: var(--padding);

}
.spinners {
  transform: rotateY(0deg);
  animation: rotate 2s infinite linear;
}
.spinnersoff {
  height: 100px;
  width: 100px;
}
.strokeme {
  color: #1ced34;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
transform: translateY(-20%);

}
.strokeme2 {
  color: #1ced34;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}
@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
:root {
  /* Background Colors: */
  --background-color: #000000;
  --content-background-color: #00000065;
  --sidebar-background-color: #00000094;

  /* Text Colors: */
  --text-color: #ffffff;
  --sidebar-text-color: #ce0000;
  --link-color: #1ced34;
  --link-color-hover: #d50000;

  /* Text: */
  --font: 'Open-Dyslexic', sans-serif;
  --heading-font: 'Open-Dyslexic', sans-serif;
  --font-size: 18px;

  /* Other Settings: */
  --margin: 14px;
  --padding: 22px;
  --border: 3px solid #1ced34;
  --round-borders: 14px;
  --sidebar-width: 236px;
}