*{
      margin: 0;
    padding: 0;
    outline: none;
    border:none ;
    box-sizing: border-box;
    position: relative;
    list-style-type: none;
    text-decoration: none;
  }
  
  body{
       height: 100svh;
    max-width: 100svw;
    background-color: black;
    gap: 10px;
color: aliceblue;
    display: grid;
    grid-template-columns:1fr 4fr ;
    grid-template-rows: 100px 1fr 7px;
    grid-template-areas: 
    "h h"
    "a m"
    "a f"
;
  }
  :root{
--co:rgb(12,36,65);

 }

 img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
 }
 
 header{
    grid-area: h;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 30px ;
    background-color: var(--co);
    color: aliceblue;

}
nav ul{
    display: flex;
    gap: 20px;
}
.gelary{
display: grid ;
grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
gap: 20px;


}
.gelary div.haver{
    box-shadow:5px 5px 5px snow ;
    border: 50px;


}
nav div {
display: flex;

}
aside{
    background-color: var(--co);
    flex-direction: column;
    gap: 20px;
    grid-area: a;

}
main{
grid-area: m;
}
footer{
    grid-area: f;
    background-color: var(--co);
    border: 50px;
    height: 50px;
    padding: 10px;
}
@media(max-width:425px){
aside{
    display: none;

}
body{
    grid-template-areas: 
    "h h"
    "m m"
    "f f"
;
}
}
@media(max-width:425px){
    header{
        background-color: rgb(223, 205, 9);
          flex-direction: column;


    }
}