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




 
body{ background-image: url("images/maddy5.png");
background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
background-color: #ffe6f3;




}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #fcd5ed;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #ff8bcb;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #fa89c2;
}



 .posts{  width:500px;
  background-color:rgb(255, 232, 244);
  padding:10px;
  margin-bottom:30px;
  position: relative;
}
  

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

 }

 nav,main { background: rgb(250, 196, 225);
border-radius: 10px;
padding:20px;
}

main, nav {
    border:rgb(250, 187, 219) 3px solid;
    
}

header { grid-row: 1 / 2;
    grid-column: 1 / 3 ;
    color: rgb(255, 138, 185);
    font-size: 50px;
   font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif
 }

 nav { grid-row: 2/ 3 ;
    grid-column: 1/ 2;
    height: max-content;
    color:rgb(249, 158, 205);
    background-image: url("images/graph.jpg");
 }

 ul{ list-style-type: none;
     margin:0;
    padding: 0;
     width: 200px;
 background-color: rgb(252, 211, 233);
 border: 3px dotted #ff7bc3;
}

li a {
  display: block;
  color: rgb(254, 110, 163);
  padding: 8px 16px;
  text-decoration: none;
  
 
}
li{ text-align:center;
     border-bottom: 1px dotted #ff7bc3;}
li :last-child{ border-bottom:none ;}

li a:hover  {
  background-color: #ff7bc3;
  color: white;
  text-decoration: line-through;
  
}

 main { grid-row: 2 / 3;
    grid-column: 2 / 3;
    height: max-content;
    color:rgb(253, 105, 177);
    background-image: url("images/graph.jpg");
    background-position: fixed;
     width:530px;
    top: 300px;
  height: 350px;
 overflow: scroll;
   overflow-x: hidden;
   overflow-y: scroll ;}
 
    

    

footer{ grid-row: 3 / 4;
grid-column: 1 / 3;
 
}