/* Reset margins and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* General styles */
body, html {
    height: 100%;
    font-family: Arial, sans-serif;
    overflow-y: auto; /* Enables vertical scrolling */
    overflow-x: hidden; /* Prevents horizontal scrolling */
  
}


/* Background container */
#bg-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Set height to 100% of the viewport */
    z-index: -1;
    background-color: black; /* Keep background black */
    overflow-y: hidden; /* Hide vertical scrolling */
}

svg {
    width: 100%;
    height: 100vh; /* Ensure the SVG takes full height of the viewport */
    display: block; /* Remove any extra space below the SVG */
}

/* Content Container */
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 10px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.3);
  
}

/* Heading */
.h1 {
    font-size: 1.5em);
    font-weight: 300;
    letter-spacing: clamp(-1.75px, -0.25vw, -3.5px);
    position: relative;
    overflow: hidden;
    color:yellow;
    margin: 0;
}

/* Buttons Container */
.buttons-container {
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  
}

/* Row of Buttons */
.row {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    flex-wrap: wrap; /* Responsive design */
}

/* Button Style */
.button {
    width: 80px;
    height: 80px;
    background-color: rgba(255, 155, 235, 0.8);
    border-radius: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    margin: 10px;
    background-size: cover;
}

.button:hover {
    transform: scale(1.1);
}

.button img {
    width: 100%;
    height: 100%;
}
/* Background images for TV buttons */
#tv1 { background-image: url('https://yt3.googleusercontent.com/bJDd0TLwG0dXlTmaX9RvX1Ch99KMWU8tqpMIXu6W46dNfIS7gK3pC243M--uLOHgPaNKTaQF=s160-c-k-c0x00ffffff-no-rj'); }
#tv2 { background-image: url('https://yt3.googleusercontent.com/8eItmjbOfJwot8wd0-19KgtvF2ztf4np2qIVfJ1kMPv1ADi6wx9giU62B1j6xO0Ug2Idrqbncg=s160-c-k-c0x00ffffff-no-rj'); }
#tv3 { background-image: url('https://yt3.googleusercontent.com/-cXUtm6DRxOggCLXVRbsKbs8CVLYLR7Q1o4Qol35K644KIVJoMBrXw8clQncbGARwAyaCPVcFA=s160-c-k-c0x00ffffff-no-rj'); }
#tv4 { background-image: url('https://yt3.googleusercontent.com/ytc/AIdro_n3GwS5AiD5wcCQcacdBVIqedZEtVm4H1EsLlxB0li41mA=s160-c-k-c0x00ffffff-no-rj'); }
#tv5 { background-image: url('https://yt3.googleusercontent.com/ytc/AIdro_nNiHUlaF-60oiZqJHFF1N3uFek7UokY1i1OkmtOyW7gpQ=s160-c-k-c0x00ffffff-no-rj'); }
#tv6 { background-image: url('https://yt3.googleusercontent.com/hyWYE5APso23pPvnQmByf6GY0OIUT4d19PzdsjwTbe0e3azRctVKmVCeTDCoi0peOoRBxh0YAA=s160-c-k-c0x00ffffff-no-rj'); }
#tv7 { background-image: url('https://yt3.googleusercontent.com/ytc/AIdro_lUi_KZbnNr0IYcDoE-QXkcEwJHWNGcbce203fylbwYe90=s160-c-k-c0x00ffffff-no-rj'); }
#tv8 { background-image: url('https://yt3.googleusercontent.com/Bo2Sx7X7bngw3pQidvuiybuqcYljaizeJYRNmQitU584LW4wEZ494RwN8tpChNXEe3S0hzcvd9Y=s160-c-k-c0x00ffffff-no-rj'); }
#tv9 { background-image: url('https://yt3.googleusercontent.com/ytc/AIdro_mTP-Alm9ur8Msk_QNf5MUEGw9rYIPqlvmHOfUH_Sodu0M=s160-c-k-c0x00ffffff-no-rj'); }
#tv10 { background-image: url('https://yt3.googleusercontent.com/ytc/AIdro_n8C860__Egj6BLet8CWzVDUfniMJKqENCSjdIiwI_Zlec=s160-c-k-c0x00ffffff-no-rj'); }
#tv11 { background-image: url('https://yt3.googleusercontent.com/ytc/AIdro_noEGYn5NGuAElTdnJcp3vAZJYN5bM9ZDjFa7OfVxq2xw=s160-c-k-c0x00ffffff-no-rj'); }
#tv12 { background-image: url(''); }
/* Video and iFrame Player */

.tv-player {
    margin: 20px auto;
    max-width: 600px;
}

video, iframe {
    width: 100%;
    height: 315px;
    background-color: black;
    border: 1px solid #ccc;
    border-radius: 10px;
}


/* Footer Text */
footer {
    text-align: center;
    color: white;
    margin-top: 20px;
    font-size: 1rem;
}

a {
    color: #FFDF00;
    
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        
}
.marquee-container {
    width: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px 0;
}

marquee {
    color: #FFFF00; /* Neon yellow text for marquee */
    font-size: 16px;
}




/* Floating menu */
.floating-container {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 999;
}

/* Main circular image button */
#mainButton {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.3s ease;
}

#mainButton:hover {
  transform: scale(1.1);
}

.button-photo {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  border: 2px solid white;
}

/* Submenu base */
.submenu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  padding: 10px;
  border-radius: 10px;
  backdrop-filter: blur(6px);
  background-color: rgba(0, 0, 0, 0.2);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  opacity: 0;
}

/* When open */
.submenu.open {
  max-height: 500px;
  opacity: 1;
}

/* Submenu buttons with different colors */
.dropdownButton {
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-weight: 500;
  transition: background-color 0.3s;
}

/* Individual colors */
.btn1 { background-color: rgba(255, 99, 71, 0.8); }     /* Tomato */
.btn2 { background-color: rgba(60, 179, 113, 0.8); }    /* MediumSeaGreen */
.btn3 { background-color: rgba(65, 105, 225, 0.8); }    /* RoyalBlue */
.btn4 { background-color: rgba(255, 165, 0, 0.8); }     /* Orange */
.btn5 { background-color: rgba(138, 43, 226, 0.8); }    /* BlueViolet */
.btn6 { background-color: rgba(255, 20, 147, 0.8); }    /* DeepPink */
.btn7 { background-color: rgba(0, 206, 209, 0.8); }     /* DarkTurquoise */
.btn8 { background-color: rgba(154, 205, 50, 0.8); }    /* YellowGreen */
.btn9 { background-color: rgba(255, 105, 180, 0.8); }   /* HotPink */
.btn10 { background-color: rgba(70, 130, 180, 0.8); }   /* SteelBlue */

/* Hover effects */
.btn1:hover { background-color: rgba(255, 99, 71, 1); }
.btn2:hover { background-color: rgba(60, 179, 113, 1); }
.btn3:hover { background-color: rgba(65, 105, 225, 1); }
.btn4:hover { background-color: rgba(255, 165, 0, 1); }
.btn5:hover { background-color: rgba(138, 43, 226, 0.8); }    /* BlueViolet */
.btn6:hover { background-color: rgba(255, 20, 147, 0.8); }    /* DeepPink */
.btn7:hover { background-color: rgba(0, 206, 209, 0.8); }     /* DarkTurquoise */
.btn8:hover { background-color: rgba(154, 205, 50, 0.8); }    /* YellowGreen */
.btn9:hover { background-color: rgba(255, 105, 180, 0.8); }   /* HotPink */
.btn10:hover{ background-color: rgba(70, 130, 180, 0.8); }   /* SteelBlue */