body {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    color:azure;
    background-color: rgb(180, 173, 169);
    width: 100vw;    
}
 
* {
    box-sizing: border-box;
    margin: 0em;
    padding: 0em;
    position: relative;
    font-family: Montserrat, Helvetica, sans-serif;
    font-weight: 200;
    color: rgb(255, 255, 255);
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    text-align: center;
    animation: fade 2s;
}

.contenedor {
display: flex;
flex-direction: column;
position: relative;
align-items: center;
align-content: center;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: rgba(216, 204, 204, 0);
}

.titulo {
display: flex;
flex-direction: column;
position: relative;  
font-family: 'DM Serif Display', Times, serif;
font-weight: 500;
font-size: 5em;
height: .8em;
border: solid 0px chartreuse;
text-shadow: 1px 1px .19em rgba(0, 0, 0, 0.205);
}

.subtitulo {
font-family: 'Montserrat', Times, serif;
font-weight: 400;
font-size: 1em;
margin-top: 0.5em;
text-shadow: 1px 1px .19em rgba(0, 0, 0, 0.3);
}

.bckg {
display: flex;
position: absolute;
overflow: hidden;
height: 100%;
width: auto;

}
  
.imbck{
height: 100vh;
width: 100vw;
object-fit: cover;
opacity: 100%;
}   
   
.links {
  position: absolute;
  display: flex;
  flex-direction: row;
  margin-top: 18em;
  gap: 1em; 
} 
.contacto{
  position: absolute;
  margin-top: 13.5em;
  margin-left: -11em;
  gap: 1em;
  width: 2em;
  height: auto;
  filter: invert(1);
  opacity: 60%;
  animation: temblor 0.3s infinite alternate ease-in-out;
}

@keyframes temblor {
  0% { transform: rotate(-3deg); }
  100% { transform: rotate(3deg); }
}

.icc{
  width: 2.2em;
  height: auto;
  filter: invert(1);
  opacity: 60%;
  transition: transform 0.2s ease-in-out;
}

.icc:hover {
  transform: scale(1.1);
  opacity: 70%;
}

.hor {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: rgba(0, 0, 255, 0);
}


.load-wrapp {
    position: relative;
    margin-top: 2.7em;
    width: 50%;
    height: auto;
    align-items: center;
    background-color: rgba(255, 255, 255, 0);
    border: solid 1px rgba(255, 255, 255, .5);
    border-radius: 8px;
    box-shadow: .15em .15em .5em rgba(200, 178, 178, 0.16);
    scale: .6;
  }

  .square-holder {
    position: relative;
    display: flex;
  }

  .square {
    width: 1em;
    height: 1em;
    border-radius: 6px;
    background-color: rgb(255, 255, 255);
    margin: .1em;
  }

  .load7 .square {
    animation: loadingG 9s ease-in-out infinite;
  }

  @keyframes loadingG {
    0% {
      transform: translate(-24vw, 0) rotate(0deg);
    }
    50% {
      transform: translate(24vw, 0) rotate(2000deg);
    }
    100% {
      transform: translate(-24vw, 0) rotate(0deg);
    }
  }