* {
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
}

body {
  background-color: #212121;
  width: 98.7vw;
  height: 100vh;
}

/* posiciones fijas */
.cabecera {
  width: 100%;
  height: 10vh;
  background-color: #212121;
  position: fixed;
  top: 0%;
  border-style: double;
  color: #212121;
  z-index: 2;
}

.PieDePagina {
  width: 100%;
  height: 5vh;
  background-color: #212121;
  position: fixed;
  bottom: 0%;
  border-style: double;
  color: #e0d8d8;
}

/* /posiciones fijas */

/* ahora lo principal (main) */
.principal {
  width: 98%;
  margin: auto;
  margin-top: 10vh;
  height: 87vh;
  margin-bottom: 5vh;
}

.presentacion {
  width: 99%;
  min-height: 100vh;
  background-color: #cf8d37;
  border-style: double;
  color: #212121;
  font-size: 300%;
  font-family: 'Nunito Sans', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

.conociendome {
  width: 99%;
  min-height: 100vh;
  background-color: #cf8d37;
  border-style: double;
  color: #212121;
  padding-top: 5%;
  align-items: top;
  }
.tituloh2 {
  font-size: 320%;
  font-family: 'Noto Serif', serif;
  display: flex;
  justify-content: center;
}
.textoh3 {
  font-size: 100%;
  margin: 2%;
  text-align: center;
}

.pasoPorElIllia {
  width: 99%;
  min-height: 100vh;
  background-color: #cf8d37;
  justify-content: center;
  padding-top: 5%;
  align-items: top;
  border-style: double;
  color: #212121;
  font-size: 200%;
  font-family: 'Noto Serif', serif;
  text-align: center;
}

.viendoAlFuturo {
  width: 99%;
  min-height: 100vh;
  background-color: #cf8d37;
  display: flex;
  justify-content: center;
  padding-top: 5%;
  align-items: top;
  border-style: double;
  color: #212121;
  font-size: 200%;
  font-family: 'Noto Serif', serif;
}

.contactos {
  width: 99%;
  min-height: 100vh;
  background-color: #cf8d37;
  display: flex;
  justify-content: center;
  padding-top: 5%;
  align-items: top;
  border-style: double;
  color: #212121;
  font-size: 200%;
  font-family: 'Noto Serif', serif;
}

/* ahora termina lo principal (main) */

/* botones */
.botones {
  background-color: #212121;
  display: flex;
  justify-content: space-around;
  color: white;
  width: 100%;
  height: 82%;
  align-items: center;
}

nav {
  height: 10vh;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding-top: 0.7em;
}

footer {
  height: 5vh;
}

/* seccion conociendome DLC 😎 */


/* BOTONES FACHEROS */
.button {
  --color: #cf8d37;
  padding: 0.8em 1.7em;
  background-color: transparent;
  border-radius: .3em;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: .5s;
  font-weight: 400;
  font-size: 17px;
  border: 1px solid;
  font-family: inherit;
  text-transform: uppercase;
  color: var(--color);
  z-index: 1;
}

.button::before,
.button::after {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  background-color: var(--color);
  transition: 1s ease;
}

.button::before {
  top: -1em;
  left: -1em;
}

.button::after {
  left: calc(100% + 1em);
  top: calc(100% + 1em);
}

.button:hover::before,
.button:hover::after {
  height: 410px;
  width: 410px;
}

.button:hover {
  color: rgb(10, 25, 30);
}

.button:active {
  filter: brightness(.8);
}

/* Lionel Barriga animacion de */
.animate-charcter
{
   text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    #231557 0%,
    #44107a 29%,
    #ff1361 67%,
    #fff800 100%
  );
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
  font-size: 10%px;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}


/* aca está Paso Por El ILlIA 😎*/

.container {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10%, 25%));
  grid-gap: 1rem;
  padding: 1rem;
  justify-content: center;
  align-items: center;
}
img {
  background-position: top;
  background-size: cover;
  width: 100%;
  height: auto;
  box-shadow: 0 2px 10px #000;
  cursor: pointer;
  transition: all 0.2s;
  padding: 10%; 
}
img:hover {
  box-shadow: none;
  transform: scale(1.1);
}

/* acá está Viendo Al Futuro */
.viendoAlFuturo {
  display: grid;
  text-align: center;
  width: 100%;
height: 100vh;
flex-direction: row;
justify-content: center;
flex-wrap: nowrap;
}
.vafih {
  margin-top: 1rem;
  justify-content: center;
  align-items: center;
}
.vafiv{
  display: none;
  }
  .vafih{
  display:none;
  }
  @media (orientation: landscape) {
    .vafih{
    display: block;
    }
    }
  @media (orientation: portrait) {
    .vafiv{ 
    display: block;
    }
    }

    .textoconta{
      justify-content: center;
      position: absolute;
    }
    .iconos {
      margin-top: 1rem;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(10%, 250%));
      grid-gap: 1rem;
      padding: 1rem;
      justify-content: center;
      align-items: center;    
    }