body {
    background-image: url(background/rabbits5ksdjf.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: #a10000}
  a:visited{color: #a10000}

.header{ grid-area:1/2/2/5;
  width: 90%;
  height:165px;
  margin-top: 30px;
  margin-left:none;
  margin-right: auto;
  opacity:85%;
  background-color:white;
  border-width:10px;
  border-style:dotted;
  border-color:#d88a5e;
  border-radius: 100px;
  padding-top: 20px;
  padding-left:20px;
  padding-right:none;
  padding-bottom: none;
  }
    #pagetitle{
      text-align:center;
      font-family: "Sour Gummy", sans-serif;
      color: #d88a5e;
      font-size: 60px;
      display:inline;
    }
  .header img{
    max-height:140px;
    max-width:auto;
  }

#topstrawberry{ grid-area:2/4/3/5;
  width:270px;
  height:auto;
  z-index:1;
  position:relative;
  margin-top:-200px;
  margin-left:150px;
}

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

 }
        h3{
          font-size:17px;
        }
        .navbar img{
          max-width:175px;
          max-height:auto;
          transform: rotate(-10deg);
        }

 .music{ grid-area:1/5/3/6;
  margin-top: 30px;
  margin-left:auto;
  margin-right:50px;
  margin-bottom:0px;
  width:225px;
  height:575px;
  background-image: url(background/strawberries2.png);
  background-size:75%;
  outline-width: 5px;
  outline-style: dotted;
  outline-offset: 5px;
  outline-color: #da7568;
  border-width:3px;
  border-radius: 35px;
  border-style: solid;
  border-color:#da7568;
  padding-top:10px;
  text-align: center;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight:bold;
  overflow:auto;}

  .music img{
    max-width: 150px;
  }

  .music header{
    grid-area:1/5/2/6;
    background-color:white;
    width:100%;
    height: 62px;
    font-family: "DynaPuff", "DM Sans", sans-serif;
    font-size:25px;
    color:#b61f1f;
    font-weight:bold;
  }

#middle{ grid-area:2/3/3/5;
  margin-top: 70px;
  margin-right:auto;
  z-index:-1;
  position:relative;
  width:575px;
  height:330px;
  outline-width: 5px;
  outline-style: dotted;
  outline-offset: 6px;
  outline-color: #da7568;
  border-width:3px;
  border-radius: 10px;
  border-style: solid;
  border-color:#da7568;
  padding:10px;
  background-color:white;
  font-family: "DM Sans", sans-serif;
  text-align: left;
  font-weight:normal;
  font-size:13px;}

.top5{ grid-area:3/3/4/4;
  margin-top: 40px;
  margin-left:6px;
  margin-right:auto;
  margin-bottom:20px;
  background-color: white;
  height:350px;
  width:240px;
  outline-width: 4px;
  outline-style: dotted;
  outline-offset: 5px;    
  outline-color: #da7568;
  border-width:2px;
  border-radius: 10px;
  border-style: solid;
  border-color:#da7568;
  padding:10px;
  padding-bottom:13px;
  font-family: "DM Sans", sans-serif;
  text-align: left;
  font-weight:normal;
  font-size:15px;
  overflow: auto;
}
  .top5 h3{
    font-size:15px;
    font-family: "DynaPuff", "DM Sans", sans-serif;
  }

.favourites{grid-area:3/4/4/5;
  margin-top: 40px;
  margin-left:auto;
  margin-right:35px;
  margin-bottom:20px;
  background-color: white;
  height:300px;
  width:240px;
  outline-width: 4px;
  outline-style: dotted;
  outline-offset: 5px;
  outline-color: #da7568;
  border-width:2px;
  border-radius: 10px;
  border-style: solid;
  border-color:#da7568;
  padding:10px;
  padding-bottom:13px;
  font-family: "DM Sans", sans-serif;
  text-align: left;
  font-weight:normal;
  font-size:15px;
  overflow:auto;
}
.favourites h3{
    font-size:15px;
    font-family: "DynaPuff", "DM Sans", sans-serif;
  }

#pic1{grid-area:3/2/4/3;
  width:185px;
  height:auto;
  z-index:-2;
  position:relative;
  margin-top:110px;
  margin-left:auto;
  margin-right:50px;
  outline-width: 4px;
  outline-style: dashed;
  outline-offset: 4px;
  outline-color: #da7568;
  border-radius: 0px;
  padding:5px;}

