@charset "utf-8";

a {
  color: #f10000;
  text-decoration: none;
}

main, footer {
  width: 100%;
  margin: 2rem auto;
}

main h1 {
  font-family: "Special Elite";
  font-weight: normal;
}
main p {
  width: 50%;
  font-size: 1.25rem;
}

dt {
  margin-top: 1rem;
  font-size: 1.5rem;
}
dd { margin: auto; }

footer a:hover { color: #600; }

nav {
  height: 2rem;
  margin-bottom: 1rem;
}
nav #facebook:hover  { fill: #4172B8; }
nav #github:hover    { fill: #181717; }
nav #instagram:hover { fill: #E4405F; }
nav #linkedin:hover  { fill: #0077B5; }
nav #telegram:hover  { fill: #2CA5E0; }
nav #twitch:hover    { fill: #6441A4; }
nav #twitter:hover   { fill: #1DA1F2; }
nav #youtube:hover   { fill: #FF0000; }
nav a {
  width: 1.5rem;
  margin: auto 0.25rem;
  display: inline-block;
}

.button {
  width: 8rem;
  margin: 0.5rem;
  padding: 0 1rem 0.25rem;
  display: inline-block;
  text-align: center;
  font-size: 2rem;
  border: 1px solid #f10000;
  border-radius: 0.25rem;
}

.button:hover {
  color: #f8f8f8;
  background: #f10000;
}

.fade { transition: all 250ms ease; }

#copyleft {
  display: inline-block;
  transform: scaleX(-1);
}

#hero {
  font-size: 4rem;
  opacity: 33%;
}

#hero:hover { opacity: 100%; }

/* Content Layout Control */
@media (orientation: portrait) {
  body {
    text-align: center;
    justify-content: flex-start;
  }
  main p { width: 100%; }
}
@media (max-width: 1200px) {
  body { padding: 4rem; }
}
@media (max-width: 800px) {
  html { font-size: 12px; }
  body { padding: 2rem; }
  nav a { width: auto; }
  footer svg { width: 2rem; height: auto; }
}
@media (max-height: 500px) {
  body { padding: 2rem; }
  main, footer { margin: 1rem auto; }
}

/* Background Sizing Control */
@media (orientation: portrait) {
  body { background-size: 80% auto; }
}
@media (orientation: landscape ) {
  body { background-size: auto 80%; }
}
@media (max-aspect-ratio: 8/5) and (min-aspect-ratio: 5/8) {
  body { background-size: 60%; }
}