@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Jacques+Francois&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
* {
    font-family: 'Google Sans';
}
body {
    margin: 0;
    padding: 0;
}
header {
    background-color: #81fafe;
    padding: 10px;

    display: flex;
    justify-content: space-between;
    align-items: center;  
}
header ul {
    list-style: none;
    display: flex; 
    list-style: none;
    gap: 30px;
    padding: 0;
    margin: 0;
}
header ul li {
    transition: 0.5s;
    cursor: pointer;
    border-radius: 5px;
    padding: 12px;
}
header ul li:hover {
    background-color: #b9acfa;
    
    color: rgb(0, 0, 0);
}
footer {
    background-color: #93fecc;
    color: rgb(0, 0, 0);
    padding: 10px;
    text-align: center;
}
header {
    grid-area: h;
}

aside {
    grid-area: s;
    background-color: #c1ffbb;
}

aside ul {
list-style: none;

}

main {
    grid-area: m;
    background-color: rgb(54, 246, 217);
}

footer {
    grid-area: f;
}
.container{
display: grid;
grid-template-areas:
'h h'
's m'
'f f';
height: 100vh;

grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
}

main div{
    display: flex;
color: black;
transition: 0.5s;
cursor: pointer;
width: fit-content;
padding: 20px 30px;
}

main{
display: flex;
flex-wrap: wrap;
align-content: start;
gap:  15px;
}

main div:hover{
  color: rgb(0, 255, 21);
  background-color:  rgb(0, 181, 242);
  width: fit-content;
  font-size: 20px;}

  li{
border: 2px dotted brown;
width: fit-content;

  }

  a{
text-decoration: none;
color: white;
font-weight: bold;
padding: 20px;


  }