body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    cursor: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"%3E%3Ccircle cx="12" cy="12" r="10" fill="none" stroke="black" stroke-width="2" /%3E%3C/svg%3E') 12 12, auto;}

.bg-image {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    display: block;
}


#phone-container {
    position: fixed;
    bottom: -12vh;
    left: -7vw; 
    width: 65vw;
    height: 65vw;
    z-index: 25;
    cursor: grab; 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    mask-image: url('phone-mask.png');
    -webkit-mask-image: url('phone-mask.png');
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center bottom;
    -webkit-mask-position: center bottom;
}

#phone-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('phone.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
}

#mac-trigger-area {
    position: fixed;
    top: 0;
    right: 0;
    width: 30px; 
    height: 100%; 
    z-index: 30; 
}

#mac-container {
    position: fixed;
    top: 50%;
    right: 7%; 
    width: 80vw; 
    height: auto;
    transform: translate(100%, -50%);
    transition: transform 0.5s ease-in-out;
    z-index: 20; 
}


#mac-container.is-visible {
    transform: translate(10%, -50%);
}

#mac-image {
    width: 100%;
    height: auto;
    display: block; 
}

#letter-container {
    position: fixed; 
    top: 50vh;
    left: 48%;
    transform: translate(-50%, -50%); 
    z-index: 10; 
}

.letter-image {
    width: 30vw; 
    height: auto;
}

@media (max-width: 768px) {
    #phone-container {
        width: 85vw;
        height: 130vw; 
        left: 7.5vw;
        bottom: 10vw;
    }
}


#mobile-vhs-overlay {
    display: none;
  }
  
 
  @media (max-width: 768px) {
    
  
    #mobile-vhs-overlay {
      display: block; 
      position: fixed; 
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh; 
      
      background-image: url('VHS.png');
      background-size: cover; 
      background-position: center; 
      background-repeat: no-repeat;
  
      z-index: 9999;
    }

    body {
      overflow: hidden;
    }
  }