@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: editingFont;
  src: url(assets/fonts/Blaka-Regular.ttf);
}

nav {
  background-image: linear-gradient(hsl(41, 94%, 6%), hsl(48, 100%, 2%));
}

.nav-link {
  font-size: 5rem;
  font-family: editingFont;
}

.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 {
  padding: 0rem 6rem;
  text-align: center;
}

.navbar-brand {
  position: absolute;
  font-size: 6rem;
  font-family: editingFont;
}

h1 {
  font-size: 15rem;
  background: -webkit-linear-gradient(hsl(49, 42%, 64%), hsl(36, 36%, 57%));
  background-clip: content-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 5rem 0rem 2rem 0rem;
}

body {
  text-align: center;
  font-family: techFont;
  background-image: linear-gradient(hsl(61, 69%, 14%), hsl(32, 100%, 3%));
  font-family: editingFont;
}

.separator {
  border: 0.2rem solid hsl(63, 36%, 88%);
  place-content: center;
}

.tech-item {
  margin: 2rem;
}

.portfolio-name {
  font-size: 10rem;
  background: -webkit-linear-gradient(hsl(54, 51%, 81%), hsl(34, 31%, 67%));
  background-clip: content-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
  line-height: normal;
  justify-content: center;
}

.portfolio-description {
  font-size: 6rem;
  background: -webkit-linear-gradient(hsl(60, 46%, 88%), hsl(69, 33%, 80%));
  background-clip: content-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.portfolio-img {
  width: 40rem;
  height: 40rem;
}

.certification-img {
  width: 10rem;
  height: 10rem;
  margin: 1rem;
}

footer {
  font-size: 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: 5px;
  }
}

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