* {
  box-sizing: border-box;
}

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

 @font-face {
       font-family: "Lea"; 
       src: url("https://heartstring.neocities.org/r/ttf/Leander.ttf") format("truetype"); }
    
     @font-face {
       font-family: "news"; 
       src: url("https://heartstring.neocities.org/r/ttf/Newspaper.ttf") format("truetype"); }
     @font-face {
       font-family: "retro"; 
       src: url("https://heartstring.neocities.org/r/ttf/Ocean.ttf") format("truetype"); }
 h3 {
    font-family: "Lea";
    font-size: 30px;
    margin: 10px;
    color: #CC444B;
    }
  
  h4 {
    font-family: "retro";
    font-size: 15px;
    margin: 5px;
    color: #E04C6F;
    }
  
  p {
    font-family: "news";
    font-size: 13px;
    margin: 10px;
    color: #320B0B;
    }

  a {
    font-family: "news";
    font-size: 13px;
    text-decoration: underline;
    color: #D54848;
    }
    a:hover {
      font-family: "news";
    font-size: 13px;
    font-style: italic;
    text-decoration: italic underline;
      color: #DD6969;
      }

#m {
  width: 70%;
  height: auto;
  margin: auto;
  padding: 5px;
  
  border: double 3px gray:
  }