body {
   background-image: url('/Images/greencloth.jpeg');
   background-size: 500px;
    overflow-y: scroll;

}

.container {
   max-width: 1000px;
    margin: 50px auto;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 250px auto;
}

header {
   border: 2px lightgrey solid;
   background-image: url('Images/cloverswithfog.jpeg');
   background-size: cover;
   background-position-y: -180px;
   grid-row: 1/2;
   grid-column: 1/5;
   height: 160px;

    h1{
      margin: 80px 20px 20px;
    }

    h4{
      margin: 3px 20px;
    }

}

about{
   border-color: lightgrey 2px solid;
   border-radius: 5px;
   background-color: white;
   grid-row: 2/3;
   grid-column: 1/5;
   height: 120px;
   display: inline-block;
   width: 100px;
   padding: 20px;
   text-align: center;
   overflow-y: auto;
   overflow-x: hidden;

   p{
      text-align: left;
   }
}

nav  {
   border-color: lightgrey 2px solid;
   border-radius: 5px;
   background-color: white;
   margin-top: 180px;
   grid-row: 2/3;
   grid-column: 1/5;
   height: max-content;
   display: inline-block;
   width: 100px;
   padding: 20px;
   text-align: left;

   ul{
      text-align: left;
      margin: 20px 30px 20px -20px;
      list-style-image: url('Images/pinkdot.gif');
  
   }

}

main {
   border: lightgray 2px solid;
   border-radius: 5px;
   background-color: white;
   grid-row: 2/3;
   grid-column: 2/4;
   height: 410px;
   margin-left: -108px;
   overflow-y: auto;
   overflow-x: hidden;

   h3{
      background-image: url('Images/greenpolkadots.jpeg');
      height: 30px;
      margin-top: 0px;
      padding-left: 30px;
      padding-top: 25px;
   }

   h4{
      text-align: left;
      padding-left: 40px;
      padding-right: 40px;
   }

   p {
    margin: 50px 30px;
    }
   
}

updates {
   border-color: lightgrey 2px solid;
   border-radius: 5px;
   background-image: url('Images/greenpolkadots.jpeg');
   grid-row: 2/4;
   grid-column: 4/4;
   display: inline-block;
   width: 140px;
   max-height: 100px;
   padding: 10px;
   overflow-y: auto;
   overflow-x: hidden;

   p{
      text-align: left;
      margin: 10px 10px;
   }
}

calendar{
   grid-row: 2/4;
   grid-column: 4/4;
   margin-top: 140px;
   max-height: max-content;
}

footer {
   position: fixed;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 100%;
   width: 400px;


}