@keyframes fadeinall {
    0% {
      opacity: 1; }
    97% {
      opacity: 0; }
    98% {
      opacity: 0;
      -webkit-transform: translateY(0);
      transform: translateY(0); }
    100% {
      opacity: 0;
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
      z-index: -1; } }


@font-face {
    font-family: linksFont;
    src: url(assets/fonts/neuropol.regular.otf);
}
nav {
  background-image: linear-gradient(hsl(349, 91%, 5%), hsl(0, 100%, 2%));
}

.nav-link {
  font-size: 2rem;
}

.nav-link.active {
  background: -webkit-linear-gradient(90deg, hsl(4, 62%, 50%), hsl(14, 66%, 63%));
  background-clip: content-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: underline;
}

.nav-item {
  width: 20rem;
  text-align: center;
}

.navbar-brand {
  position: absolute;
  font-size: 4rem;
}

body {
  text-align: center;
  font-family: linksFont;
  background-image: radial-gradient(hsl(281, 78%, 13%), hsl(252, 100%, 3%));
}

.separator {
  border: 0.1rem solid white;
  place-content: center;
}

.portfolio-button {
  margin: 1rem;
  background-color: hsl(225, 51%, 35%);
  border: 0.2rem solid white;
}

.portfolio-button:hover {
  transform: scale(1.05);
}

.portfolio-img {
  width: 50rem;
  height: 50rem;
  clip-path: circle();
}

footer {
  font-size: 2.5rem;
}

@media only screen and (max-width: 600px) {
  html {
    font-size: 2px;
  }
  .navbar-brand {
    display: none;
    visibility: hidden;
  }
}

@media only screen and (min-width: 768px) {
  html {
    font-size: 3px;
  }
}

@media only screen and (min-width: 992px) {
  html {
    font-size: 3.5px;
  }
}

@media only screen and (min-width: 1200px) {
  html {
    font-size: 4px;
  }
  .navbar-brand {
    display: initial;
    visibility: visible;
  }
}

@media only screen and (min-width: 1920px) {
  html {
    font-size: 4.5px;
  }
}

@media only screen and (min-width: 2560px) {
  html {
    font-size: 6.5px;
  }
}