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

html,
body {
     height: 100%;
     background-color: #000;
     font-family: sans-serif;
}

body {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     gap: 30px;
     position: relative;
     z-index: 1;
     font-family: "Protest Guerrilla", sans-serif;
}

video {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: -1;
}

#logo {
     margin-top: 40px;
     width: 25vw;
}

#logo img {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
          0 6px 20px rgba(0, 0, 0, 0.1);
}

h1 {
     color: aliceblue;
     font-family: "Protest Guerrilla", sans-serif;
     text-shadow: 1px 1px 1px rgb(167, 21, 207), 1px 1px 1px rgb(0, 0, 0);
}

#name {
     font-size: 45px;
     background: linear-gradient(90deg, #e600ff, #ee2f09);
     background-clip: text;
     color: transparent;
}

#va {
     background: linear-gradient(90deg, #e600ff, #ee2f09);
     background-clip: text;
     color: transparent;
}

#voice {
     width: 250px;
     margin-top: -60px;
     display: none;
}

#btn {
     width: 30%;
     background: linear-gradient(to right, rgb(136, 21, 207), rgb(201, 89, 41));
     padding: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     font-size: 20px;
     border-radius: 20px;
     color: white;
     font-size: 25px;
     cursor: pointer;
     font-weight: 100;
     border: none;
     transition: 0.5s;
     /* font-family: "Protest Guerrilla", sans-serif; */
     box-shadow: 2px 2px 10px rgb(167, 21, 207), 2px 2px 10px rgb(86, 50, 50);
}

#btn:hover {
     background: linear-gradient(to right, rgb(160, 121, 53), rgb(189, 7, 226));
     box-shadow: 2px 2px 10px rgb(37, 33, 38), 2px 2px 10px rgb(166, 28, 208);
     letter-spacing: 2px;
}

@media (max-width: 1024px) {
     #logo {
          width: 35vw;
     }

     #name {
          font-size: 6vw;
     }

     #btn {
          font-size: 4vw;
          width: 50%;
     }
}

/* Small Screens (Phones) */
@media (max-width: 600px) {
     #logo {
          width: 60vw;
     }

     #name {
          font-size: 8vw;
     }

     #btn {
          font-size: 5vw;
          width: 80%;
          padding: 8px 16px;
     }

     h1 {
          font-size: 20px;
          color: aliceblue;
          font-family: "Protest Guerrilla", sans-serif;
          text-shadow: 1px 1px 1px rgb(167, 21, 207), 1px 1px 1px rgb(0, 0, 0);
     }
}

/* Ultra Small Devices (Tiny Phones) */
@media (max-width: 360px) {
     #name {
          font-size: 9vw;
     }

     #btn {
          font-size: 6vw;
          padding: 6px 12px;
     }
}