body {     /* is used for determined form  */
    margin: 0; /* they have no margin of the body */
    padding: 0; /* they have no padding */
    background-color: rgb(170, 173, 173); /*background color */
    max-width: fit-content;  /* is used for */
}

/* HEADER */
header {  /* the label is called, not to class */
    background-color:rgb(196, 132, 132); /*background color */
    color: black; /* letter color */
    display: flex;  /* the content is accommodated to the right (horizontal) */
    justify-content: space-between; /* space between them*/
    align-items: center; /* center vertically */
    padding: 10px 20px;   
}

nav ul {
    display: flex; /* the content is accommodated to the right (horizontal) */
    list-style: none; /* is deactivated ("___") */
}

nav ul li {
    margin: 0 15px; /* a margin is assigned */
    background-color: antiquewhite; /*background color */

}
nav ul li a {
    color: green; /* letter color */
    text-decoration: none; /* disable decoration */
    padding: 20px;  /* The space was changed between the element and the edge */
}

.h1:hover {  /* It is used to give a simple animation */
    background-color: rgb(128, 128, 128); /*background color */
    padding: 10px;   /* The space was changed between the element and the edge */

}


h2:hover {  /* It is used to give a simple animation */
    background-color: gray; /*background color */
    padding: 10px;  /* The space was changed between the element and the edge */

}


a:hover {  /* It is used to give a simple animation */
    background-color: red; /*background color */
    color: white; /* letter color */
}


/* BODY */

.contener {  /* the class is called */
    text-align: center; /* center vertically */
    justify-content: center;  /* space between them*/
    font-family: sans-serif; /* a font is assigned (diferent letter) */

} 

.contener:hover {  /* It is used to give a simple animation */
    
    background-color: rgb(138, 4, 4); /*background color */
    padding: 10px;

}

.img {  /* the class is called */
       width: 200px; /* width is modified the image*/
       height: auto; /* height is modified the image */
}

.nav {  /* the class is called */
    background-color:  beige; /*background color */
    display: flex; /* the content is accommodated to the right */
    border: none; /* the boarding is cancelled */
    justify-content: center; /* center the content*/
    justify-content: space-between; /* space between them*/
}


h2 {
    text-align: center; /* the text in the center */
    font-size: 35px; /* font size in pixels(letter pixels) */
}

.grid-container {
    display: flex; /* the content is accommodated to the right (horizontal) */
    justify-content: space-between; /* space between elements */
    gap: 20px; /* space between contents */
}

.grid-container:hover {
     background-color: rgb(4, 107, 138); /*background color */
     padding: 10px;  /* The space was changed between the element and the edge */
}

.grid-item {
    background-color: aquamarine; /*background color */
    padding: 20px;  /* The space was changed between the element and the edge */
    border: 1px solid #ccc; /* a border is agg*/
    text-align: center;
    flex: 1;
    animation-name: change-color; /*is used with @keyframes for change the color  */
    animation-duration: 3s; /*  the duration is added */ 
    animation-timing-function: lineal; /* the function of animation is linear  */
    font-size: 35px;
}
  
@keyframes change-color { /* is used for make animations the differents colors, make movements the imagen and other things  */
    0% {
        background-color: #333;
    }
    50%{
        background-color: green;
    }
    100% {
        background-color: azure;
    }
}

p {
    font-size: 20px; /* different font size */ 
}

h3 {
    font-size: 25px; /* different font size */ 
}

.grid-container2 {
    display: grid;  /* is defined as grid */
    grid-template-columns: repeat(3, 1fr); /* 3 columns are created and of 3 sizes provided */
    grid-template-rows: repeat(3, 1fr); /* 3 rows are created and of 3 sizes provided */ 
    background-color: cadetblue;
    gap: 20px;
    border: 1px solid #0c0b0b;
}

.grid-container2:hover {
     background-color: rgb(125, 138, 4);
     padding: 10px;
}

/* PROJECTS */

.clase1 {
    font-size: 20px;
    color: black;
    background-color: white;
}

.mi-imagen {
    width: 20%;
    height: auto;
    display: block;
    text-align: center;
}

.mi-imagen2 {
    
    margin: 1rem 0;
    width: 20%;
    height: auto;
    display: block; /* is defined in blocks*/
    text-align: center;
}

.div4 {
    display: flex; /* the content is accommodated to the right (horizontal) */
    gap: 40px;
    justify-content: center;
    
}

.foro {
    width: 150px;
    height: auto;
}

.footer {
    font-size: 30px;
    text-align: center;
}


@media ( max-width: 810px) {  /* when it reaches the maximum of 810 */
   .grid-container2 { /* this clase */
    grid-template-columns: repeat(2, 200px); /* The size is changed in 2 columns and its size is 200 pixels */
   }
   nav ul {
    flex-direction: column; /* when its maximum is 810 pixels, continue to the right (horizontal) */
   }
   .div4 {
    flex-direction: column; /* when its maximum is 810 pixels, continue to the right (horizontal) */
   }
  

}

@media (min-width: 1160) { /* when it reaches the minimum of 810 */
     .div4{
        grid-template-columns: repeat(1, 400px); /* The size is changed in 1 columns and its size is 400 pixels */
     }
}

@media (max-width: 824px) { /* when it reaches the maximum of 824 pixels */
     .grid-container {
     flex-direction: column; /* when its maximum is 810 pixels, continue to the right (horizontal) */
   }
}
 
@media (max-width: 400px) {
   .grid-container2 {
    grid-template-columns: 1fr; /* when its maximum is 400 pixels, change to 1 single column  */       
   }

   header ul {
    flex-direction: column; /* continue to the right */
    align-items: flex-start;
   }
   
   nav ul {
    flex-direction: column; /* continue to the right */
    align-items: flex-start;
   }

   .grid-container {
    flex-wrap: wrap;  /* continue to the right */
   }

   header {
    flex-wrap: wrap; /* continue to the right */
   }


}