html, body {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  min-height: 100%;
}

body {
  position: relative;
  height: auto;
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 10%, rgba(0,212,255,1) 100%);
}

a:hover {
  text-shadow: #fff 0 0 4px;
  color: #fff;
}
a, a:visited {
  color: rgb(103, 115, 221);
}

.clearfix {
  clear: both;
}

// section styling
section {
  color: #fff;
  z-index: 9999;
}

section .inner {
  background: rgba(0, 0, 0, 0.3);
  padding: 1em 4em 1em 4em;
  max-width: 960px;
  margin: auto;

  @media (max-width: 960px) {
    padding: 8px 14px;
  }
}

section:first-of-type {
  padding-top: 4em;
}
section:last-of-type {
  padding-bottom: 8em;
}

// content layout

.question h4 {
  font-weight: 800;
  font-style: italic;
}

.title-section {
  margin: auto;
  text-align: center;
}

.content-section fieldset {
  border: 1px solid black;
  background-color: rgba(0, 0, 0, 0.5);
}

.title-section h1 {
  display: block;
}

.button-row {
  text-align: center;
  height: auto;
}

.logo-scale {
  margin: auto;
  width: 100%;
  max-width: 960px;
  min-width: 480px;
}

.logo-scale img.text {
  width: 75%;
}

@keyframes drop-in {
  0% {
    transform: translate(0, -200px);
  }
  100% {
    transform: translate(0, 0);
  }
}

.logo-scale img.logo {
  width: 20%;
  animation: 1s cubic-bezier(0.075, 0.82, 0.165, 1) 0s 1 drop-in;
}

.footnote {
  text-align: center;
}

.links {
  text-align: center;
}

.links a, a:visited {
  border: none;
  outline: none;
  text-decoration: none;
  line-height: 24px;
  color: rgb(200, 200, 200);

  &:not(.no-space) {
    margin-right: 24px;
  }
}

.links a:focus, .links a:active {
  color: #fff;
}

.links a:hover {
  color: #fff;
}

.small, .footnote {
  font-size: 80%;
}

// something that's "like" a button, not a like-button
.like-button {
  appearance: none;
  border: none;
  border-radius: 4px;
  padding: 1em 2em;
  margin: 10px 10px 0 10px;
  display: inline-block;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
  font-size: 150%;
  &.primary {
    color: #fff;
    background-color: rgb(255, 50, 50);
  }

  &.secondary {
    color: #fff;
    background-color: rgb(103, 115, 221);
  }

  &:not(:disabled):hover {
    &.primary { background-color: rgb(255, 180, 180); }
    &.secondary { background-color: rgb(180, 180, 221); }
  }

  &:disabled, &.disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  &:hover {
    cursor: pointer;
  }
}

// icon stuff
.icon {
  width: 24px;
  height: 24px;
  line-height: 24px;
  border: none;
  display: inline-block;
  position: relative;
  top: 5px;
  background-size: contain;
}

.icon-discord {
  background-image: url('../img/icons/discord_small.png')
}

.icon-twitter {
  background-image: url('../img/icons/twitter_small.png');
}

.icon-github {
  background-image: url('../img/icons/github_small.png');
}

// background style
.bg-art {
  z-index: -1;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  .castle {
    max-width: 30%;
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .cloud {
    position: absolute;
    width: 325px;
    height: 326px;
    opacity: 0.2;
  }
}

@keyframes left-to-right {
  0% {
    left: -10%;
  }
  100% {
    left: 110%;
  }
}

@keyframes right-to-left {
  0% {
    right: -10%;
  }
  100% {
    right: 110%;
  }
}

.cloud-1 {
  background-image: url('../img/bg/cloud1.png');
  top: 15%;
  animation: 24s linear 0s infinite left-to-right;
}
.cloud-2 { 
  background-image: url('../img/bg/cloud2.png');
  top: 43%;
  animation: 21s linear 0s infinite right-to-left;
}
.cloud-3 {
  background-image: url('../img/bg/cloud3.png');
  top: 65%;
  animation: 33s linear 8s infinite left-to-right;
}
.cloud-4 {
  background-image: url('../img/bg/cloud4.png');
  top: 82%;
  animation: 28s linear 2s infinite right-to-left;
}

.pog {
  font-style: normal;
  position: relative;

  &:hover {
    cursor: none;
    
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 50%;
      width: 17px;
      height: 24px;
      transform: translate(50%, -50%);
      background-image: url('../img/pog.png');
      background-size: contain;
      pointer-events: none;
      background-repeat: no-repeat;
    }
  }
}