/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


body {
  min-height: 100vh;
  margin: 0;
  background-image: url('images/f8.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

header, nav, main, footer , article {

  padding: 10px;
 
}

 nav, main, footer , article {
  
  background-color: white;
    
}


.box {
  max-width: 1000px;
  margin: 100px auto;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 250px auto;
  
  column-gap: 20px;
}


header, nav, main, footer, article, column {

  padding: 10px ;
  background-color: white;
  opacity: 0.6;
}

header {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
background-image: url('images/headup.jpg');
}

nav {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  height: max-content;
}


main {
  grid-row: 2 / 4;
  grid-column: 2 / 3;
  height: max-content;
}

footer {
  grid-row: 4 / 5;
  grid-column: 1 / 3;
}
  mefr {
  width: 100%;
  width: 1000px;      
  height: 700px;
   grid-row: 5 / 6;
  grid-column: 2/ 3;
  border: none;
}

article {
    grid-row: 6/7;
    grid-column: 1/3;
}


blue {
    grid-row: 100/10;
    grid-column: 2/3;
    background-image: url('images/headup.jpg');
}

.mycontainer{max-width: 1000px;
  margin: 100px auto;
  display:inline-block;
}

    
    .hello {
object-fit: cover;
-webkit-mask-image: url(https://i.postimg.cc/3RYpcLqS/14.png);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
animation-duration: 3s;
animation-iteration-count: infinite; 
  position: static;
  bottom: 250px;
  right: 1225px;
  width: 200px;
  height: 200px;
   border: 1px solid white;
}
   

.about {
  object-fit: cover;
  position: absolute;
  top:  150px;
  right: 1210px;
  width: 250px;
  height: 300px;
  border: none;
}

   
  
   .good {
  object-fit: fill;
  position: absolute;
  bottom:  -120px;
  right: 500px;
  width: 400px;
  height: 400px;
  border: none;
  z-index: 10;  
}



  .pfp {
  object-fit: fill;
  -webkit-mask-image: url(https://i.postimg.cc/3RYpcLqS/14.png);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
  position: absolute;
  top:  80px;
  right: 1240px;
  width: 220px;
  height: 220px;
  border: 100px white;
  z-index: 10;  
}

 .can {
     object-fit: fill;
     position:absolute;
     top: 110px;
     right: 370px;
     width: 200px;
     height: 200px;
     border: none;
     z-index:11;
     transform: rotate(30deg);

 }
 
 
   
   
   .fih {
  object-fit: fill;
  position: absolute;
  top:  150px;
  right: 1050px;
  width: 250px;
  height: 250px;
  border: 100px white;
  z-index: 12;  
  transform: rotate(0deg);
  }
   
   
   
   .red {
  object-fit: fill;
  position: absolute;
 top:  100px;
  right: 1320px;
  width: 200px;
  height: 220px;
  border: 100px white;
  z-index: 12;}  
  
  
 
  
  
  


.bottom-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 20px auto;
  max-width: 1000px;
  background: none; 
  border: none;
  padding: 0; 
  cursor: pointer; 
  outline: inherit;
}

/* botones en columna */
.buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.buttons button {
  background: none;
  border: none;
  cursor: pointer;
}

.buttons img {
  width: 80px;
}









.button {
  background: none;    
  border: none;        
  padding: 0;           
  cursor: pointer;     
  outline: inherit;
  position: absolute;
  bottom: 50px;
  right: 450px;

}


.button2 {
  background: none;   
  border: none;        
  padding: 0;          
  cursor: pointer;     
  outline: inherit;
  position: absolute;
  bottom: -40px;
  right: 450px;
}

.button3{
  background: none;     /* Quita el fondo gris */
  border: none;         /* Quita el borde del botón */
  padding: 0;           /* Quita el espacio interno */
  cursor: pointer;      /* Muestra la mano al pasar el mouse */
  outline: inherit;
  position: absolute;
  bottom: -120px;
  right: 450px;

}

.button4{
  background: none;    
  border: none;        
  padding: 0;           
  cursor: pointer;  
  outline: inherit;
  position: absolute;
 bottom: -200px;
  right: 450px;

}



.disk {
  object-fit: cover;
  -webkit-mask-image: url(https://i.postimg.cc/3RYpcLqS/14.png);
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  width: 200px;
  height: 200px;
  float: left;
  border: 1px solid white;
  animation: spin 3s linear infinite;
  opacity: 1;

  display: block;
  margin: 20px auto; 
 
        animation-name: spin;
        animation-timing-function: linear;
    }
    @keyframes spin {
        from { transform: rotate(0deg) }
        to { transform: rotate(360deg) }
    }



 .four {
     object-fit: fill;
     position:absolute;

     width: 400px;
     height: 300px;
     border: none;
     z-index:11; 
     top: -10px;
     right: 370px;
     
 }