@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap');
/* General */
*{
    color:rgba(58,212,248,255);
    font-family:Ubuntu;
}
h1{
    color:rgb(244, 59, 134)
}
body {
    height: 1000px;
    background-image: url("https://images3.alphacoders.com/239/thumb-1920-239007.jpg");
    background-size: auto;
    background-repeat:repeat-x;
    margin-left: 28px;
    margin-top: 70px;
  }
/* Parte de arriba */
header{
    width: 100%;
    left: 0%;
    top: 0%;
    height: 30px;
    position: fixed;
    background: rgb(255, 228, 89);
    color: rgba(23,23,23,255); 
    text-align: center;
    font-size: 20px;
    font-family: Ubuntu;
    z-index: 90;
}

/* From uiverse.io by @namecho */
/* Botones */
button,
button::after {
 padding: 16px 20px;
 font-size: 18px;
 background: linear-gradient(45deg, transparent 5%, rgb(244, 59, 134) 5%);
 border: 0;
 color: #fff;
 letter-spacing: 3px;
 line-height: 1;
 box-shadow: 4px 0px 0px rgb(255, 228, 89);
 outline: transparent;
 position: relative;
}

button::after {
 --slice-0: inset(50% 50% 50% 50%);
 --slice-1: inset(80% -6px 0 0);
 --slice-2: inset(50% -6px 30% 0);
 --slice-3: inset(10% -6px 85% 0);
 --slice-4: inset(40% -6px 43% 0);
 --slice-5: inset(80% -6px 5% 0);
 content: "HOVER ME";
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: linear-gradient(45deg, transparent 3%, rgb(255, 228, 89) 3%, rgb(255, 228, 89) 5%, rgb(244, 59, 134) 5%);
 text-shadow: -3px -3px 0px #00e6f6, 3px 3px 0px rgb(255, 228, 89);
 clip-path: var(--slice-0);
}

button:hover::after {
 animation: 1s glitch;
 animation-timing-function: steps(2, end);
}

@keyframes glitch {
 0% {
  clip-path: var(--slice-1);
  transform: translate(-20px, -10px);
 }

 10% {
  clip-path: var(--slice-3);
  transform: translate(10px, 10px);
 }

 20% {
  clip-path: var(--slice-1);
  transform: translate(-10px, 10px);
 }

 30% {
  clip-path: var(--slice-3);
  transform: translate(0px, 5px);
 }

 40% {
  clip-path: var(--slice-2);
  transform: translate(-5px, 0px);
 }

 50% {
  clip-path: var(--slice-3);
  transform: translate(5px, 0px);
 }

 60% {
  clip-path: var(--slice-4);
  transform: translate(5px, 10px);
 }

 70% {
  clip-path: var(--slice-2);
  transform: translate(-10px, 10px);
 }

 80% {
  clip-path: var(--slice-5);
  transform: translate(20px, -10px);
 }

 90% {
  clip-path: var(--slice-1);
  transform: translate(-10px, 0px);
 }

 100% {
  clip-path: var(--slice-1);
  transform: translate(0);
 }
}
.mensaje{
    font-size: 5px;
    margin: auto;
    display: flex;
    flex-direction: row;
    align-items:flex-start;
    align-self: center;
    justify-content:space-arounf;
    gap: 5%;
    margin-top: 2%;
    display: flex;
    text-align: left;
}
.botones{ 
    
    margin-top: 3%;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-evenly;

}
/* Parte del medio */
.presentacion{
    width: 57vw;
    margin: auto;
    display: flex;
    flex-direction: row;
    align-items:flex-start;
    align-self: center;
    justify-content:space-arounf;
    gap: 5%;
    margin-top: 2%;

   }
   

.titulo{
    align-self: center;
    font-size: 17px;

}
        a:link {
            text-decoration: none;
        }

        a:visited {
            text-decoration: none;
        }

        a:hover {
            text-decoration: none;
        }

        a:active {
            text-decoration: none;
        }

.texto{    
    display: flex;
    text-align: left;

}
   .foto {
    border-width: 3px;
    border-color: rgba(58,212,248,255);
    border-style: groove;
    width: 30vw;
    display: flex;
    margin: auto;
    margin-top: 2%;
    float: left;

   }