/* Fonts */
/* Itim font: https://fonts.google.com/specimen/Itim */
@font-face {
  font-family: "Itim";
  src: url("/assets/miscellaneous/Itim.ttf") format("truetype");
}

/* Procrastinating Pixie font: https://www.fontspace.com/pro-pixie-font-f44959 */
@font-face {
  font-family: "Procrastinating Pixie";
  src: url("/assets/miscellaneous/Procrastinating_Pixie.ttf") format("truetype");
}

@keyframes gradient {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

/* Background gradient */
body {
  color: #333333;
  font-family: "Procrastinating Pixie", "Itim", system-ui;
  text-align: center;
  background: linear-gradient(
    -45deg,
    #8779eb,
    #7074ec,
    #6780ee,
    #5d8ff0,
    #54a2f2,
    #4ab8f5,
    #3fd2f7,
    #35f1fa
  );
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  min-height: 100vh;
}

/* Header of page */
.header {
  margin-bottom: 20px;
}

.header img {
  width: 6rem;
  height: auto;
  border-radius: 50%;
}

/* Body of page */
.body {
  display: block;
  font-size: 1.25em;
}

hr {
  width: 100%;
  max-width: 500px;
  margin-bottom: 20px;
}

.button {
  color: #333333;
  display: flex;
  height: 200%;
  width: 100%;
  border: 1px solid #333333;
  border-radius: 1em;
  max-width: 500px;
  max-height: 50px;
  margin: 0 auto 20px;
  position: relative;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.button_text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.arrow {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0%, -50%);
}

.compact {
  margin-bottom: -10px;
}

.compact .button {
  display: inline-block;
  height: 50px;
  width: 50px;
}

/* Footer of page */
.footer {
  font-size: small;
  font-family: "Itim", system-ui;
}

.footer a {
  color: #333333;
}

/* Error page specific styling */
.error-title {
  font-size: 2.5rem;
  margin-bottom: 0.25em;
}

.error-code {
  font-size: 1.1rem;
  margin-bottom: 0.75em;
  opacity: 0.8;
}

.error-message {
  max-width: 500px;
  margin: 0 auto 1.5em;
}

/* Icon formatting */
ion-icon {
  font-size: 2em;
  padding: 5px;
}

/* Button colors */
#twitch:hover {
  color: #ffffff;
  background-color: #6441a5;
}

#twitter:hover {
  color: #ffffff;
  background-color: #55acee;
}

#youtube:hover {
  color: #ffffff;
  background-color: #dd0000;
}

#discord:hover {
  color: #ffffff;
  background-color: #7289da;
}

#instagram:hover {
  color: #ffffff;
  background: #d6249f;
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
}

#steam:hover {
  color: #c6c4c2;
  background-color: #171a21;
}

#github:hover {
  color: #ffffff;
  background-color: #211f1f;
}

#mail:hover {
  color: #850122;
  background-color: #ffffff;
}

#home:hover {
  color: #ffffff;
  background-color: #333333;
}