@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap");
@import url("https://fonts.cdnfonts.com/css/luna-bar");
@import url('https://fonts.cdnfonts.com/css/beautiful-heart');

* {
  /*border: 1px solid red;*/
}

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

.container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0.2fr 2.6fr 0.2fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "."
    "."
    ".";
  height: 100%;
  z-index: 1000;
}  

header {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(100px);
}

.icon-tabler-brand-whatsapp {
  margin-right: 30px;
}

main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 20px;
}

.img {
  height: 100px;
  width: 100px;
  background-image: url(./310329301_625584432350069_4060992313366254723_n.jpg);
  background-position: center;
  background-size: cover;
  border-radius: 50px;
}

.title {
  font-size: 22pt;
  color: #fff;
  font-family: 'Beautiful Heart', sans-serif;
  letter-spacing: 3px;
}

ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0;
  width: 100%;
}

main ul li {
  display: grid;
  place-items: center;
  border-radius: 30px;
}

main ul li a {
  width: 240px;
  height: 55px;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border: 1px solid darkslateblue;
  border-radius: 30px;
  text-decoration: none;
  color: #fff;
  letter-spacing: 1px;
  backdrop-filter: blur(100px);
}

main ul li a:hover {
  background-color: #dbdbdb;
  color: #000;
}

footer {
  padding: 0 10px;
  display: grid;
  place-items: center;
  color: #583c87;
}

@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}

.background {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: #3e1e68;
  overflow: hidden;
}

.background span {
  width: 20vmin;
  height: 20vmin;
  border-radius: 20vmin;
  backface-visibility: hidden;
  position: absolute;
  animation: move;
  animation-duration: 45;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.background span:nth-child(0) {
  color: #e45a84;
  top: 38%;
  left: 30%;
  animation-duration: 27s;
  animation-delay: -40s;
  transform-origin: 1vw 1vh;
  box-shadow: -40vmin 0 5.948074096876761vmin currentColor;
}
.background span:nth-child(1) {
  color: #ffacac;
  top: 7%;
  left: 23%;
  animation-duration: 7s;
  animation-delay: -3s;
  transform-origin: -24vw 5vh;
  box-shadow: 40vmin 0 5.495011201183939vmin currentColor;
}
.background span:nth-child(2) {
  color: #ffacac;
  top: 23%;
  left: 80%;
  animation-duration: 20s;
  animation-delay: -14s;
  transform-origin: 8vw 19vh;
  box-shadow: 40vmin 0 5.6281306572939425vmin currentColor;
}
.background span:nth-child(3) {
  color: #ffacac;
  top: 41%;
  left: 98%;
  animation-duration: 8s;
  animation-delay: -28s;
  transform-origin: 16vw -13vh;
  box-shadow: 40vmin 0 5.743635575741782vmin currentColor;
}
.background span:nth-child(4) {
  color: #e45a84;
  top: 35%;
  left: 10%;
  animation-duration: 24s;
  animation-delay: -38s;
  transform-origin: -19vw 7vh;
  box-shadow: 40vmin 0 5.441422317334108vmin currentColor;
}
.background span:nth-child(5) {
  color: #583c87;
  top: 54%;
  left: 29%;
  animation-duration: 35s;
  animation-delay: -13s;
  transform-origin: -7vw 15vh;
  box-shadow: 40vmin 0 5.216812687399201vmin currentColor;
}
.background span:nth-child(6) {
  color: #583c87;
  top: 88%;
  left: 7%;
  animation-duration: 31s;
  animation-delay: -37s;
  transform-origin: -4vw -8vh;
  box-shadow: -40vmin 0 5.992974967444024vmin currentColor;
}
.background span:nth-child(7) {
  color: #e45a84;
  top: 43%;
  left: 76%;
  animation-duration: 29s;
  animation-delay: -9s;
  transform-origin: 25vw 10vh;
  box-shadow: 40vmin 0 5.766468231348557vmin currentColor;
}
.background span:nth-child(8) {
  color: #ffacac;
  top: 56%;
  left: 19%;
  animation-duration: 26s;
  animation-delay: -44s;
  transform-origin: 6vw 3vh;
  box-shadow: 40vmin 0 5.555003359669076vmin currentColor;
}
.background span:nth-child(9) {
  color: #ffacac;
  top: 94%;
  left: 11%;
  animation-duration: 27s;
  animation-delay: -14s;
  transform-origin: 13vw -18vh;
  box-shadow: 40vmin 0 5.416992370606506vmin currentColor;
}
.background span:nth-child(10) {
  color: #583c87;
  top: 27%;
  left: 74%;
  animation-duration: 32s;
  animation-delay: -43s;
  transform-origin: -7vw 6vh;
  box-shadow: 40vmin 0 5.633861708312432vmin currentColor;
}
.background span:nth-child(11) {
  color: #e45a84;
  top: 55%;
  left: 69%;
  animation-duration: 49s;
  animation-delay: -29s;
  transform-origin: 18vw 12vh;
  box-shadow: 40vmin 0 5.669423080862252vmin currentColor;
}
.background span:nth-child(12) {
  color: #e45a84;
  top: 86%;
  left: 19%;
  animation-duration: 21s;
  animation-delay: -30s;
  transform-origin: 15vw -12vh;
  box-shadow: 40vmin 0 5.5890869349701635vmin currentColor;
}
.background span:nth-child(13) {
  color: #e45a84;
  top: 92%;
  left: 14%;
  animation-duration: 8s;
  animation-delay: -23s;
  transform-origin: -16vw 1vh;
  box-shadow: 40vmin 0 5.819245276742143vmin currentColor;
}
.background span:nth-child(14) {
  color: #583c87;
  top: 84%;
  left: 48%;
  animation-duration: 16s;
  animation-delay: -29s;
  transform-origin: -20vw 2vh;
  box-shadow: 40vmin 0 5.834439312115009vmin currentColor;
}
.background span:nth-child(15) {
  color: #ffacac;
  top: 56%;
  left: 77%;
  animation-duration: 28s;
  animation-delay: -29s;
  transform-origin: 10vw -6vh;
  box-shadow: 40vmin 0 5.500970057030516vmin currentColor;
}
.background span:nth-child(16) {
  color: #e45a84;
  top: 38%;
  left: 35%;
  animation-duration: 28s;
  animation-delay: -4s;
  transform-origin: 8vw 20vh;
  box-shadow: -40vmin 0 5.941388563689222vmin currentColor;
}
.background span:nth-child(17) {
  color: #583c87;
  top: 23%;
  left: 62%;
  animation-duration: 38s;
  animation-delay: -36s;
  transform-origin: 16vw 16vh;
  box-shadow: 40vmin 0 5.280273001742042vmin currentColor;
}
.background span:nth-child(18) {
  color: #ffacac;
  top: 54%;
  left: 59%;
  animation-duration: 26s;
  animation-delay: -18s;
  transform-origin: 13vw -2vh;
  box-shadow: -40vmin 0 5.998427534351395vmin currentColor;
}
.background span:nth-child(19) {
  color: #ffacac;
  top: 95%;
  left: 12%;
  animation-duration: 28s;
  animation-delay: -19s;
  transform-origin: -22vw 4vh;
  box-shadow: 40vmin 0 5.962520889445226vmin currentColor;
}