body {
     text-align:center;
    font-family:Lucida Sans Unicode;
    background:#999CE2;
    background-image:url(/images/clouds25.png);
    background-attachment: fixed;
    background-size: 100%;
    background-repeat:no-repeat;
    background-position: bottom;
    overflow-y:scroll;
    margin-top:0px;
    margin-bottom:0px;
    overflow-x:hidden;
    }

    #screen {
      height:100%;
      width:100%;
      z-index: -2;
      position:fixed;
      top:0px;
      left:0px;
      background-image: url(/images/scanoverlay.png);
     } 

    #s-m-t-tooltip {
        z-index: 9999;
        background: #000;
        font-size: 16px;
        line-height: 20px;
        font-family:'comic relief';
        letter-spacing: 1px;
        border:solid 2px white;
        -o-transition: all 0.3s ease-out;
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        color:#c491eb;
        max-width: 200px;
        word-wrap: break-word;
        padding: 2px 5px 2px 6px;
        display: block;
        margin: 24px 14px 7px 12px;
      }
    
    
    ::-webkit-scrollbar {
    width:5px;
    height:4px;
    }
    
    ::-webkit-scrollbar-thumb {
    background:#a573ca;
    }
    
    #shelf {
        display: flex;
        flex-wrap: wrap;
        padding: 0 4px;
        margin:auto;
        height:72vh;
        width:40vw;
        margin-top:15px;
        padding-bottom:10vh;
        background-image: url(/images/shelp.png);
        background-size:contain;
        background-repeat:no-repeat;
    }
    /*shelf img is 2280 x 2408 22x24 */

    .spread1 {
        display:flex;
        flex-flow:row;
        overflow:hidden;
        height:18vh;
        margin-top:7vh;
        margin-left:3vw;
        width:35vw;
    }
    .spread1:hover {
        overflow:visible;
    }
                .spread1 img{
                    padding-left:5px;
                    transition:0.5s;
                }
                .spread1 img:hover{
                    transform:scale(1.5);
                }

     .spread2 {
        display:flex;
        flex-flow:row;
        overflow:hidden;
        height:18vh;
        margin-top:8vh;
        margin-left:3vw;
        width:35vw;
    }
    .spread2:hover {
        overflow:visible;
    }
                .spread2 img{
                    padding-left:5px;
                    transition:0.5s;
                }
                .spread2 img:hover{
                    transform:scale(1.5);
                } 
                
     .spread3 {
        display:flex;
        flex-flow:row;
        overflow:hidden;
        height:18vh;
        margin-top:9vh;
        margin-left:3vw;
        width:35vw;
    }
    .spread3:hover {
        overflow:visible;
    }
                .spread3 img{
                    padding-left:5px;
                    transition:0.5s;
                }
                .spread3 img:hover{
                    transform:scale(1.5);
                }

    .commentary{
        position:absolute;
        z-index: 9;
        background: linear-gradient(#16172b, #444774);
        border: 2px solid #fff;
        color:#fff;
        text-align: center;
        top:30vh;
        right:10vw;
        width:15vw;
        overflow:scroll;
        max-height:35vh;
        padding:15px;
    }
            .commentary .header{
              width:100%;
              padding-top:5px;
              padding-bottom:5px;
              margin-bottom:10px;
              border-bottom:3px dashed #fff;
              padding:none;
              color:#fff;
              overflow: hidden;
              font-family:'comic relief';
              font-size:20px;
              
            }
            .commentary p{
                padding:15px;
            }
    .navigation  {
        position:absolute;
        z-index: 9;
        font-family: 'comic relief';
        font-size:20px;
        color:#fff;
        text-align: center;
        top:25vh;
        left:10vw;
        width:15vw;
        padding:15px;
        border:2px solid transparent;
        height:10vh;
    }

    #case2 {
        display:none;
    }
    #case3 {
        display:none;
    }

    a {
        text-decoration: none;
        color:#c491eb;
        font-weight:bold;
    }
        a:hover{
            transition:.5s;
            color:#9C59D0;
        }
    .buttonlink {
        color:#fff;
        font-weight:bold;
        text-decoration: none;
        background:none;
        border:none;
        font-family: inherit;
        font-size:inherit;
        padding:none;
        width:auto;
        margin:auto;
        border-bottom:2px dashed #fff;
    }
            .buttonlink:hover{
                transition:.5s;
                letter-spacing: 1.5px;
                color:#c491eb;
            }


            #yuuko {
      position:absolute;
      
      height:50vh;
      bottom:0px;
      left:0px;
    }
    
    #yuuko img {
          max-height:100%;
          z-index:1;
        }
            
            
            
    
       
       


            .title {
                width:100%;
                font-size:5vh;
                font-family: 'mansalva', sans-serif;          
                font-weight:400;
                text-decoration:none;
                letter-spacing: 1.2px;
                color:#fff;
                padding:1vh;
              }  
             
              .title:hover{
                font-style:bold;
                text-decoration:none;
                letter-spacing: 3px;
                transition-duration: .5s;
                
              }
              #nav {
                width:45vw;
                margin:auto;
                padding:0px;
              }
              #nav a {
                font-size:18px;
                font-family: 'comic relief';
                font-weight:bold;
                text-decoration:none;
                color:#fff;
                padding:0px;
            }
            #nav a:hover{
                font-style:bold;
                text-decoration:none;
                letter-spacing: 1.2px;
                transition-duration: .5s;
            }
            #nav a:visited{
                font-style:bold;
                text-decoration:none;
                -webkit-text-stroke: 1.2px #9C59D0;
                -webkit-text-fill-color: #fff;
            }
              
            .post #hal {
                max-width:90%;
                margin:auto;
            }

            .modal {
                display: none; /* Hidden by default */
                position: fixed; /* Stay in place */
                z-index: 1; /* Sit on top */
                padding-top: 100px; /* Location of the box */
                left: 0;
                top: 0;
                width: 100%; /* Full width */
                height: 100%; /* Full height */
                overflow: auto; /* Enable scroll if needed */
                background-color: rgb(0,0,0); /* Fallback color */
                background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
              }
              
            .modal-content {
                margin: auto;
                display: block;
                width: 80%;
                max-width: 700px;
            }
            .modal-content {
                animation-name: zoom;
                animation-duration: 0.6s;
              }
                                  
                  @-webkit-keyframes zoom {
                    from {-webkit-transform:scale(0)} 
                    to {-webkit-transform:scale(1)}
                  }
                  
                  @keyframes zoom {
                    from {transform:scale(0)} 
                    to {transform:scale(1)}
                  }
                  
                  /* The Close Button */
                  .close {
                    position: absolute;
                    top: 15px;
                    right: 35px;
                    color: #f1f1f1;
                    font-size: 40px;
                    font-weight: bold;
                    transition: 0.3s;
                  }
                  
                  .close:hover,
                  .close:focus {
                    color: #bbb;
                    text-decoration: none;
                    cursor: pointer;
                  }