body {
       text-align:center;
       font-family:Verdana, Geneva, Tahoma, sans-serif;
       font-size:15px;
       background-color:#000 ;
       overflow:hidden;
       background-size:cover;
       background-repeat: no-repeat;
     }
      #title {
       color:#000;
        z-index:80;
        height:10vh;
        font-weight:bold;
        text-align:left;
        margin-left:1vw;
        font-family:"courier new";
        transform:rotate(-3deg);
        grid-area:header;
        }

        #title img {
            max-height:10vh;

        }
        #title img:hover {
            animation: shake 1.0s;
            animation-iteration-count: infinite;
        }

        h1 {
            font-family: 'lucida console';
            font-size:18px;
            text-align: center;
            flex:0 0 100%;
            
        }
        h2 {
            font-family: 'lucida console';
            font-size:16px;
            line-height:13px;
        }

        a {
          color:#1a7562;
          font-weight:bold;
          text-decoration:none;
        }
        a:visited {
          a {
          color:#1a7562;
          font-weight:bold;
          text-decoration:none;
        }
        }
        a:hover {
          transition-duration: 0.5s;
          color:#064134;

        }

        
        #main {
            margin-top:3vh;
            width:70vw;
            margin-left:auto;
            margin-right:auto;
            display:grid;
            grid-template-columns: 1.5fr 1fr 1.5fr;
            grid-template-areas: 
            "header two links"
            "one two three" 
            "four two three";
            overflow:hidden;            
            background:url(/images/lost/island.jpg);
            background-size:cover;
            border: 2px solid white; 
            padding:2vw;
        }
        
        #main #lefttop {
            grid-area:one;
            border:1px solid #000; 
            width:22vw;
            height:auto;    
            padding:0px;
            background-size:contain;
            background-image:url(/images/crt.jpg);
            height:18.5vw;
            font-family:'lucida console';
            color:#6bda11;
        }
                            #main #lefttop p{
                            padding:1vh 5.8vh 2vh;
                            max-height:12vh;
                            overflow-y:scroll;
                            
                            
                            }
                            #main #lefttop h1{
                                padding:5vh 5.5vh 0vh;
                            }
                            #main #lefttop a{
                                color:#6bda11;
                            }
        
        
         #main #leftbot {
            margin-top:2vh;
            grid-area:four;
            width:24.3vw;
            height:auto;    
            padding:0px;
            background-repeat:no-repeat;
            background-size:contain;
            background-image:url(/images/scrap.png);
            height:33vh;
            overflow:visible;

        }

            #main #leftbot p{
                            padding:1vh 5.8vh 2vh;
                            max-height:12vh;
                            overflow:scroll;
                            
                            
                            }
                            #main #leftbot h1{
                                padding:2.5vh 5.5vh 0vh;
                            }
                            #gallery {
                                height:25vh;
                                margin:auto;
                                padding:0px;
                                max-width:21vw;
                                overflow-y:scroll;
                                overflow-x:hidden;
                                height:18vh;
                            }

        
        #main #right {
            grid-area:three;
            overflow:scroll;
            background:linear-gradient(#d3c7c0, #928383);
            overflow-x:hidden;
            border:2px solid #000;
            height:75vh;
        }
         
        
         

                    #main #textarea {
                        width:100%;           
                        display:flex;
                        flex-flow:column;
                        align-content: space-between;
                        padding-bottom:10px;
                    }


                    #main .cha {
                        flex: 0 0 98%;
                        border-bottom:1px dashed #383838;
                        align-self:right;
                        padding-right:5px;
                        padding-left:5px;
                        padding-bottom:5px;
                        text-align:left;

                    }
                    #main .cha .fart {
                        width: 25%;
                        float:left;
                        padding-left:5px;
                        padding-right:5px;
                        padding-bottom:none;
                        
                  } 
                    #main .fart img {
                        width:100%;
                        
                    }

                    #main #textarea {
                        width:100%;           
                        display:flex;
                        flex-flow:row;
                        flex-wrap:wrap;
                        align-content: space-between;
                        padding-bottom:10px;
                    }



                    #main  #dos {
                      display:none;
                      grid-area:three;
                      overflow:scroll;
                      background:linear-gradient(#d3c7c0, #928383);
                      overflow-x:hidden;
                      height:75vh;
                     border:2px solid #000;
                    }



                    #main #buttons {
                        grid-area:links;
                        display:grid;
                        grid-template-columns: 1fr 1fr 1fr;
                        height:5vh;
                        gap:1vw;

                    }

                    #ricky {
                      font-family:'lucida console';
                      font-size:16px;
                      border: 1px dashed #000;
                      background:#fff;
                      font-weight:bold;             
                      
                    }
                    #ricky2 {
                      font-family:'lucida console';
                      font-size:16px;
                      border: 1px dashed #000;
                      background:#fff;
                        font-weight:bold; 
                    }

                    #ricky3 {
                      font-family:'lucida console';
                      font-size:16px;
                      border: 1px dashed #000;
                      background:#fff;
                        font-weight:bold;
                        line-height:5vh; 
                    }

                    
        #numbers {
          font-family: "Syne Mono", monospace;
          bottom:1vh;
          position:absolute; 
          left:10px;
          ;     

        }
         #numbers a{
          color:#6bda11;  

        }
         #numbers a:hover{
          color:#6bda11;
          letter-spacing:2px;
          transition:0.5s;  

        }
        
        
      

        #main #desmond {
            z-index:999;
            height:85vh;
            grid-area:two;
        }
            #main #desmond img {           
                height:85vh; 
            }

        
        .mari {
          max-height:100%;
          max-width:100%;
          transition:0.5s;
          
        }
        .mari:hover{
         transform: scale(1.5);
         z-index:999;
          
        }

         .modal {
                display: none; /* Hidden by default */
                position: fixed; /* Stay in place */
                z-index: 999; /* Sit on top */
                padding-top: 10px; /* 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;
                max-height:80%;

            }
            .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;
                  }
                    .modal-content, #caption {  
                        -webkit-animation-name: zoom;
                        -webkit-animation-duration: 0.6s;
                        animation-name: zoom;
                        animation-duration: 0.6s;
                }


                #caption {
                        margin: auto;
                        display: block;
                        width: 80%;
                        max-width: 700px;
                        text-align: center;
                        font-family:'lucida console';
                        font-size:16px;
                        color: #ccc;
                        padding: 10px;
                        }