/* Basic Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@font-face {
  font-family: earwig;
  src: url("earwig factory rg.otf") format("woff2");
}

@font-face {
  font-family: spacemono;
  src: url("SpaceMono-Regular.woff");
}

@font-face {
  font-family: sourcecode;
  src: url("SourceCodePro-Regular.woff") format("woff");
}

body {
  background: linear-gradient(135deg, #141b1e, #2d3a3e);
  color: #dadada;
  font-family: "spacemono", monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
}

.full {
  text-align: center;
}

h1 {
  font-family: "earwig", sans-serif;
  color: #dadada;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  animation: fadeIn 2s ease-in-out;
  font-size: 9vw;
  display: block;
}

p {
  font-family: "spacemono", monospace;
  font-size: 3vw;
  padding: 20px 0 0 0;
}

a:hover {
  color: #ff6f61;
}

.text,
.text-2 {
  font-size: 2vw;
  margin: 0;
}

.tenor-gif-embed {
  font-family: "spacemono", monospace;
  font-size: 2vh;
  padding-top: 3px;
  margin-top: 3px;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
  h1 {
    font-size: 12vw;
  }

  p {
    font-size: 4vw;
  }

  .text,
  .text-2 {
    font-size: 3vw;
  }

  .tenor-gif-embed {
    font-size: 3vh;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 16vw;
  }

  p {
    font-size: 5vw;
  }

  .text,
  .text-2 {
    font-size: 4vw;
  }

  .tenor-gif-embed {
    font-size: 4vh;
  }
}

.dvd {
  position: absolute;
  width: 10vw; /* Adjust size of the GIF */
  height: auto; /* Maintain the aspect ratio of the GIF */
}