:root {

    --primary: #9B111E;
    --primary-dark: #6E0C16;
    --primary-light: #C71F37;

    --gold: #D4AF37;

    --bg: #120708;
    --card: #1E0A0D;

    --text: #FFFFFF;
    --gray: #C8C8C8;

}


* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


body {

    background: var(--bg);
    color: white;
    font-family: Inter, sans-serif;

}



.container {

    width: min(1200px, 92%);
    margin: auto;

}




.background {

    position: fixed;
    inset: 0;
    z-index: -1;

    background:

        radial-gradient(circle at top, #6E0C16, transparent 45%),

        linear-gradient(180deg,
            #120708,
            #080304);

}




header {

    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;

    background: rgba(18, 7, 8, .75);

    backdrop-filter: blur(15px);

}



header .container {

    height: 90px;

    display: flex;
    justify-content: space-between;
    align-items: center;

}


.logo {

    height: 60px;

}



.btn {

    background: linear-gradient(135deg,
            var(--primary),
            var(--primary-light));

    padding: 14px 30px;

    border-radius: 40px;

    color: white;

    text-decoration: none;

    font-weight: 700;

}







.hero {

    height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    position: relative;

    background:

        linear-gradient(rgba(0, 0, 0, .6),
            rgba(18, 7, 8, .95)),

        url("../assets/janeth.webp");

    background-size: cover;

    background-position: center;

}



.hero-content span {

    color: var(--gold);

    letter-spacing: 4px;

}



.hero h1 {

    font-family: Oswald;

    font-size: 100px;

}



.hero h2 {

    font-family: Poppins;

    font-size: 55px;

}



.hero p {

    max-width: 700px;

    margin: 25px auto;

    font-size: 20px;

    color: var(--gray);

}




.date {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 20px;

}



.date strong {

    font-family: Oswald;

    font-size: 130px;

    color: var(--gold);

}






section {

    padding: 90px 0;

}


h2 {

    text-align: center;

    font-size: 42px;

    margin-bottom: 40px;

}



.timer {

    display: flex;

    justify-content: center;

    gap: 20px;

}


.timer div {

    background: var(--card);

    padding: 25px;

    border-radius: 20px;

    border: 1px solid rgba(255, 255, 255, .1);

    text-align: center;

}



.timer b {

    display: block;

    font-size: 45px;

    color: var(--gold);

}



.grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

}



.card,
.artist {

    background: var(--card);

    padding: 35px;

    border-radius: 20px;

    border: 1px solid rgba(255, 255, 255, .08);

    text-align: center;

}



.card h3 {

    color: var(--gold);

    margin-bottom: 15px;

}





.artists-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

}


.artist {

    padding: 0;

    overflow: hidden;

}



.artist img {

    width: 100%;

    height: 350px;

    object-fit: cover;

}



.artist h3 {

    padding: 20px;

}




.history {

    background:

        linear-gradient(135deg,
            var(--primary-dark),
            var(--bg));

    text-align: center;

}



.history p {

    max-width: 800px;

    margin: auto;

    font-size: 20px;

    line-height: 1.8;

    color: var(--gray);

}




.contact {

    text-align: center;

}



.contact a {

    display: inline-block;

    margin-top: 20px;

    background: var(--primary);

    padding: 18px 40px;

    border-radius: 40px;

    color: white;

    text-decoration: none;

}



footer {

    padding: 30px;

    text-align: center;

    color: #aaa;

}




@media(max-width:800px) {


    .hero h1 {

        font-size: 55px;

    }


    .hero h2 {

        font-size: 35px;

    }


    .grid,
    .artists-grid {

        grid-template-columns: 1fr;

    }


    .timer {

        flex-wrap: wrap;

    }


    .date strong {

        font-size: 80px;

    }


}