@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ysabeau+SC:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@1,200&display=swap');



/*codigo por defecto*/
*{
    margin: 0; 
    padding: 0;
    box-sizing: border-box; 
   
}


body{
  background-color: #ffe863ec;
}

div{
  background-color: #FAFB85;
}
/*se puede poner un colo de fondo general? e ir poniendo más olores similares en los otros contenedores? */
/*contenedor con los botones*/

.contenedor1{
  background-color:  #ffe863ec;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
    
  padding: 3vh; 

  
}

button {
  --border-radius: 15px;
  --border-width: 4px;
  appearance: none;
  position: relative;
  padding: 1em 2em;
  border: 0;
  background-color:  #ffe863ec;
  font-family: "Roboto", Arial, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color:BLACK;
  z-index: 2;
 }
 
 button::after {
  --m-i: linear-gradient(#000, #000);
  --m-o: content-box, padding-box;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: var(--border-width);
  border-radius: var(--border-radius);
  background-image: conic-gradient(
     #488cfb,
     #29dbbc,
     #ddf505,
     #ff9f0e,
     #e440bb,
     #655adc,
     #488cfb
   );
  -webkit-mask-image: var(--m-i), var(--m-i);
  mask-image: var(--m-i), var(--m-i);
  -webkit-mask-origin: var(--m-o);
  mask-origin: var(--m-o);
  mask-clip: var(--m-o); 
  -webkit-mask-clip: var(--m-o);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  filter: hue-rotate(0);
  animation: rotate-hue linear 500ms infinite;
  animation-play-state: paused;
 }
 
 button:hover::after {
  animation-play-state: running;
 }
 
 @keyframes rotate-hue {
  to {
   filter: hue-rotate(1turn);
  }
 }
 
 button,
 button::after {
  box-sizing: border-box;
 }
 
 button:active {
  border-width: 5px;
 }



/*contenedor con mi nombre y apellido*/
.contenedor2{
  width:100%;
  height: 20%;
  
  display:flex;
  flex-direction: column;
     justify-content: center;
    align-items: center;
  
  font-family: 'Kanit', sans-serif;
  font-size: 6vmin;
  color: rgb(133, 39, 39);
  text-align: justify;
  

}
/* contenedor que tiene al parrafo y a la imagen*/
.contenedor3 {
  display: flex; 
  flex-direction: row;

  background-color: #ffe863ec;
  
   

   width: 80%;
   margin: auto;


}

.parrafo{
  font-family: 'Ysabeau SC', sans-serif;
  font-size: 4vmin;
  color: black;
  line-height: 25px ;
  text-align: justify;
  width: 50%;
  margin: 5vmin; 
 
  
  

}


.imagen {

  width: 50%;
  margin: 3vmin;

}

.imagen img{
  width: 98%;
  height: auto;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 1vh;
  border: 5px dotted rgb(133, 39, 39);
  

}