* {
  box-sizing: border-box;
}

@media screen and (max-width: 800px) {
  #m {
    width: 100%;
  }

@font-face {
       font-family: "candy"; 
       src: url("https://heartstring.neocities.org/r/ttf/Candy.ttf") format("truetype"); }
    
     @font-face {
       font-family: "crayon"; 
       src: url("https://heartstring.neocities.org/r/ttf/Crayon.ttf") format("truetype"); }
     @font-face {
       font-family: "retro"; 
       src: url("https://heartstring.neocities.org/r/ttf/Retro.ttf") format("truetype"); }
 h3 {
    font-family: "stay";
    font-size: 30px;
    margin: 10px;
    color: #E04C6F;
    }
  
  h4 {
    font-family: "retro";
    font-size: 15px;
    margin: 5px;
    color: #E04C6F;
    }
  
  p {
    font-family: "crayon";
    font-size: 13px;
    margin: 10px;
    color: #C32C61;
    }

  a {
    font-family: "crayon";
    font-size: 13px;
    text-decoration: underline;
    color: #F7538F;
    }
    a:hover {
      font-family: "crayon";
    font-size: 13px;
    font-style: italic;
    text-decoration: italic underline;
      color: #FF8BB3;
      }

#m {
  width: 70%;
  height: auto;
  margin: auto;
  padding: 5px;
  
  }