@charset "UTF-8";


/* CSS Document */
@font-face {
	font-family: "Monigue";
	src: url('../../fonts/Monigue.woff2') format('woff2');
    src: url('../../fonts/Monigue.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
        .clock-container {
            position: relative;
            width: 100%;
            box-sizing: border-box;
            height: auto;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: left;
            align-items: center;
            overflow: hidden;
            margin-top: 0;
        }
        .content {
            position: relative;
            z-index: 3;
            text-align: center;
            width: 100%;
        }
        
        .episode-title {
            position: relative;
            display: inline-block;
            box-sizing: border-box;
            width: 30%;
            height: auto;
            font-size: 1.5vw;
            line-height: 1.5vw;
            font-weight: 600;
            letter-spacing: 1px;
            padding: 0 2%;
            transform: translateY(20px);
            opacity: 0;
            animation: fadeUp 1s ease forwards 0.6s;
            font-family: "Monigue";
            text-transform: uppercase;
            text-align: left;
            color: #FFDD03;
            float: left;
        }

        .season-info {
             position: relative;
            display: inline-block;
            box-sizing: border-box;
            width: 35%;
            height: auto;
            font-size: 1vw;
            line-height: 1.5vw;
            font-weight: 300;
            letter-spacing: 0;
            color: #153C2A;
            transform: translateY(20px);
            text-align: left;
            float: left;
            opacity: 0;
            animation: fadeUp 1s ease forwards 0.4s;
            padding-left: 2vw;
        }



        .countdown-container {
             position: relative;
            display: inline-block;
            box-sizing: border-box;
            width: 100%;
            height: auto;
            display: flex;
            padding-left: 2vw;
            justify-content: center;
            gap: .5vw;
            transform: translateY(20px);
            opacity: 0;
            animation: fadeUp 1s ease forwards 0.8s;
            margin-top: 2vw;
            
        }

        .countdown-block {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .time-value {
            font-size: 5vw;
            font-weight: normal;
            -webkit-background-clip: text;
            background-clip: text;
            color: #FFDD03;
            position: relative;
            width: 5vw;
            height: auto;
            display: block;
            align-items: center;
            justify-content: center;
            font-family: "Monigue";
        }

        .time-unit {
            font-size: 1vw;
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 2px;
           color: #FFF;
            font-family: "Monigue";
        }

        .time-separator {
            font-size: 5vw;
            align-self: center;
            color: #FFDD03;
            font-family: "Monigue";
            padding: 0 1vw 0 1vw;
        }

       

        .flip-animation {
            position: relative;
            overflow: hidden;
            height: 80px;
        }

        .flip-number-current,
        .flip-number-next {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            backface-visibility: hidden;
            transform-style: preserve-3d;
            transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
        }

        .flip-number-current {
            transform: rotateX(0deg);
        }

        .flip-number-next {
            transform: rotateX(-90deg);
        }

        .flip-animation.flip .flip-number-current {
            transform: rotateX(90deg);
        }

        .flip-animation.flip .flip-number-next {
            transform: rotateX(0deg);
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 0.2;
            }
            50% {
                transform: scale(1.1);
                opacity: 0.3;
            }
            100% {
                transform: scale(1);
                opacity: 0.2;
            }
}

        @media (max-width: 600px) {
            
             .clock-container{
            position: relative;
            width: 100%;
            box-sizing: border-box;
            height: auto;
            padding: 2vw;
            display: inline-block;
            flex-direction: column;
            justify-content: left;
            align-items: center;
            overflow: hidden;
                 margin-top: 3vw;
        }
            .episode-title {
                width: 100%;
                font-size: 6.5vw;
                line-height: 6.5vw;
                padding: 0 0 2vw 2vw;
                
            }
            
            .season-info {
                width: 100%;
                font-size: 3.7vw;
                line-height: 5.5vw;
                margin-bottom: 2.5vw;
            }
            
            .countdown-container {
                width: 100%; 
                gap: 0.5rem;
                width: 100%;
            }
            
            .time-value {
                font-size: 20vw;
                width: auto;
                height: auto;
                width: 50vw;
            }
            
            .time-unit {
                font-size: 5vw;
            }
            
            .time-separator {
                font-size: 5vw;
            }

            .notification-button {
                padding: 0.7rem 1.5rem;
                font-size: 0.9rem;
            }
        }