@font-face {
  font-family: "MiFuente";
  src: url("../tipography/tipography.woff2") format("woff2");
}

body {
  margin: 0;
  padding: 0;
  font-family: "MiFuente", sans-serif;
  background-image: url("../img/bg.jpg");
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

h1 {
  font-size: 4vw;
  text-align: center;
  color: black;
  position: absolute;
  top: 50%;
}

.logo {
  width: 250px; /* Ancho del logo */
  height: auto;
  position: absolute;
  top: 2vh;
  left: 50%;
  transform: translateX(-50%);
}

.cuoco-logo {
  height: 280px;
  transform: translateY(46%);
}

.circulo {
  opacity: 1;
  position: absolute;
  top: 55%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  border-radius: 50%;
  width: 40vw;
  min-width: 18rem;
}

.circulo span {
  border: 1px solid hsla(0, 0%, 100%, 0.2);
  border-radius: 50%;
  z-index: 10;
}

.circulo:before,
.circulo span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.circulo:before {
  display: block;
  content: "";
  border-top: 1px solid #000;
  border-radius: 50%;
  -webkit-animation: rot 8s infinite;
  animation: rot 8s infinite;
  z-index: 20;
}

.circulo:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

@-webkit-keyframes rot {
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}

@keyframes rot {
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}

.bottom-rigth-div {
  position: absolute;
  bottom: 2vh;
  right: 3vw;
}

.bottom-left-div {
  position: absolute;
  bottom: 2vh;
  left: 3vw;
}

.logo-ig {
  height: 28px;
}

.link {
  color: black;
  text-decoration: none;
  margin-left: 2vw;
}

.link:hover {
  text-decoration: underline;
}

.link svg {
  fill: black; /* Cambia el color de relleno del SVG */
  height: 28px;
}

/* Estilos para pantallas más pequeñas, como dispositivos móviles */
@media only screen and (max-width: 600px) {
  /* Agrega estilos específicos aquí */
  .cuoco-logo {
    width: 50vw;
    transform: translateY(46%);
  }

  .bottom-rigth-div {
    position: absolute;
    bottom: 10vh;
    right: 3vw;
  }
  
  .bottom-left-div {
    position: absolute;
    bottom: 10vh;
    left: 3vw;
  }

  .logo-ig {
    height: 5vw;
  }
  
  .link {
    color: black;
    text-decoration: none;
    margin-left: 2vw;
  }

  .link svg {
    fill: black; /* Cambia el color de relleno del SVG */
    width: 30vw;
  }
}