body {margin: 0px; background-color: #5c6596;}
    
.nav{width: 15%; background-color: aliceblue; float:left; padding:.5%; height: 98.5vh; overflow: auto;}
.content{background-color: #5c6596; float:right; width: 83%; padding:.5%; height: 98.5vh; overflow: auto; }
.doll{width:5%; position: fixed; bottom: -2%; left: 0;}
    
    
    h1{font-family:malvinas;} 
    h2 {
      font-family:angelface;
      font-size:35px;
      color:powderblue;
      
    }
    h3{font-family:readable; letter-spacing: 2px; font-size:17px;line-height: 1.5; text-indent: 25px;}
    p{ font-family: flower; font-size: 25px;  }
    
    a{color:white; font-family:handwritten; font-size:30px;}
    a:hover {color: red; font-style:italic;}
    
    strong{ font-family:handwritten; font-size:30px; color:brown;}
    
    
    
    h4{
      font-size:25px;
      color:white;
      font-family:lady;
      position:absolute;
      rotate:90deg;
      text-shadow: 0 0 3px #4a1f1f, 0 0 5px #4a1f1f;
    }
    
    
    
    
   
    
    button{ padding: 0px;
      width: 100%; margin-top: 10px;}
    /* relevant styles */
    .img__wrap {
      width:100%;
      position: relative;
    
    }
    
    .img__description_layer {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(36, 62, 206, 0.6);
      color: #fff;
      visibility: hidden;
      opacity: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    
      /* transition effect. not necessary */
      transition: opacity .2s, visibility .2s;
    }
    
    .img__wrap:hover .img__description_layer {
      visibility: visible;
      opacity: 1;
    }
    
    .img__description {
      transition: .2s;
      transform: translateY(1em);
    }
    
    .img__wrap:hover .img__description {
      transform: translateY(0);
    }
    
    
     @font-face {
    src: url(https://dl.dropbox.com/scl/fi/k57e3qjxc4ck4lzubnkgp/AngelicAlchemy.ttf?rlkey=sqi34w0gqd11bebrjnqj7zaf2&st=82jp5kcn&);
    font-family: angelface;
    }
    
    @font-face {
      src: url(https://dl.dropbox.com/scl/fi/rd88fwprso8wzf9i5za1m/Malvinas-Signature-Free-Personal-Use.ttf?rlkey=ndqivxstizjnxaomzyirdqnf2&st=pxkbalar&);
      font-family: malvinas;
    }
    
    @font-face {
      src: url(https://dl.dropbox.com/scl/fi/66x4sc76eshtut88nz9xm/Standard-Nib-Handwritten.ttf?rlkey=vzx95g2hssp0gdxojvj8mv33o&st=wyym0ssh&);
      font-family: handwritten;
    }
    @font-face{
    src:url(https://dl.dropbox.com/scl/fi/1wd7xfjco04h3sciq3y91/PleaseWriteMeASong-70vV.ttf?rlkey=2y3lnpk5yzidgn3z0vc63eoa8&st=nma0jcti&);
    font-family:readable}
    @font-face {
      src: url(https://dl.dropbox.com/scl/fi/a2l5uqk7rw0kxwa2t6h1g/alphabetized-cassette-tapes.ttf?rlkey=ykdziug8dar2kv47hm0ugqwic&st=a2y5mgzp&);
      font-family: tapes;
    }
    @font-face {
      src: url(https://dl.dropbox.com/scl/fi/cd09o0ejnpczcgxqzr2mf/IndieFlower-Regular.ttf?rlkey=9mex00h8utz9rkm1ztwl3fc0v&st=8rd2ncrp&);
      font-family:flower
    }
     @font-face {
    src: url(https://dl.dropbox.com/scl/fi/m9i7xnui0hs5xcb7d91q9/AdorableLady.ttf?rlkey=hmpnxyud36f26orv146td3xk1&);
    font-family: lady;
    }
    @font-face {
    font-family: lefthanded;
    src: url(https://dl.dropbox.com/scl/fi/21coh1l9zl634uip3a8yu/_free.otf?rlkey=6xnfu7pwo1qqlpxubh21ll5ij&st=2a8u8r47&);
      }