html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            min-height: 100vh;
            overflow-x: hidden;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: black;
            background: url("image/backgroundmail2.png") no-repeat top center;
            background-size: 100% auto;
            background-attachment: scroll;
            position: relative;
            padding-bottom: 100px;
        }

       
        .toggle-button {
            position: fixed;
            top: 20px;
            right: 2%;
            width: 150px;
            height: 150px;
            cursor: pointer;
            z-index: 11;
            transition: transform 0.3s;
        }

        .toggle-button img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .toggle-button:hover {
            transform: rotate(40deg) scale(1.2);
        }

        
        #menu-toggle {
            display: none;
        }

        
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0);
            z-index: 9;
            transition: background-color 0.5s ease;
            pointer-events: none;
        }

        #menu-toggle:checked ~ .overlay {
            background-color: rgba(0, 0, 0, 0.5);
            pointer-events: all;
        }

        .menu-item {
            position: fixed;
            transform: scale(0) rotate(0);
            opacity: 0;
            transition: transform 0.5s ease, opacity 0.5s ease;
            z-index: 10;
        }

        .menu-item img {
            width: 380px;
            height: 380px;
            cursor: pointer;
            transition: transform 0.3s;
        }

        .menu-item img:hover {
            transform: rotate(10deg) scale(1.1);
        }

        #home { top: 50vh; left: 40vw; }
        #about { top: 30vh; left: 15vw; }
        #portfolio { top: 5vh; left: 35vw; }
        #contact { top: 20vh; left: 55vw; }

        #menu-toggle:checked ~ .menu-item {
            opacity: 1;
            transform: scale(1);
        }

       
        .social-media {
            position: absolute;
            bottom: 1%;
            left: 65%;
            display: flex;
            gap: 20px;
        }

        .social-media img {
            width: 120px;
            height: 120px;
            cursor: pointer;
            transition: transform 0.3s;
        }

        .social-media img:hover {
            transform: scale(1.1);
        }

      
        .moonmeteor {
            position: absolute;
            top: 2%;
            left: 22.5%;
            width: 25%;
            height: 25%;
            background: url('image/meteor.png') no-repeat center center;
            background-size: contain;
            transition: opacity 0.7s, transform 0.7s ease-in-out;
            transform-origin: center center;
        }

        .moonmeteor:hover {
            transform: rotate(360deg);
        }

           /* Volume button styling */
      #volumeButton {
        position: fixed;
        top: 30px; /* Adjust this for positioning */
        left: 30px; /* Adjust this for positioning */
        width: 100px; /* Size of the button */
        height: auto; /* Size of the button */
        cursor: pointer;
        z-index: 100; /* Ensures it stays on top */
        transition: transform 0.3s;
    }
    #volumeButton:hover {
      transform: rotate(20deg) scale(1.2);
  }