body {
  background-color: black;
  background-image: url("/assets/bg/bg.webp");
  color: white;
  font-family: "Roboto Mono", monospace;
  align-items: center;
}

#main-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  z-index: 99;
}

a {
  text-decoration: none;
  color: white;
  font-weight: 800;
}

.footer {
  font-size: 0.5rem;
  position: fixed;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  background-color: black;
}

.header {
  width: 100vw;
  z-index: 1;
}

#header-left {
  position: fixed;
  width: 9.5vw;
  max-width: 75px;
  bottom: 5%;
  left: 0%;
  animation: blurAnimation 1s infinite, shakeAnimation 0.1s infinite;
}

#header-right {
  position: fixed;
  width: 10vw;
  max-width: 75px;
  bottom: 5%;
  right: 0%;
  animation: blurAnimation 1s infinite, shakeAnimation 0.1s infinite;
}

#header-left:hover {
  animation: blurAnimation 1s infinite, scaleAnimation 0.25s infinite;
}

#header-right:hover {
  animation: blurAnimation 1s infinite, scaleAnimation 0.25s infinite;
}

@keyframes blurAnimation {
  0% {
    filter: blur(0px);
    text-shadow: 0 0 5px white;
  }
  25% {
    filter: blur(4px);
    text-shadow: 0 0 1px black;
  }
  50% {
    filter: blur(0px);
    text-shadow: 0 0 5px white;
  }
  75% {
    filter: blur(0px);
    text-shadow: 0 0 5px white;
  }
}

@keyframes shakeAnimation {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(1px, -1px);
  }
  50% {
    transform: translate(-1px, 1px);
  }
  75% {
    transform: translate(1px, 1px);
  }
  100% {
    transform: translate(-1px, -1px);
  }
}

@keyframes scaleAnimation {
  0% {
    transform: scale(1);
  }
  33% {
    transform: scale(1.05);
  }
  66% {
    transform: scale(0.95);
  }
}

.link-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.link-div {
  text-align: center;
  margin-top: 30px;
  margin-left: 8px;
  margin-right: 8px;
  font-size: 1rem;
}

.link-div a:hover {
  filter: blur(0px);
  font-size: 1.1rem;
}

.link-url {
  filter: blur(1px);
}

.link-url-active {
  filter: blur(0px);
  font-size: 1.1rem;
}

.content-container {
  margin-top: 30px;
  width: 80vw;
  align-items: center;
  text-align: center;
}

.about-container {
  margin-top: 30px;
  font-size: 0.9rem;
  line-height: 1.8rem;
  max-width: 80vw;
  width: 500px;
  align-items: center;
  text-align: center;
}

.ascii-container {
  align-items: center;
  text-align: center;
  overflow: hidden;
  position: fixed;
  top: 20%;
}

#output-home {
  font-size: 0.7rem;
  align-items: center;
  background: transparent;
  overflow: hidden;
}

#output-port {
  font-size: 0.8rem;
  align-items: center;
  background: transparent;
  overflow: hidden;
}

#blog-container {
  margin-top: 30px;
  font-size: 0.9rem;
  line-height: 1.8rem;
  align-items: center;
  max-width: 80vw;
  width: 500px;
}

.blog-title {
  filter: blur(1px);
  margin-bottom: 30px;
}

.blog-title:hover {
  filter: blur(0px);}

.blog-content {
  margin-top: 10px;
}

.divider {
  border: 1px solid #636363;
  margin-top: 30px;
  margin-bottom: 30px;
}

.topic-btn {
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  font-size: 1rem;
  padding: 5px;
  background-color: transparent;
  border: none;
  color: white;
  margin-left: 10px;
  margin-right: 10px;
  filter: blur(1px);
}

.topic-btn:hover {
  filter: blur(0px);
  font-size: 1.1rem;
}

.topic-btn-active {
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 5px;
  background-color: transparent;
  border: none;
  color: white;
  margin-left: 10px;
  margin-right: 10px;
}

.topics-container {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 80vw;
  max-width: 500px;
}

.copy-btn {
  background: none;
  border: #636363 solid 1px;
  color: white;
  font-size: 0.8rem;
  font-family: "Roboto Mono", monospace;
  text-align: center;
  justify-content: center;
  padding-right: 5px;
  padding-left: 5px;
  height: 30px;
  filter: blur(1px);
}

.copy-btn:hover {
  background-color: white;
  border: #636363 solid 1px;
  color: black;
  filter: blur(0px);
}

#copy-btn-container {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.copy-alert {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  color: black;
  padding: 10px 16px;
  border-radius: 3px;
  font-size: 1rem;
  z-index: 100;
  opacity: 0;
  filter: blur(1px);
}

.copy-alert.show {
  display: block;
  opacity: 0.8;
}

.title {
  font-weight: 700;
  font-size: 1rem;
}

#x-tbd {
  width: 9.5vw;
  max-width: 75px;
  animation: blurAnimation 1s infinite, shakeAnimation 0.1s infinite;
}

#project-tbd {
  align-items: center;
  font-family: 'Courier New', monospace;
  font-size: 2rem;
  text-align: center;
  overflow: hidden;
  position: fixed;
  top: 30%;
  animation: blurAnimation 1s infinite, shakeAnimation 0.1s infinite;
}

#project-tbd:hover {
    animation: blurAnimation 1s infinite, scaleAnimation 0.5s infinite;
}