body{
    background-color: rgb(212, 230, 230);
    margin:0px;
    font-family:"Arial", sans-serif;    
}

ul{
list-style-type: none;
display:flex;
justify-content:space-around;
padding:15px;
background-color:rgb(144, 196, 238);
margin:0px;
}
ul li a{
    
    text-decoration:none;
    color:black;
    padding:15px;

}
ul li a:hover{
    background-color: rgb(172, 207, 235);

}

.top{
    position:fixed;
    width:100%;
    z-index:1000;
    height:50px;
}
main{
    padding: 160px 10px 10px 10px;
}
h3{
    text-align: center;
}
h1{
    text-align:center;
    background-color:rgb(54, 161, 227);
    margin:0px;
    padding:15px;
}
h1 a{
    text-decoration:none;
    color:black;
    
}
.start{
    margin:2%;
    text-align:center;
}
.yc{
    display:flex;
    background-color:rgb(43, 116, 226);
    padding:30px;
    margin:20px;
    border-radius:25px;
    

}
.yc h4{
    font-size:30px;
}
.stuff{
    display:flex;
    align-items: center;
    justify-content: center;
    margin:30px;
    flex-direction:column;
}
.ycmini{
    text-align:center;
    margin:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    
}
.welcome{
    text-align:center;
   
}
.about{
    margin:20px;
    background-color:rgb(245, 251, 239);
    padding:20px;
    border-radius:20px;
}

.Healthy{
    display:flex;
    background-color:rgb(135, 186, 174);
    padding:30px;
    border-radius:25px;
    align-items:center;

}
.healthmini{
    text-align:center;

    margin:10px;
}
.Healthy h4{
    font-size:30px;
}
.art{
    display:flex;
    background-color: rgb(43, 116, 226);
    padding:30px;
    margin:20px;
    border-radius:25px;
}

.art h4{
    font-size:30px;
}
.garden{
    display:flex;
    background-color: rgb(135, 186, 174);
    padding:30px;
    border-radius:25px;
}
.garden h4{
    font-size:30px;
}
.history{
    display:flex;
    background-color: rgb(43, 116, 226);
    padding:30px;
    margin:20px;
    border-radius:25px;
}
.history h4{
    font-size:30px;
}

.hello p{
    padding:30px;
    display:flex;
    align-items:center;
   
}
.grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    grid-template-rows:repeat(3, 1fr);
   
    padding:20px;
}
.council{
    grid-area:1/1/2/2;
    background-color: rgb(98, 146, 158);
    padding:20px;
    margin:20px;
    border:5px inset rgb(75, 112, 121);
}
.play{
    grid-area:1/2/2/3;
    background-color: rgb(84, 106, 123);
    padding:20px;
    margin:20px;
    border:5px inset rgb(62, 78, 91);
}
.pod{
    grid-area:2/1/3/2;
    background-color: rgb(84, 106, 123);
    padding:20px;
    margin:20px;
    border:5px inset rgb(62, 78, 91);
}
.merica{
    grid-area:2/2/3/3;
    background-color:rgb(98, 146, 158);
    padding:20px;
    margin:20px;
    border:5px inset rgb(75, 112, 121);
}
.read{
    grid-area:3/1/4/2;
    background-color:rgb(98, 146, 158);
    padding:20px;
    margin:20px;
    border:5px inset rgb(75, 112, 121);
}
.rec{
    grid-area:3/2/4/3;
    background-color: rgb(84, 106, 123);
    padding:20px;
    margin:20px;
    border:5px inset rgb(62, 78, 91);
}
.eventos{
    background-color: rgb(213, 210, 210);
    margin-left:10%;
    margin-right:10%;
    border-radius:30px;

}
.styles{
    background-color:white;
    display:flex;
    border:5px rgb(54, 144, 138) solid;
    align-items:center;
    padding:20px;
  
}
.nice{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: flex-start;
    padding:30px;
}
@media (max-width: 768px) {
  .styles {
    display:flex;
    flex-direction:column;
  }
  .hello{
    font-size:15px;
  }
}


.hola{
    text-align:center;
    padding:20px;
}
.hello{
    display:flex;
    padding:3% 15%;
    align-items:center;
}
.bonjour{
    text-align:center;
    position:relative;
}
@media (max-width: 600px) {
  .grid{
    display: block;
}}
round img{
    max-width: 100%;
    height: auto; /* This maintains the image's aspect ratio */

}
@media (max-width: 900px) {
  .yc{
    flex-direction:column;
  
}
.Healthy{
    flex-direction:column;
}
.art{
flex-direction:column;
}
.garden{
flex-direction:column;
}
.history{
flex-direction:column;
}

}