#bow{grid-area:3/2/4/3;
  width:175px;
  height:auto;
  z-index:1;
  position:relative;
  margin-top:-25px;
  margin-left:150px;
  margin-right:0px;
  transform: rotate(-8deg)}

#pic2{grid-area:3/5/4/6;
height:290px;
width:auto;
margin-left:-110px;
margin-top:-9px;
transform: rotate(-15deg);}

#pic3{grid-area:3/5/4/6;
height:190px;
width:auto;
margin-left:37px;
margin-top:5px;
outline-width: 4px;
outline-style: dashed;
outline-offset: 4px;
outline-color: #da7568;
border-radius: 0px;
padding:5px;}

#pic4{grid-area:3/2/5/3;
  width:225px;
  height:auto;
  z-index: 1;
  margin-top:300px;
  margin-left:75px;
  margin-right:0px;}

#pic5{grid-area:4/4/5/5;
  width:250px;
  height:auto;
  z-index:1;
  position:relative;
  margin-top:-200px;
  margin-left:100px;
  margin-right:100px;
}

  .updates{grid-area:4/2/5/3;
  background-color:white;
  opacity:80%;
  width:180px;
  height:375px;
  margin-top:-5px;
  outline-width: 2px;
  outline-style: dotted;
  outline-offset: 4px;
  outline-color: #da7568;
  border-width:3px;
  border-radius: 10px;
  border-style: solid;
  border-color:#da7568;
  padding:15px;
  font-family: "DM Sans", sans-serif;
  text-align: left;
  font-weight:bold;
  font-size:13px;
  color:#a10000;
  overflow:scroll;
}


  .funfacts{grid-area:3/5/5/6 ;
  margin-top: 250px;
  margin-left:auto;
  margin-right:50px;
  margin-bottom:0px;
  width:215px;
  height:575px;
  background-color: white;
  outline-width: 5px;
  outline-style: dotted;
  outline-offset: 5px;
  outline-color: #da7568;
  border-width:3px;
  border-radius: 35px;
  border-style: solid;
  border-color:#da7568;
  padding-top:10px;
  padding:10px;
  text-align: center;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight:normal;
  overflow:auto;} 

  .funfacts p{
    text-align:left;}

#petlabels{grid-area:4/3/5/6;
  width:200px;
  margin-top:auto;
  margin-bottom:-10px;
  background-color: rgb(255, 255, 255);
  z-index:3;
  text-align: left;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight:normal;}

#loki{grid-area:4/3/5/4;
width:200px;
margin-top:-10px;
margin-left:-25px;}  
#lik{grid-area:4/3/5/4;
width:125px;
margin-top:90px;
margin-left:160px;} 

#lokiface{grid-area:4/3/5/4;
width:125px;
margin-top:-10px;
margin-left:150px;
margin-right:0px;
margin-bottom:10px;
z-index: -1; }
#zakgroup{grid-area:4/3/5/4;
width:175px;
margin-top:115px;
margin-left:0px;
margin-right:0px;
margin-bottom:10px;
z-index: 0;}

#zak{grid-area:4/3/5/4;
width:210px;
margin-top:125px;
margin-left:70px;
z-index: 2;}
#zik{grid-area:4/3/5/4;
width:125px;
margin-top:250px;
margin-left:-20px;
z-index: 1;}

#heart{grid-area:4/3/5/4;
width:120px;
margin-top:120px;
margin-left:105px;
opacity:95%;
z-index: -1;
transform: rotate(-18deg)}

#pic6{
  grid-area:4/4/5/5;
  width: 260px;
  height:auto;
  margin-top:-25px;
  margin-left:20px;
  margin-bottom:auto;
  outline-width: 4px;
  outline-style: dashed;
  outline-offset: 4px;
  outline-color: #da7568;
  border-width:1px;
  border-radius: 0px;
  border-style: none;
  border-color:#da7568;
  padding:5px;
}
#pic9{
  grid-area:4/4/5/5;
  width: 250px;
  height:auto;
  margin-top:auto;
  margin-bottom:50px;
  margin-left:0px;
  margin-right:100px;
  outline-width: 4px;
  outline-style: dashed;
  outline-offset: 4px;
  outline-color: #da7568;
  border-width:1px;
  border-radius: 0px;
  border-style: none;
  border-color:#da7568;
  padding:5px;
}



#footer{
  grid-area:6/1/7/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;
}