* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      width: 100%;
      height: 100%;
      font-family: 'Fira Mono', monospace;
      overflow: hidden;
      background-image: url("Elements/Layer4.png");
      background-size: cover;
      background-repeat: no-repeat;
    } 

    .main-wrapper {
      position: relative;
      width: 100vw;
      height: 100vh;
    }

    .main-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    /* .window-controls, .popup-controls {
      position: absolute;
      display: flex;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      z-index: 10;
    }

    .main-wrapper:hover .window-controls,
    .main-wrapper:hover .popup-controls {
      opacity: 1;
      pointer-events: auto;
    }

    .window-controls {
      top: 9%;
      right: 9%;
      gap: 1.5vw;
    }

    .popup-controls {
      top: 57.5%;
      left: 88%;
      transform: translate(-50%, -50%);
    }

    .control-btn,
    .popup-close {
      width: 18px;
      height: 18px;
      cursor: pointer;
    } */

    .sunflower-rotate {
      position: absolute;
      top: 48%;
      left: 15%;
      width: 8%;
      transition: transform 0.6s ease-in-out;
      z-index: 5;
    }

    .sunflower-rotate:hover {
      transform: rotate(180deg);
    }

    .yes-button {
      position: absolute;
      bottom: 12.5%;
      left: 55%;
      width: 10%;
      cursor: pointer;
      z-index: 5;
    }

    .nope-wrapper {
      position: absolute;
      bottom: 8%;
      right: 18.8%;
      width: 10%;
      height: auto;
      z-index: 5;
    }

    .nope-button {
      width: 100%;
      transition: opacity 0.3s ease;
    }

    .nope-wrapper:hover .nope-button {
      opacity: 0;
    }

    #mini {
      width: 20px;
      height: 5px;
      position: absolute;
      top: 40%;
      right: 155%;
    }

    .rainbow-left {
      position: absolute;
      top: 3%;
      left: 0;
      width: 4vw;
      z-index: 4;
    }

    .flower-right {
      position: absolute;
      top: 22%;
      right: 0;
      width: 6vw;
      z-index: 4;
    }

    @media screen and (max-width: 768px) {
      .yes-button, .nope-wrapper {
        width: 20vw;
      }

      .window-controls {
        right: 5%;
      }

      .popup-controls {
        left: 85%;
      }

      .flower-right {
        width: 12vw;
      }

      .sunflower-rotate {
        width: 15vw;
      }
    }