@font-face {
    font-family: 'GoMono';
    src: url('fonts/Go-Mono.ttf');
}

@font-face {
    font-family: 'GoMono';
    src: url('fonts/Go-Mono-Bold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: 'GoMono';
    src: url('fonts/Go-Mono-Italic.ttf');
    font-style: italic;
}

@font-face {
    font-family: 'GoMono';
    src: url('fonts/Go-Mono-BoldItalic.ttf');
    font-weight: bold;
    font-style: italic;
}


body {
    margin: 0;
    padding: 0;
    background-image: url("images/desktop.png");
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    height: 100vh; 
    min-height: 100vh; /
}

.box-content { 
    font-family: 'GoMono'; 
    font-weight: normal; 
    font-style: normal; 
    font-size: 11pt;
    
 }

.box-open {
    position: absolute;
    top: 20px;
    left: 30px;
    cursor: pointer;
    width: 60px;
    height: auto;
}

.box-open img {
    width: 100%;
    height: 100%;
}

.thank-open {
    position: absolute;
    top: 500px;
    left: 30px;
    cursor: pointer;
    width: 60px;
    height: auto;
}

.thank-open img {
    width: 100%;
    height: 100%;
}

.intro-open {
    position: absolute;
    top: 620px;
    left:30px;
    cursor: pointer;
    width: 60px;
    height: auto;
}

.intro-open img {
    width: 100%;
    height: 100%;
}

.trash {
    position: absolute;
    top: 740px;
    left: 30px;
    cursor: pointer;
    width: 60px;
    height: auto;
}

.trash img {
    width: 100%;
    height: 100%;
}
.monster-open {
    position: absolute;
    top: 380px;
    left: 30px;
    cursor: pointer;
    width: 60px; 
    height: auto;
}

.monster-open img {
    width: 100%;
    height: 100%;
}

.casefile-open {
    position: absolute;
    top: 140px;
    left: 30px;
    cursor: pointer;
    width: 60px;
    height: auto;
}

.casefile-open img {
    width: 100%;
    height: 100%;
}

.notebox-open {
    position: absolute;
    top: 260px;
    left: 30px;
    cursor: pointer;
    width: 60px;
    height: auto;
}

.notebox-open img {
    width: 100%;
    height: 100%;
}

.close-button {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
}

 .resizable-box {
    position: absolute;
    border: 5px solid;
    border-color: white grey grey white;
    padding: 10px;
    background-color: lightgray;
    overflow: auto; 
    
}

.resizable-box#intro {
    top: 150px;
    left: 450px;
    width: 700px;
    height: 600px;
    padding: 30px;
}
.resizable-box#thankyou {
    top: 660px;
    left: 170px;
    width: 600px;
    height: 170px;
    display: none;
}
.resizable-box#casefile {
    top: 105px;
    left: 150px;
    width: 400px;
    height: 500px;
    display: none;
    
}

.resizable-box#notebox {
    top: 200px;
    left: 600px;
    width: 450px;
    height: 600px;
    display: none;
}

.resizable-box-header {
    background-color: lightgrey;
    padding: 5px;
    cursor: move;
    font-family: 'GoMono'; 
    font-weight: bold;
}

.fixed-box#box3 {
    position: absolute;
    top: 15px; 
    left: 950px; 
    width: 700px; 
    height: auto;
    overflow: hidden;
    display: none;
}

.fixed-box#box4 {
    position: absolute;
    top: 570px; 
    left: 1090px; 
    width: auto;  
    max-width: 300px;  
    height: auto; 
    overflow: hidden;
    display: none;
}

.fixed-box img {
    width: 100%;
    height: auto;   
    object-fit: cover;  
}

.fixed-box{
    border: 5px solid;
    border-color: white grey grey white;
    position: absolute;
    background-color: lightgray;
    overflow: hidden;
    max-width: 90vw; 
    max-height: 80vh;
}

.fixed-box-header {
    background-color: lightgray;
    padding: 5px;
    cursor: move;
    font-family: 'GoMono'; 
    font-weight: bold;
}

.fixed-box#box5 {
    position: absolute;
    top: 400px;  
    left: 1420px; 
    width: auto;
    max-width: 200px;
    height: auto;
    overflow: hidden;
    display: none;
}

.fixed-box#box5 img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

area {
    cursor: pointer;
  }

  .nophone{
    border: 5px solid;
    border-color: rgb(255, 150, 138) rgb(204, 67, 52) rgb(204, 67, 52) rgb(255, 150, 138);
    position: absolute;
    padding: 10px;
    background-color: tomato;
    color: white;
}

.nophone-header {
    background-color: tomato;
    padding: 5px;
    cursor: move;
    font-family: 'GoMono'; 
    font-weight: bold;
}

  @media (max-width: 1000px) {
    .nophone {
            display: show;
            left:160px;
            top:400px;
       }
       .nophone-header
         {
              display: show;
         }
    }
    @media (min-width: 1000px) {
        .nophone {
                display: none;
                left:1600px;
                top:180px;
           }
           .nophone-header
                {
                    display: none;
                }
        }

        @media (max-width: 2560px) {
            .resizable-box {
                max-width: 90vw;  
                max-height: 80vh; 
            }
        
            .resizable-box#intro {
                top: 120px;
                left: 400px;
                width: 600px; 
                height: 500px; 
            }
        
            .resizable-box#casefile {
                top: 90px;
                left: 120px;
                width: 350px; 
                height: 450px;
            }
        
            .resizable-box#notebox {
                top: 180px;
                left: 520px;
                width: 400px;
                height: 550px;
            }
        
            .fixed-box#box3 {
                left: 680px; 
                width: 700px; 
            }
        
            .fixed-box#box4 {
                left: 970px;
                max-width: 250px;
            }
        
            .fixed-box#box5 {
                left: 1260px;
                max-width: 180px;
            }
        }

        @media (max-width: 2560px) {
            .resizable-box, .fixed-box {
                max-width: 90vw;  
                max-height: 80vh; 
                left: min(80vw, 1200px); 
                top: min(70vh, 600px);
            }
        
            .fixed-box img {
                max-width: 100%; 
                height: auto;
            }
            
        }

        .toggle-item.open {
            display: block;
        }