body {
  /* background-color: #14e0ee; */
  background-image: url("/assets/imgs/smoky-sky.jpg");
  /* scroll-behavior: smooth; */
}

.heading {
  max-width: 100%;
}

h1 {
  font-size: clamp(1em, 8vw, 5.5em);
  width: 100%;
}

.abstr {
  position: absolute;
  left: 20px;
  top: 200px;
  height: 400px;
  width: 400px;
  background-image: url(/assets/imgs/abstr.gif);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  box-shadow: 0 0 25px #0000004a;
}

.blob {
  position: absolute;
  left: 20px;
  bottom: 20px;
  height: 300px;
  width: 300px;
  background-image: linear-gradient(#0b150b20, #a95aee79),
    url(/assets/imgs/blob-test.gif);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  animation: growingSpin;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  border-radius: 50%;
  box-shadow: 0 0 25px #000000b0;
}

.blob-2 {
  position: absolute;
  left: 20px;
  bottom: 20px;
  height: 300px;
  width: 300px;
  background-image: url(/assets/imgs/underline-spaceship.gif);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  animation: growingSpin;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  border-radius: 50%;
  box-shadow: 0 0 25px #000000b0;
  z-index: -2;
}

.blob-3 {
  position: absolute;
  left: 20px;
  bottom: 20px;
  height: 300px;
  width: 300px;
  background-image: url(/assets/imgs/salt-water.gif);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  animation: growingSpin;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  z-index: -2;
}

.balloon {
  position: absolute;
  right: 20px;
  top: 20px;
  height: 200px;
  width: 200px;
  background-image: url(/assets/imgs/hot-air-ballloon.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  animation: growingSpin;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes growingSpin {
  0% {
    transform: scale(0.8);
  }
  10% {
    transform: scale(0.9);
  }
  20% {
    transform: scale(0.8);
  }
  30% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.9);
  }
  70% {
    transform: scale(1);
  }
  80% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(0.8);
    transform: rotate(360deg);
  }
}

.container {
  background-image: url("/assets/imgs/cows.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 0;
}

.container::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: hsla(0, 0%, 0%, 0.73);
  z-index: -1;
}

#nav ul li a {
  color: white;
  font-size: 24px;
  cursor: pointer;
}

#nav ul li a:hover {
  text-decoration: underline;
}

.cards-columns {
  display: flex;
  width: 100%;
  /* background-color: hwb(0 0% 100% / 0.8); */
  align-items: flex-start;
  justify-content: space-between;
}

.portfolio-columns {
  width: 100%;
  padding: 0;
  margin: 0;
}

