@font-face {
  font-family: 'Shark Random Funnyness 2';
  src: url(/assets/SRF2.ttf);
}

/* i'm sorry */
iframe { 
    display:none;
 }

html {
  --light: #e5e5e5;
  --dark: #2d2d2d;
  --text-color: var(--dark);
  --bg-color: var(--light);
}

@media (prefers-color-scheme: dark) {
  html {
    --text-color: var(--light);
    --bg-color: var(--dark);
  }
}

@media (prefers-color-scheme: light) {
  html {
     --text-color: var(--dark);
     --bg-color: var(--light);
  }
}

.logo {
    fill: var(--text-color);
}

body {
  background-color: var(--bg-color);
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

#main {
  position: absolute;
  top: 30%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

#logo {
  width: 100%;
  height: 100%;
  max-width: 1280px;
  max-height: 720px;
  z-index: 1;
}

#overlay {
  z-index: 2;
  width: 100%;
  position: absolute;
  top: 88%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 1;
  transition: 0.5s opacity;
}

#overlay.faded {
  opacity: 0;
  transition: none;
}

.fade {
  opacity: 0;
  transition: 0.5s opacity;
}

p {
  line-height: 32px;
}

#about {
  font-family: 'McLaren', cursive;
  margin-bottom: 0px;
  font-size: 2.5vw;
  color: var(--text-color);
  display: inline-block;
}

@media screen and (min-width: 1200px) {
  #about {
    font-size: 30px;
  }
}

a {
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

a:link {
  text-decoration: none;
  color: var(--text-color);
}

a:active {
  text-decoration: none;
  color: var(--text-color);
}

a:visited {
  text-decoration: none;
  color: var(--text-color);
}

#about a:hover {
  text-decoration: none;
  color: #e06e11;
}

#links {
  font-size: 30px;
}

.github:hover {
  text-decoration: none;
  color: black;
}

.gitlab:hover {
  text-decoration: none;
  color: #E24329;
}

.twitter:hover {
  text-decoration: none;
  color: #1DA1F2;
}

.youtube:hover {
  text-decoration: none;
  color: #FF0000;
}