* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Calibri, sans-serif;
        }

        body {
            height: 100svh;
            overflow: hidden;
        }

        .homepageContainer {
            width: 100%;
            height: 100svh;
            position: relative;
            overflow: hidden;           
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            /* background-image: url('../img/bg01.jpg'); */
            padding-bottom: max(30px, env(safe-area-inset-bottom));
        }

        .homepageContainer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: inherit;
            filter: grayscale(100%);
            z-index: 0;
        }

        .glassContainer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur();
            z-index: 1;
        }

        .logoContainer {
            width: 79%;
            z-index: 2; 
        }   

        .logo {
            width: 100%;
            height: auto;
            filter: drop-shadow(1px 1px 15px rgba(0, 0, 0, 1));
            z-index: 2;
        }

        .social-icons {
            display: flex;
            gap: 20px;
            z-index: 10;
            margin-bottom: max(30px, env(safe-area-inset-bottom));
            padding-bottom: 10px;
        }

        .logoContainer {
            position: relative;
            z-index: 2;
        }

        .social-icons a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            color: white;
            text-decoration: none;
            font-size: 24px;
            transition: all 0.3s ease;
        }

        .social-icons a:hover {
            transform: scale(1.2);
        }

        .tagline {
    
            color: #FFC900;
            font-size: 26px;
            text-align: center;
            max-width: 80%;
            font-weight: 300;
            font-weight: bold;
            filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 1));   
            margin: 20px;   
            z-index: 10;  
        }

        .homepageInfo {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex-grow: 3;
            z-index: 10;
            width: 100%;
        }


        .liveContainer{
            
            color: white;
            display: flex;
            align-items: stretch;
            justify-content: center;
           
            z-index: 10;
            font-size: 18px;
            border-radius: 10px;
            margin-top: 20px;
            overflow: hidden;
            line-height: 1.4;
        }

        .liveRotatetText {
            
            animation: heartbeat 2s ease-in-out infinite;
       

            display: flex;
            align-items: center;
            justify-content: center;
            padding: 4px;
            writing-mode: vertical-lr;
            transform: rotate(180deg);
        }

            @keyframes heartbeat {
                0%, 100% {
                    /* transform: scale(1) rotate(180deg); */
                    opacity: 1;
                }
                50% {
                    /* transform: scale(1) rotate(180deg); */
                    opacity: 0.2;
                }
            }        


   

        .liveIndicator {
            background-color: red;
            color: white;
            padding: 8px 0px 6px 6px;
            font-weight: bold;
            font-size: 15px;
            /* border-right: 4px dotted white; */
            display: flex;
            align-items: center;
        }


.stamp1 {
    width: 5px;
    position: relative;
    background-color: red;
    background: radial-gradient(circle 2px, #0000 98%, red 100%);
    background-size: 9px 5px;
}     

.stamp2 {
    width: 5px;
    position: relative;
    background-color: rgba(23, 23, 23, 0.788);
    background: radial-gradient(circle 2px, #0000 98%, rgba(23, 23, 23, 0.788) 100%);
    background-size: 11px 5px;
    transform: scale(-1, 1);
}


        .liveInfo {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 13px 33px;
            background-color: rgba(23, 23, 23, 0.788);
        }

        .microphone {
          fill: white;
          width: 18px;
          margin-bottom: 8px;
          filter: brightness(0) invert(1);
        }

        @media (max-width: 768px) {
            .logo {
            }

            .social-icons {
                gap: 30px; 
                margin-bottom: 15px;
            }
            .social-icons a {
                width: 60px;
                height: 60px;   
            }            
            .tagline {
                max-width: 90%;
                font-size: 16px;
                margin: 10px;
            }
            .liveContainer {
                font-size: 14px;
            }
        }

        @media (max-width: 480px) {
            .logo {
            }

            .social-icons {
                gap: 30px; 
                margin-bottom: 15px;
            }

            .social-icons a {
                width: 55px;
                height: 55px;
            }

            .tagline {
                max-width: 90%;
                font-size: 16px;
            }
        }

        /* iOS Landscape orientation - adjust logo width */
        @media (max-height: 500px) and (orientation: landscape) {
            .logoContainer {
                width: 50%;
            }

            .social-icons {
                gap: 15px;
                margin-bottom: 10px;
                padding-bottom: 5px;
            }

            .social-icons a {
                width: 40px;
                height: 40px;
            }

            .tagline {
                font-size: 16px;
                margin: 10px;
            }

            .liveContainer {
                font-size: 12px;
            }
        }

        /* iPad and larger landscape */
        @media (min-height: 500px) and (max-height: 800px) and (orientation: landscape) {
            .logoContainer {
                width: 60%;
            }
        }