.cards-title {
  height: 60px;
  margin: 10px 0;
  padding: 0;
  width: calc(100% - 20px);
  background-color: hsl(0, 0%, 5%);
  border-radius: 10px;
  box-shadow: 0 0 8px #44bbbb;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}

.cards-title h3 {
  background-image: linear-gradient(
    300deg,
    yellow,
    #27ff27,
    cyan,
    #4486ef,
    #ea27dd,
    #2ffe47,
    #ffff00
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(var(--s-14), 5vw, var(--s-34));
}

.hire-me-text {
  font-size: clamp(12px, 3.5vw, 20px);
  margin-left: 24px;
  color: var(--f-c-base-lighter);
  cursor: pointer;
  text-decoration: underline;
  transition: 0.5s;
}

.hire-me-text:hover {
  text-decoration: none;
  color: #ff00ffcc;
}

.cards-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
}

.profile-cards-container {
  width: calc(80% - 20px);
  height: 250px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 12px;
  padding: 0;
  border-radius: 6px;
  /* background-color: hsl(0, 0%, 42%); */
  /* background-color: hsla(0, 7%, 83%, 0.304); */
  /* border-radius: 17px; */
  box-shadow: 0 0 5px #4e4e4e;
  transition: 0.5s;
  position: relative;
  overflow: hidden;
}

.game-card::before {
  position: absolute;
  content: "";
  width: 800px;
  height: 800px;
  background: conic-gradient(
    transparent,
    transparent,
    transparent,
    transparent,
    #2ffe476a,
    #ffff006a
  );
  animation: cardBorder 8s linear infinite;
  animation-delay: -4s;
}

.game-card::after {
  position: absolute;
  content: "";
  width: 800px;
  height: 800px;
  background: conic-gradient(
    transparent,
    transparent,
    transparent,
    transparent,
    #4486ef6a,
    #ea27dd6a
  );
  animation: cardBorder 8s linear infinite;
}

@keyframes cardBorder {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.profile-cards-container:hover {
  background-color: hsla(0, 0%, 40%, 0.721);
  cursor: pointer;
  box-shadow: 2px 2px 12px hsla(0, 0%, 65%, 0.901);
}

.profile-cards-container:hover .portfolio-card-title {
  text-decoration: underline;
}

.profile-cards-container:active {
  background-color: hsla(40, 83%, 49%, 0.753);
}

.portfolio-card {
  width: calc(100% - 4px);
  /* height: 180px; */
  height: 246px;
  margin: 2px auto;
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: hsl(0, 0%, 4%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.portfolio-card-image img {
  height: 180px;
  width: 100%;
  max-width: 285px;
  object-fit: cover;
  object-position: center;
  vertical-align: middle;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: 0 0 8px #111111e8;
  border-radius: 8px;
}

.portfolio-card-title {
  font-size: clamp(14px, var(--s-20), 25px);
  text-align: center;
  /* color: hsla(0, 0%, 93%, 0.977); */
  color: var(--f-c-base-lighter);
  border-radius: 5px;
}

.list-card {
  display: flex;
  align-items: flex-start;
  color: var(--f-c-base-lighter);
  width: 100%;
  justify-content: space-evenly;
  background-color: rgba(18, 18, 18, 0.91);
  padding: var(--s-15);
  border-radius: var(--s-15);
  margin: 6px;
  box-shadow: -3px 3px 8px #ff38eb53;
  font-size: 20px;
  height: 120%;
  margin-top: 85px;
}

/* About Page */

.about {
  background-image: url("/assets/imgs/cows.jpg");
}

.new-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

#profile-pic img {
  width: clamp(20em, 60vw, 42em);
  border-radius: 50%;
  border: solid rgba(180, 180, 180, 0.684);
  box-shadow: 0 0 80px rgba(190, 190, 190, 0.805);
}

.bottom-row {
  margin-top: var(--s-125);
  background-color: cyan;
  width: 100%;
  padding: 24px;
  font-size: clamp(14px, 6.5vw, 16px);
  height: 100%;
}

nav.social-nav ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 24px;
  width: 44%;
  margin: auto;
}

nav.social-nav ul li a {
  color: var(--f-c-base);
}

.smoke-container {
  height: 0px;
  width: 100%;
  margin-top: 200px;
  position: fixed;
  bottom: 0;
  left: 0;
  border: solid rgb(40, 11, 11);
}

.smoke {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  z-index: 1;
  padding: 0 15px;
  width: 100%;
}

.smoke span {
  position: relative;
  bottom: 50px;
  display: block;
  margin: 0px 2px 50px;
  min-width: 6px;
  height: 200px;
  background-color: #fff;
  border-radius: 50%;
  animation-name: steam;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: calc(var(--i) * -0.5s);
  opacity: 0;
  filter: blur(10px);
}

.smoke-2 span {
  background-color: hotpink;
  filter: blur(14px);
  height: 220px;
}

.smoke-3 span {
  background-color: lime;
  filter: blur(14px);
  height: 220px;
}

@keyframes steam {
  0% {
    bottom: 50px;
    transform: scaleX(1);
    opacity: 0;
  }

  50% {
    bottom: 150px;
    transform: scaleX(5);
    opacity: 1;
  }

  95% {
    opacity: 0;
  }

  100% {
    bottom: 300px;
    transform: scaleX(10);
  }
}

/* Audio Page */

.fire-topper {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  height: 1000px;
  width: 100vw;
  z-index: 2;
  background-image: url(/assets/imgs/fire-2.gif);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.seventy-text {
  z-index: 10;
}

.audio-pic-box {
  padding: 15px;
  border-radius: 25px;
  background-color: #294c702e;
  box-shadow: 0 0 15px #4843488e;
  width: 450px;
  max-width: 100%;
}

#audio-pic {
  width: 100%;
}

.audio-cont {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 50px 60px;
  margin-top: 50px;
  border: 0.3px solid var(--white);
  border-radius: 15px;
  box-shadow: 0 0 950px var(--c-21);
  /* background-color: #0000004a; */
  background-color: var(--c-20);
  background-image: url("/assets/imgs/seventy-code.jpg");
  background-position: cover;
  background-repeat: no-repeat;
  background-size: cover;
  max-width: 100%;
}

.audio-cont-2 {
  background-image: linear-gradient(
      to bottom right,
      #010c22,
      rgba(42, 170, 255, 0.637)
    ),
    url("/assets/imgs/smoky-sky.jpg");
  padding: 30px 40px;
}

audio {
  margin: 10px;
}

#seventy {
  width: 300px;
  background-color: #e00b0bea;
  border-radius: 5px;
}