body {
    background-image: url(background/rabbits4-background.jpg);
    background-attachment: fixed ;
    background-size:20%;
    display:grid;
    grid-template-columns: 6% 20% 24% 24% 24% ;
    grid-template-rows: repeat(20%); 
    margin:0px;
  }
  a:link{color:#8f8ac2}
  a:visited{color:#8f8ac2}
#marg{grid-area:1/1/2/2;
  width:25px;
  height:205px;
  margin-top:30px;
  background:none;}

  
header{ grid-area:1/2/2/5;
  width: 740px;
  height:165px;
  margin-top: 30px;
  margin-left:none;
  margin-right: none;
  opacity:100%;
  background-color:white;
  border-width:10px;
  border-style:double;
  border-color:#adabc1;
  border-radius: 100px;
  padding-top: 20px;
  padding-left:50px;
  padding-right:none;
  padding-bottom: none;
  }
    #pagetitle{
      text-align:left;
      font-family: "Sour Gummy", sans-serif;
      color: #adabc1;
      font-size: 50px;
      display:inline;
        }
    header img{
      height:150px;
    }

  .navbar{ grid-area:2/2/4/3;
  margin-top: 40px;
  margin-right:auto;
  margin-bottom:30px;
  background-color:white;
  opacity:100%;
  border-radius: 10px;
  width:200px;
  height:350px;
  outline-width: 2px;
  outline-style: dashed;
  outline-offset: 4px;
  outline-color:#b4c5ed;
  border-width:3px;
  border-radius: 10px;
  border-style: solid;
  border-color:#b4c5ed;
  padding:5px;
  font-family: "DynaPuff", "DM Sans", sans-serif;
  text-align: center;
  font-weight:normal;
  font-size:15px;
}
        h2{
        font-family: "DynaPuff", "DM Sans", sans-serif;
        font-size:25px;
        color:#b4c5ed;
        font-weight:bold;
        text-align:center; }

#ribbon{grid-area:2/4/3/5;
width:190px;
height:auto;
margin-top:-20px;
margin-left:20px;
z-index: 1;
}

ul{
list-style-image:url(images/bluebutterfly.png);
list-style-type: circle;
}
.tutorials{grid-area:2/3/4/4;
margin-top: 40px;
height:400px;
width:365px;
outline-width: 2px;
outline-style: dashed;
outline-offset: 4px;
outline-color:#b4c5ed;
border-width:3px;
border-radius: 10px;
border-style: solid;
border-color:#b4c5ed;
padding:10px;
background:white;
font-family: "DM Sans", sans-serif;
overflow: auto;}

.resources{grid-area:2/4/4/5;
margin-top: 40px;
margin-left:150px;
height:400px;
width:365px;
outline-width: 2px;
outline-style: dashed;
outline-offset: 4px;
outline-color:#b4c5ed;
border-width:3px;
border-radius: 10px;
border-style: solid;
border-color:#b4c5ed;
padding:10px;
background:white;
font-family: "DM Sans", sans-serif;
overflow: auto;}

#footer{
  grid-area:5/1/6/7;
  width: 100%;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto; 
  padding-top: 20px;
  padding-bottom:10px;
  background:white;
  text-align:center;
  font-family: "DM Sans", sans-serif;
  font-size: x-small;
}