@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
.web-sec {
  background-color: #00000010;
  font-family: "Poppins", sans-serif;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  /* min-height: 100vh; */
  height: 500px;
}

.web-content h1 {
  color: #000000;
}

/* a {
  color: #ff0052;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.83, 0, 0.17, 1);
}
a:hover {
  color: #250001;
} */

main.web-container {
  position: relative;
}
main.web-container .square, main.web-container .round-web {
  position: absolute;
  width: 200px;
  height: 200px;
}
main.web-container .square {
  bottom: 0%;
  border-radius: 25px;
  background-color: #F72585;
  background-image: linear-gradient(90deg, #F72585 0%, #141F72 100%);
  -webkit-animation: moveAnimation 6s cubic-bezier(0.83, 0, 0.17, 1) infinite alternate;
          animation: moveAnimation 6s cubic-bezier(0.83, 0, 0.17, 1) infinite alternate;
}
main.web-container .round-web {
  top: 0%;
  transform: translateY(-50%);
  border-radius: 5000px;
  background-color: #141F72;
  background-image: linear-gradient(147deg, #F72585 0%, #141F72 74%);
  -webkit-animation: moveAnimation2 6s cubic-bezier(0.83, 0, 0.17, 1) infinite alternate;
          animation: moveAnimation2 6s cubic-bezier(0.83, 0, 0.17, 1) infinite alternate;
}
main.web-container section.glass-container {
  background: repeating-linear-gradient(27deg, rgba(214, 208, 208, 0.623) 0px, rgba(214, 208, 208, 0.623) 125px, rgba(214, 208, 208, 0.623) 195px);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(20px) brightness(1.2);
          backdrop-filter: blur(20px) brightness(1.2);
  width: 100%;
  max-width: 950px;
  height: 100vh;
  max-height: 275px;
  padding: 24px;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1), 0 1px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
}
main.web-container section.glass-container::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border-radius: 8px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  opacity: 0.5;
}
main.web-container section.glass-container .web-content {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
main.web-container section.glass-container .web-content h1.hero-title {
  /* font-family: "Pacifico", serif; */
  font-size: 2.5rem;
  font-weight: 500;
  text-align: center;
  margin: 1rem;
}
main.web-container section.glass-container .web-content p.hero-text {
  font-size: 1.2em;
  font-weight: 500;
}
main.web-container section.glass-container .web-content p.credit {
  color: #546E7A;
}

@-webkit-keyframes moveAnimation {
  0% {
    bottom: 10%;
    right: 75%;
    transform: rotate(45deg);
  }
  100% {
    bottom: -5%;
    right: -10%;
    transform: rotate(127deg);
  }
}

@keyframes moveAnimation {
  0% {
    bottom: 10%;
    right: 75%;
    transform: rotate(45deg);
  }
  100% {
    bottom: -5%;
    right: -10%;
    transform: rotate(127deg);
  }
}
@-webkit-keyframes moveAnimation2 {
  0% {
    top: 25%;
    left: 75%;
    transform: rotate(127deg);
  }
  100% {
    top: -15%;
    left: -15%;
    transform: rotate(45deg);
  }
}
@keyframes moveAnimation2 {
  0% {
    top: 25%;
    left: 75%;
    transform: rotate(127deg);
  }
  100% {
    top: -15%;
    left: -15%;
    transform: rotate(45deg);
  }
}