@font-face {
       font-family: "roman"; 
       src: url("https://heartstring.neocities.org/r/ttf/RomanAntique.ttf") format("truetype"); }
    
     @font-face {
       font-family: "crayon"; 
       src: url("https://heartstring.neocities.org/r/ttf/KOM.ttf") format("truetype"); }
     @font-face {
       font-family: "ocean"; 
       src: url("https://heartstring.neocities.org/r/ttf/Ocean.ttf") format("truetype"); }
  
  h3 {
    font-family: "roman";
    font-size: 30px;
    margin: 10px;
    color: #672A21;
    }
  
  h4 {
    font-family: "ocean";
    font-size: 15px;
    margin: 5px;
    color: #AF5959;
    }
  
  h4:hover {
    font-family: "ocean";
    font-size: 15px;
    margin: 5px;
    color: #BE7F7F;
    }
  
  p {
    font-family: "crayon";
    font-size: 15px;
    margin: 10px;
    color: #3D200A;
    }

  a {
    font-family: "crayon";
    font-size: 15px;
    text-decoration: underline;
    color: #B4522C;
    }
    a:hover {
      font-family: "crayon";
    font-size: 15px;
    font-style: italic;
    text-decoration: underline;
      color: #B16A4E;
      }

  * {
  box-sizing: border-box;
}

/*FIX HEIGHTS LATER*/

body {
  background:url('https://heartstring.neocities.org/r/b/13polkadot.png');
  }

.wrap {
  border: 3px solid #4B1810;
  width: 70%;
  height: 700px;
  margin: auto;
  }

.left {
  background-color: #2196F3;
  float: left;
  width: 20%; 
  height: auto;
  border: 1.5px solid #673615;
}

.main {
  background: #ECE4D8;
  float: left;
  overflow: hidden;
  width: 80%; 
  height: 494px;
  text-align: center;
}

.right {
  background-color: #04AA6D;
  float: left;
  width: 20%;
  height: 400px;
  text-align: center;
  padding: 5px;
  border: 1.5px solid #673615;
}

.f {
  background-color: purple;
  padding: 20px;
  width: 100%;
  height: 200px;
  }

.innerm {
  padding:5px;
  float: left;
    overflow-x: hidden;
  overflow-y: scroll;
  width: 100%;
  height: 350px;
  border: 1.5px solid #673615;
  text-align: left;
}

.n {
  width: 100%
  height: 10px;
  padding: 2px;
  border: 1px solid #673615;
  border-left: none;
   background-image: linear-gradient(
    180deg,
    hsl(36deg 34% 89%) 0%,
    hsl(36deg 35% 88%) 18%,
    hsl(36deg 35% 88%) 26%,
    hsl(36deg 35% 88%) 33%,
    hsl(36deg 35% 88%) 39%,
    hsl(36deg 36% 87%) 44%,
    hsl(36deg 36% 87%) 50%,
    hsl(36deg 36% 87%) 56%,
    hsl(36deg 36% 87%) 61%,
    hsl(36deg 36% 86%) 67%,
    hsl(36deg 37% 86%) 74%,
    hsl(36deg 37% 86%) 82%,
    hsl(36deg 37% 86%) 100%
  );
  }
.n:hover {
  width: 100%
  height: 10px;
  padding: 2px;
  border: 1px solid #673615;
  border-left: none;
  background-image: linear-gradient(
    180deg,
    hsl(35deg 38% 85%) 0%,
    hsl(35deg 38% 85%) 18%,
    hsl(35deg 38% 84%) 26%,
    hsl(35deg 38% 84%) 33%,
    hsl(35deg 39% 84%) 39%,
    hsl(35deg 39% 83%) 44%,
    hsl(35deg 39% 83%) 50%,
    hsl(35deg 39% 83%) 56%,
    hsl(35deg 40% 82%) 61%,
    hsl(35deg 40% 82%) 67%,
    hsl(35deg 40% 82%) 74%,
    hsl(35deg 40% 81%) 82%,
    hsl(35deg 40% 81%) 100%
  );
  }
.h {
  width: 100%;
  height: 5px;
  background: green;
  overflow: visible;
  }

.leftbar {
  
  }

@media screen and (max-width: 800px) {
  .left, .main, .right {
    width: 100%;
  }
   .wrap {
     width: 100%;
     }
   

   
}