@import "colours";

@c1: #5f0f40;
@c2: #9A031E;
@c3: #E36414;
@c4: #FB8B24;
@c5: #fbbc43;
@tr: rgba(0, 0, 0, 0);
@spacing: 30px;

* {
  color: white;
}

html, body {
  background-color: @main-bg;
}

div.middle {
  position: fixed;
  width: 800px;
  height: 650px;
  left: 50%;
  top: 50%;
  margin-left: -400px;
  margin-top: -325px;
  text-align: center;
  padding: 30px 0;
  border-radius: 5px;

  span.links {
    margin-bottom: 40px;
    display: inline-block;
    color: #adadad;

    span.plead {
      font-size: 20px;
      color: #c3c3c3;
    }

    a {
      margin: auto 20px;
      color: #a2a2a2;
      text-decoration: none;
      font-size: 20px;
      border-bottom: 2px solid @main-bg;
      transition-duration: 0.2s;
      padding-bottom: 5px;

      i {
        color: #a2a2a2;
      }

      &:hover {
        i {
          color: @accent;
        }
      }
    }
  }
}

span.title {
  font-family: 'Arvo';
  display: block;
  font-size: 120px;
}

span.legal {
  display: inline-block;
  position: fixed;
  bottom: -45px;
  text-align: center;
  width: 100%;
  background-color: @main-bg;
  color: #e0e0e0;
  font-size: 10px;
  height: 80px;
  line-height: 20px;
  padding: 10px 0;
  box-sizing: border-box;
  transition-duration: 0.2s;
  cursor: default;

  b {
    color: inherit;
    transition-duration: 0.2s;
  }

  &:hover {
    bottom: 0;
  }

  &:hover > .hover-say {
    color: #5c5c5c;
  }
}
