.box{
    max-width: 1000px;
    margin: 50px auto;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 250px minmax(0,1fr);
    
}

.box2{
    max-width: 1000px;
    margin: 50px auto;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 250px minmax(0,1fr);
    
}

 nav, main, footer {
    background: #ffdaa3;
     border-radius: 10px;
     padding: 20px;
}

header{
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    color: #6495e3;
    font-size: 50px;
    text-align: center;
     text-shadow: -1px 0 #4145ba, 0 1px #4145ba, 1px 0 #4145ba, 0 -1px #4145ba ; 
}

nav{ 
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    height: max-content;
     
}

main{
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    height: max-content;
    color:#6495e3; 
    
    
} 

h1{
    text-shadow: -1px 0 #4145ba, 0 1px #4145ba, 1px 0 #4145ba, 0 -1px #4145ba ;
    
}

footer{
    grid-row: 3 / 4;
    grid-column: 1 / 4;
    color: #6495e3;
    text-align: center;
    text-shadow: -1px 0 #4145ba, 0 1px #4145ba, 1px 0 #4145ba, 0 -1px #4145ba ;
    
    
}


  h2 {
        font-family: serif;
        color: #6495e3;
         text-shadow: -1px 0 #4145ba, 0 1px #4145ba, 1px 0 #4145ba, 0 -1px #4145ba ; 
    }


    
    body {
        background-image: url(https://i.pinimg.com/736x/22/60/1d/22601deb4a05a2785c1b48ad36d444d7.jpg);
        background-repeat: repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
        
    }
img{
    max-width: 200;
    border-radius: 700px;
    float: right;
    shape-outside:circle(50%);
    shape-inside: circle(50%);
    padding: 2px;
    border: 5px solid #fff478;
    
    
}

ul{
    padding: 0;
}

li::marker{
    content: none;

}

li a{
    text-decoration: none ;
    color: #6495e3;
    text-shadow: -1px 0 #4145ba, 0 1px #4145ba, 1px 0 #4145ba, 0 -1px #4145ba ; 
    
    
}

li a:hover{
    color: #fff478;
    text-shadow: -1px 0 #f7975c, 0 1px #f7975c, 1px 0 #f7975c, 0 -1px #f7975c;
}