*{
    font-family: serif;
    margin: 0;
    padding: 0;
   
}
body{
     width: 80%;
    margin: 0 auto;
    display: grid;
    gap: 2rem;
    padding: 2em;
}
img{
    width: 100%;   
}
header{
    margin-top: 1em;
    
}
main{
    margin-top: 1em;
}
.image-icon{
   justify-content: center;
   width: 65%;
   margin: 0 auto;
    
}
.imagen-1{
    border-radius: 50%;
    
}
.head{
    display: grid;

}
.icon ul li{
    display: grid;
    text-align: left;
}
.red i{
        color: rgba(206,0,0,0.97);
       }
.black i{
        color: rgb(44, 44, 44);
} 
.red a{
         color: rgb(44, 44, 44);
}
.black a{
      color: rgba(206,0,0,0.97);
}
.black a:hover{

    color: rgb(7, 0, 0);
    text-shadow: -1px 1px 0px rgba(206,0,0,0.97);
}
.red a:hover{

    color:rgba(206,0,0,0.97);
    text-shadow: -1px 1px 0px rgb(7, 0, 0);
}
.red i:hover{

    color: rgb(7, 0, 0);
    text-shadow: -1px 1px 0px rgba(206,0,0,0.97);
}
.black i:hover{

    color:rgba(206,0,0,0.97);
    text-shadow: -1px 1px 0px rgb(7, 0, 0);
}

p{
    color: rgb(41, 41, 41);
}

.li-main ul{
    display: grid;
    
    list-style: none;
}
.li-main li{
    width: 50%;
    margin: 0.5em auto;
}

.li-main a{
    text-decoration: none;color: rgb(44, 44, 44);
    
}

.search {
    display: grid;
    margin: 1em 0;
}
.search i{
    color:  rgba(206,0,0,0.97) ;

}


.image-main {
    background-image: url('../img/yoru/yoru_main.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    
    height: auto;
   

}
.image-main h1{
    margin:  20rem 0 0 0;
    color: black;
    
    text-shadow: -3px 4px 0px rgba(206,0,0,0.97);
}
.image-main p{
    color: white;
    background-color:rgba(206,0,0,0.97);
    
    width: 60%;
}     
.low-main p{
    margin: 2em;
}
@media (max-width:600px){
    .icon ul li i{
        display: none;
      
    }
    .icon{
        grid-template-columns: repeat(4, 1fr);
        list-style: none;
        text-decoration: none;

    }
    .image-main {
   
    padding: 2.30rem;
    width: 80%;
    margin: 0 auto;
    }
.li-main{
    background-color: rgb(255, 57, 90);
    margin: none;
    display: none;
    
}

}
@media (max-width:900px) and (min-width:601px){
    .head{
        grid-template-columns: repeat(2, 1fr);

    }
       .image-main {
   
    padding: 3.30rem;
    width: 80%;
    margin: 0 auto;


}
.li-main {
    background-color: rgb(255, 57, 90);
    margin: none;
   
}
.li-main ul{
      grid-template-columns: repeat(4, 1fr);
}
.search {
    grid-template-columns: 1fr 1fr;
}

}
@media (min-width:901px){
    .icon ul li{
      grid-template-columns: 2fr 3fr;
      
      font-weight: bold;
    }
    .icon ul li a{
         text-decoration: none;
         margin: 0.5em 0;
    }
    .icon ul li i{
        width: 50%;
        margin: 0.5em 0 0.5em 2rem ;
      
        
    }
    
    .icon ul{
    
        margin: 0 auto;
    }
    body{
        grid-template-columns: 1fr 3fr;
    }
   .image-main {
   
    padding: 4.10rem ;
   }
    .li-main{
    background-color: rgb(255, 57, 90);
    margin: none;
}
.li-main ul{
     grid-template-columns: repeat(4, 1fr);

}
.search {
    grid-template-columns: 1fr 1fr;
}
   }