body {
        background-color: black;
    }

    /* POPUP STYLES */
    .popup-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1000;
    }

    .popup-dialog {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #c0c0c0;
        border: 2px outset #c0c0c0;
        font-family: 'MS Sans Serif', sans-serif;
        font-size: 11px;
    }

    .popup-titlebar {
        background: linear-gradient(90deg, #0054e3 0%, #4b9cdb 100%);
        color: white;
        padding: 2px 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: bold;
        font-size: 11px;
    }

    .popup-close {
        background: #8b8b8b;
        border: 1px outset #c0c0c0;
        width: 16px;
        height: 14px;
        cursor: pointer;
        font-size: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }

    .popup-close:active {
        border: 1px inset #c0c0c0;
    }

    .popup-close:hover {
        background: #d4d0c8;
    }


    .popup-content {
        padding: 16px;
        display: flex;
        flex-direction: row-reverse;
        gap: 12px;
    }

    .popup-buttons {
        padding: 12px 16px 16px;
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }

    .popup-button {
        background: #8b8b8b;
        border: 1px outset #c0c0c0;
        padding: 4px 16px;
        font-size: 11px;
        font-family: 'MS Sans Serif', sans-serif;
        cursor: pointer;
        min-width: 75px;
    }

    .popup-button:active {
        border: 1px inset #c0c0c0;
    }

    .popup-button:hover {
        background: #d4d0c8;
    }


    /* CLICKABLE REGION CSS */
    .clickable-region {
      position: absolute;
      background-color: transparent;
      cursor: grab;
      transition: background-color 0.2s ease;
      z-index: 10;
    }
    
    .clickable-region:hover {
      cursor: grabbing;
    }
  
    .region-cup {
      left: 18.5%;
      top: 56%;
      width: 10%;
      height: 20%;
    }
    
    .region-computer {
      left: 41%;
      top: 25%;
      width: 20%;
      height: 30%;
    }
    
    .region-keyboard-down {
      left: 64.2%;
      top: 87.7%;
      width: 2.5%;
      height: 5%;
    }
    
    .region-keyboard-up {
      left: 64.8%;
      top: 81.8%;
      width: 2.5%;
      height: 5%;
    }

    .region-keyboard-enter {
      left: 70%;
      top: 89.5%;
      width: 8%;
      height: 5%;
    }

    /* NORMAL CSS */
    .container-box{
        display: flex;
        flex-direction: column;
        margin:0;
        gap: 10px;
        padding-bottom: 10px;
    }

    .image-box{
        border: 2px solid;
        border-color: rgb(97, 132, 92);
        position: relative;
        cursor: pointer;
    }
    
    .top-row {
      display: flex;
      width: 100%;
      max-width: 1920px;
    }

    .top-row img:first-child {
      width: 36.46%;
    }

    .top-row img:last-child {
      width: 63.54%;
    }

    .top-row img,
    .bottom-row img {
      height: auto;
      display: block;
    }

    .bottom-row {
      width: 100%;
      max-width: 1920px;
    }

    .bottom-row img {
      width: 100%;
    }

    .text-box{
     display: flex;
     text-align: center;
     justify-content: space-between;
    }

    .links-box {
      display: flex;
      text-align: center;
    }

    .social-icon {
      width: 20px;
      height: 20px;
    }
    
    .social-links a{
      text-decoration: none;
      color: inherit;
    }

    .text-box h3 {
        color: white;
        margin:5px;
        font-family: 'Courier New', Courier, monospace;
    }
    
    .text-box p {
        color: white;
        font-family: 'Courier New', Courier, monospace;
    }

    .speaker-icon {
      width: 30px;
      height: 30px;
      cursor: pointer;
      transition: opacity 0.3s ease;
    }

    .speaker-icon:hover {
      opacity: 0.7;
    }

    .speaker-icon img {
      width: 100%;
      height: 100%;
      filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
    }