@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: aboutMeFont;
  src: url(assets/fonts/embolism-spark.regular.ttf);
}

nav {
  background-image: linear-gradient(hsl(347, 90%, 4%), hsl(284, 100%, 3%));
}

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

.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: 7rem;
}

body {
  text-align: center;
  background-image: linear-gradient(hsl(0, 85%, 8%), hsl(339, 100%, 3%));
  font-family: aboutMeFont;
  height: 100vh;
}

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

.portfolio-description {
  font-size: 5.5rem;
  background: -webkit-linear-gradient(hsl(33, 64%, 78%), hsl(22, 52%, 68%));
  background-clip: content-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

footer {
  font-size: 3rem;
}

@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: 4px;
  }
}

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

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

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