html {
    box-sizing: border-box;
    font-size: 62.5%; /* 1rem = 10px */
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    background-color: #091C11;
}

/* Header */

header {
    background-image: url('/images/background.webp');
    background-position: center;
    height: 40rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

/* Countdown */

#countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Arial', sans-serif;
    padding: 20px;
    border-radius: 10px;
    width: fit-content;
}

.time-segment {
    background-color: #00000084;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 0.5;
    padding: 1rem;
    margin: 0 5px;
    width: 15rem;
}

.time-number {
    font-family: 'Cormorant', 'serif';
    font-size: 6rem;
    color: #d98c27;
    font-weight: bold;
}

.time-label {
    font-family: 'Cormorant', 'serif';
    font-size: 2.5rem;
    margin-top: 2rem;
    color: #ffff;
    letter-spacing: 0.2rem;
}

.separator {
    font-family: 'Cormorant', 'serif';
    color: #ffff;
    font-weight: lighter;
    font-size: 5rem;
    margin: 0 10px;
}

@media (max-width: 500px) {

    header {
        background-image: url('/images/phoneBackground.webp');
        height: 45rem;
    }

    #countdown {
        margin-bottom: 9rem;
    }

    .time-segment {
        width: 7.5rem;
    }

    .time-number {
        font-size: 3.5rem;
    }

    .time-label {
        margin-top: 0.5rem;
        font-size: 1.5rem;
        letter-spacing: 0.1rem;
    }

    .separator {
        font-size: 3rem;
        margin: 0;
    }
}

/* Main */

.title {
    margin: 5rem 0;
    font-family: 'Cormorant', 'serif';
    font-size: 5rem;
    color: #ffff;
    letter-spacing: 0.4rem;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;  
}

.line-up {
    width: 80%;
    height: 50%;
}

.subtitle-container {
    display: flex;
    align-items: center;
}

.section-subtitle {
    font-family: 'Cormorant', 'serif';
    color: #ffff;
    font-size: 3rem;
    letter-spacing: 0.5rem;
}

hr {
    flex: 1; /* Permite que el hr ocupe el espacio disponible */
    border: 0;
    height: 0.15rem;
    background-color: #d98c27;
    margin: 0 20px; /* Espacio a los lados del hr */
}

@media (max-width: 500px) {
    .title {
        font-size: 2rem;
    }

    .section-subtitle {
        font-size: 2rem;
    }
}

/* Moving text */

.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    width: 100%;
}

.marquee {
    display: inline-block;
    animation: marquee 12s linear infinite;
}

.marquee p {
    margin-top: 1rem;
    color: #ffff;
    font-family: 'Cormorant', 'serif';
    font-size: 5rem;
    letter-spacing: 0.2rem;
    display: inline-block;
}

@keyframes marquee {
    0% { transform: translateX(150%); }
    100% { transform: translateX(-100%); }
}

@media (max-width: 500px) {
    .marquee p {
        margin-top: 0;
        font-size: 3.5rem;
    }
    
    @keyframes marquee {
    0% { transform: translateX(150%); }
    100% { transform: translateX(-100%); }
    }
    
}

/* Info */

.info {
    margin-top: 3rem;
    width: 80%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*Location*/  

.info-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 33.3%;
    margin-bottom: 1rem;
}

.info-text {
    font-family: 'Cormorant', 'serif';
    color: #ffff;
    text-align: center;
    font-weight: bold;
    font-size: 3rem;
    letter-spacing: 0.2rem;
    margin-top: -0.5rem;

}

.producer {
    margin-top: 3rem;
}

.logo {
    width: 15rem;
    height: 15rem;
}

@media (max-width: 500px) {
    section img {
        width: 7rem;
        height: 7rem;
    }

    .info-text {
        font-size: 2rem;
    }
}