@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@200;300;400;500;600&display=swap");

:root {
  --red: #db0029;
  --green: #025250;
  --glass: rgba(255, 255, 255, 0.1);
  --green2: rgba(38, 255, 9, 0.473);
}

body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  background-color: var(--red);
  background-image: url("../bg.png");
  object-fit: cover;
}

.glass {
  position: relative;
  background: inherit;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3),
    0 6px 20px rgba(0, 0, 0, 0.15);
  z-index: 1;
}

.glass:before {
  content: "";
  position: absolute;
  background: inherit;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: -20px;
  box-shadow: inset 0 0 500px rgba(255, 255, 255, 0.4);
  filter: blur(10px);
  z-index: -1;
}

.heading {
  text-align: center;
  padding: 20px;
  overflow-y: hidden;
  color: var(--green);
}
.heading h1 {
  font-weight: 500;
  overflow-y: hidden;
}
.container {
  padding: 20px;
  width: 80%;
  margin: auto;
  margin-top: 10%;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.container h3 {
  color: white;
  letter-spacing: 3px;
}

.container ul {
  /* background-color: rgba(255, 255, 255, 0.37); */
  background: linear-gradient(
    103deg,
    rgba(136, 255, 136, 0.18) 0%,
    rgba(255, 255, 255, 0.37) 30%,
    rgba(255, 255, 255, 0.07) 100%
  );
  padding: 1em 3em;
  color: white;
  font-weight: 500;
  border-radius: 6px;
}

.container li {
  margin-top: 10px;
  color: black;
}

.container p {
  line-height: 2em;
}

.container code {
  color: white;
  padding: 0.4em 0.4em;
  margin: 0;
  white-space: break-spaces;
  background-color: var(--green2);
  border-radius: 6px;
}

.container a {
  box-shadow: inset 0 0 0 0 var(--green);
  color: black;
  padding: 2px;
  margin: 0 -0.25rem;
  transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.container a:hover {
  color: white;
  padding: 2px;
  box-shadow: inset 400px 0 0 0 var(--green);
}

.tracking-in-text {
  -webkit-animation: tracking-in-text 0.8s cubic-bezier(0.215, 0.61, 0.355, 1)
    both;
  animation: tracking-in-text 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

@-webkit-keyframes tracking-in-text {
  0% {
    letter-spacing: 1em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    letter-spacing: normal;
    opacity: 1;
  }
}
@keyframes tracking-in-text {
  0% {
    letter-spacing: 1em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    letter-spacing: normal;
    opacity: 1;
  }
}