@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: musicFont;
  src: url(assets/fonts/new-rocker.regular.ttf);
}

nav {
  background-image: linear-gradient(hsl(264, 100%, 3%), hsl(243, 86%, 8%));
}

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

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

h1 {
  font-size: 10rem;
  background: -webkit-linear-gradient(hsl(209, 58%, 31%), hsl(197, 34%, 65%));
  background-clip: content-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

body {
  text-align: center;
  background-image: linear-gradient(hsl(236, 78%, 13%), hsl(261, 88%, 3%));
  font-family: musicFont;
}

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

.tech-item {
  margin: 2rem;
}

.skill {
  color: gold;
  font-size: 6rem;
}

.portfolio-name {
  font-size: 6rem;
  background: -webkit-linear-gradient(hsl(204, 24%, 56%), hsl(198, 32%, 69%));
  background-clip: content-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.portfolio-description {
  font-size: 4rem;
  background: -webkit-linear-gradient(hsl(187, 36%, 77%), hsl(178, 28%, 83%));
  background-clip: content-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.portfolio-extra-description {
  font-size: 3rem;
  background: -webkit-linear-gradient(hsl(187, 36%, 77%), hsl(178, 28%, 83%));
  background-clip: content-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.portfolio-genre-description {
  font-size: 5rem;
  background: -webkit-linear-gradient(hsl(187, 36%, 77%), hsl(178, 28%, 83%));
  background-clip: content-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.portfolio-button {
  background: none;
  border: none;
}

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

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

video {
  width: 120rem;
  height: auto;
}

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