body {
  color: red;
  font-family: "adorable_dollregular";
  text-align: left;
  background-repeat: repeat;
  background-size: 50%;
  background-image: url("joanbg.JPEG");
}
  
a:link {
  color: #c9f774;
}

a:visited {
  color: #c9f774;
}

a:hover {
  text-decoration: none;
}

@font-face {
    font-family: 'adorable_dollregular';
    src: url('fonts/joantype.woff2') format('woff2'),
         url('fonts/joantype.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

 p {
   font-family: "adorable_dollregular";
   color: red;
 }
 
 h1{
  font-size: 7rem; 
   }
   
 .highlight {
  margin-top: -3%;
   width:50%;
   background-color: black;
   margin-left: auto;
   margin-right: auto;
   }
   
   .szs {
    margin-top: -24%;
    margin-left: 9%;
    width: 10%;
    border-style: outset;
    border-width: thick;
    border-color: rgb(31, 81, 255);
     }
     
  .box1 {
    margin-top: 3%;
    margin-left: 19%;
    width: 60%;
     }
     
  .box2 {
    width:69%;
    margin-left: 10%;
    margin-top: 1.5%;
    margin-bottom: 1%;
    padding: 1%;
    background-image: url('images/log2004/wood3.jpg');
    background-size: 100%;
    border-color: yellow;
    border-style: solid;
    border-width: thick;
    border-radius: 15px; 
}  
      
  .box4 {
    margin-top: -55%;
    margin-left: 84%;
    width: 14%;
     }
     
  .box5 {
    margin-top: -17%;
    margin-left: 4%;
    width: 14%;
    background-color: rgba(250, 42, 5, 0.87);
    border-color: rgb(31, 81, 255);
    border-style: solid;
    border-width: thick;
     }
    
  .box6 {
    margin-top: -36%;
    margin-left: 20%;
    width: 15%;
     }
     
 .box7 {
    margin-top: -27%;
    margin-left: 37%;
    width: 30%;
     }
 .box8 {
    margin-top: -38%;
    margin-left: 69%;
    width: 12%;
     }