:root {
  --head-color: #000;
  --checkers: url(../images/stripes_grey.png);
  overflow-x: hidden;
  
  --header-color: 24, 20, 68;
}

body {
  background: fixed url(../images/bg/hills.png) repeat-x bottom,
    url(../images/bg/stars.png), 
    fixed linear-gradient(#2E1947, #6B6273);
}

section {
  flex-direction: column;
}

section h2 {
  font-size: 2.5em;
  margin-top: 0;
  margin-bottom: 0.75em;
  filter: drop-shadow(3px 3px var(--head-color));
}
section p {
  font-size: larger;
}
section q {
  font-family: "Comic Relief";
  font-size: medium;
  font-style: italic;
  margin: 1em 0;
  max-width: 60%;
}
div.blinkies {
  margin: 0.5em 0;
}

article {
  max-width: 30em;
}

img.class {
  transform: translate(-10px, -50px);
  filter: drop-shadow(5px 5px #4444dd88);
  image-rendering: crisp-edges;
}

div.pre {
  min-height: 500px;
  min-width: 350px;
  margin: 0 1em;
  margin-bottom: 1em;
  align-self: center;
}

div.class {
  background: var(--checkers);
  animation: diagscroll 80s linear infinite reverse;
  width: 300px;
  height: 350px;
  transform: translate(10px, 50px);
  border: 7px var(--head-color) solid;
}

q, q a {
  color: #724eb6;
  text-decoration: NONE;
}

@keyframes peek {
  from {
    left: 100%;
  }
  to {
    left: 95%;
  }
}

@keyframes shake {
  0% { transform: translateX(0) translateY(-2px) }
  25% { transform: translateX(2px) translateY(2px) }
  50% { transform: translateX(-2px) translateY(0px) }
  75% { transform: translateX(2px) translateY(2px) }
  100% { transform: translateX(0) translateY(-2px) }
}

.brooke {
  --head-color: #5f81e888;
  --checkers: url(../images/checkers_blue.png);
}
.grace {
  --head-color: #bb5b6a88;
  --checkers: url(../images/checkers_red.png);
}
.parker {
  --head-color: #935c2e88;
  --checkers: url(../images/checkers_orange.png);
}
.ourple {
  --head-color: #aa75d788;
  --checkers: url(../images/checkers_purple.png);
}
.prange {
  --head-color: #935c2e88;
  --checkers: url(../images/checkers_orange.png);
}
.desk {
  --head-color: #89898988;
  --checkers: url(../images/checkers_grey.png);
}
.citron {
  --head-color: #a2715988;
  --checkers: url(../images/checkers_yellow.png);
}
.kp {
  --head-color: #b3804888;
  --checkers: url(../images/checkers_orange.png);
}
.sinnoh {
  display: none;
  --head-color: #0a030f;
  --checkers: url(../images/qna/sport.gif);
  color: #5a2e6f;
}
#newcharacter {
  position: absolute;
  top: 40%;
  left: 100%;
  animation: peek 6s 2 600s alternate, shake .15s linear infinite;
}

@media only screen and (min-width: 1500px) {
  section {
    flex-direction: row;
  }
  section:nth-child(even) {
    flex-direction: row-reverse;
  }
}

@media only screen and (max-width: 650px) {
  img.class {
    transform: translate(-40px, -50px);
  }
}