/* ==========================
   VRS ESPORT RACING
   STYLE F1 PREMIUM
========================== */


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


body{

    background:#050505;
    color:white;
    overflow-x:hidden;

}



/* ==========================
        LOADER F1
========================== */


#loader{

    position:fixed;
    width:100%;
    height:100vh;
    background:#000;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    z-index:9999;

}


.loader-logo{

    font-size:90px;
    font-weight:900;
    color:#ff2d00;
    font-style:italic;

}


.loading-bar{

    width:300px;
    height:8px;
    background:#333;
    margin-top:30px;
    overflow:hidden;

}


.loading-bar span{

    display:block;
    height:100%;
    width:0%;
    background:#ff2d00;
    animation:loading 3s forwards;

}


@keyframes loading{

    100%{
        width:100%;
    }

}



/* ==========================
        HEADER
========================== */


header{

    position:fixed;
    top:0;
    width:100%;
    height:90px;

    background:rgba(0,0,0,0.85);

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

    padding:0 50px;

    z-index:1000;

    border-bottom:2px solid #ff2d00;

    backdrop-filter:blur(10px);

}



.logo img{

    width:70px;

}



nav{

    display:flex;
    gap:25px;

}


nav a{

    color:white;
    text-decoration:none;
    text-transform:uppercase;
    font-weight:bold;
    transition:.3s;

}


nav a:hover{

    color:#ff2d00;

}



#musicBtn{

    background:#ff2d00;
    border:none;
    color:white;

    width:45px;
    height:45px;

    border-radius:50%;

    cursor:pointer;

    font-size:20px;

}



/* ==========================
        HERO
========================== */


.hero{

    height:100vh;

    background:

    linear-gradient(
    rgba(0,0,0,.7),
    rgba(0,0,0,.9)
    ),

    url("../assets/background.jpg");

    background-size:cover;
    background-position:center;

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

    text-align:center;

}



.hero-content h1{


    font-size:90px;
    font-style:italic;

    color:#ff2d00;

    text-shadow:
    0 0 20px #ff2d00;


}



.hero-content h2{

    font-size:35px;

}



.hero-content p{

    margin-top:20px;

    font-size:20px;

}



/* ==========================
        BOUTONS
========================== */


.buttons{

    margin-top:40px;

}



.btn{

    display:inline-block;

    padding:15px 35px;

    margin:10px;

    border:2px solid white;

    color:white;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}



.btn:hover{

    background:white;

    color:black;

}



.btn.red{

    background:#ff2d00;

    border-color:#ff2d00;

}





/* ==========================
        CHAMPIONNAT
========================== */


.championship{

    padding:80px 10%;

    text-align:center;

}



.championship h2,
.ranking h2{

    font-size:40px;

    margin-bottom:40px;

    color:#ff2d00;

}




.cards{

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

}



.card{

    width:220px;

    padding:30px;

    background:#111;

    border:1px solid #333;

    transition:.3s;

}



.card:hover{

    transform:translateY(-10px);

    border-color:#ff2d00;

}



.card h3{

    font-size:50px;

    color:#ff2d00;

}





/* ==========================
        CLASSEMENT
========================== */


.ranking{

    padding:80px 10%;

    text-align:center;

}



table{

    width:80%;

    margin:auto;

    border-collapse:collapse;

}



th{

    background:#ff2d00;

}



td,th{

    padding:18px;

    border:1px solid #333;

}



tr:hover{

    background:#151515;

}





/* ==========================
        FOOTER
========================== */


footer{

    text-align:center;

    padding:30px;

    background:#000;

    border-top:1px solid #ff2d00;

}





/* ==========================
        MOBILE
========================== */


@media(max-width:900px){


header{

    padding:0 20px;

}


nav{

    display:none;

}


.hero-content h1{

    font-size:55px;

}


.hero-content h2{

    font-size:22px;

}


table{

    width:100%;

}


}
/* ==========================
        EQUIPES
========================== */

.teams{

padding:80px 10%;

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:40px;

}


.team-card{

width:320px;

background:#111;

padding:30px;

text-align:center;

border:2px solid #222;

transition:.3s;

}


.team-card:hover{

transform:translateY(-10px);

border-color:#ff2d00;

box-shadow:0 0 25px #ff2d00;

}


.team-card img{

width:120px;

margin-bottom:20px;

}


.team-card h2{

color:#ff2d00;

margin-bottom:15px;

}


.team-card ul{

list-style:none;

margin:20px 0;

}


.team-card li{

margin:8px 0;

}


.team-card span{

display:inline-block;

margin-top:20px;

padding:10px 20px;

background:#ff2d00;

font-weight:bold;

border-radius:30px;

}

/* ==========================
        CALENDRIER
========================== */


.calendar{

padding:80px 10%;

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}



.gp-card{

width:300px;

background:#111;

padding:30px;

border:2px solid #222;

text-align:center;

transition:.3s;

}



.gp-card:hover{

transform:translateY(-10px);

border-color:#ff2d00;

box-shadow:0 0 20px #ff2d00;

}



.gp-card h2{

color:#ff2d00;

margin-bottom:20px;

}



.gp-card p{

margin:10px;

}



.gp-card span{

display:inline-block;

margin-top:20px;

padding:10px 25px;

background:#ff2d00;

border-radius:20px;

font-weight:bold;

}

/* ==========================
        REGLEMENT
========================== */


.rules{

padding:80px 10%;

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}



.rule-card{

width:300px;

background:#111;

padding:30px;

border:2px solid #222;

}



.rule-card:hover{

border-color:#ff2d00;

box-shadow:0 0 20px #ff2d00;

}



.rule-card h2{

color:#ff2d00;

margin-bottom:20px;

}



.rule-card p{

margin:12px 0;

}



.points{

padding:60px 10%;

text-align:center;

}



.points h2{

color:#ff2d00;

font-size:40px;

margin-bottom:30px;

}

/* ==========================
        BOUTIQUE
========================== */


.shop-gallery{

padding:80px 10%;

display:flex;

justify-content:center;

gap:35px;

flex-wrap:wrap;

}



.shop-card{

width:300px;

background:#111;

border:2px solid #222;

padding:25px;

text-align:center;

transition:.3s;

}



.shop-card:hover{

transform:translateY(-10px);

border-color:#ff2d00;

box-shadow:0 0 25px #ff2d00;

}



.shop-card img{

width:100%;

height:220px;

object-fit:contain;

}



.shop-card h2{

color:#ff2d00;

margin:20px 0;

}



.shop-card h3{

font-size:25px;

margin:15px;

}



.shop-card button{

background:#ff2d00;

color:white;

border:none;

padding:12px 25px;

font-weight:bold;

cursor:pointer;

transition:.3s;

}



.shop-card button:hover{

background:white;

color:black;

}
/* ==========================
        CONTACT
========================== */


.contact-section{

padding:80px 10%;

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}



.contact-box{

width:300px;

background:#111;

padding:30px;

text-align:center;

border:2px solid #222;

transition:.3s;

}



.contact-box:hover{

border-color:#ff2d00;

transform:translateY(-10px);

box-shadow:0 0 20px #ff2d00;

}



.contact-box h2{

color:#ff2d00;

margin-bottom:20px;

}



.contact-box a{

display:inline-block;

margin-top:20px;

padding:12px 25px;

background:#ff2d00;

color:white;

text-decoration:none;

font-weight:bold;

}



.form-contact{

padding:60px 10%;

text-align:center;

}



.form-contact h2{

color:#ff2d00;

font-size:35px;

margin-bottom:30px;

}



.form-contact form{

max-width:500px;

margin:auto;

display:flex;

flex-direction:column;

gap:15px;

}



.form-contact input,
.form-contact textarea,
.form-contact select{

background:#111;

border:1px solid #333;

padding:15px;

color:white;

font-size:16px;

}



.form-contact textarea{

height:150px;

resize:none;

}



.form-contact button{

background:#ff2d00;

border:none;

padding:15px;

color:white;

font-weight:bold;

cursor:pointer;

}



.form-contact button:hover{

background:white;

color:black;

}

/* ==========================
        RESULTATS
========================== */


.race-results{

padding:80px 10%;

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}



.race-card{

width:350px;

background:#111;

padding:30px;

border:2px solid #222;

text-align:center;

transition:.3s;

}



.race-card:hover{

transform:translateY(-10px);

border-color:#ff2d00;

box-shadow:0 0 25px #ff2d00;

}



.race-card h2{

color:#ff2d00;

margin-bottom:20px;

}



.podium{

margin:25px 0;

}



.podium h3{

margin:15px;

}



.full-result{

padding:60px 10%;

text-align:center;

}



.full-result h2{

color:#ff2d00;

font-size:35px;

margin-bottom:30px;

}

/* ==========================
        ACCUEIL V2
========================== */


.countdown,
.news,
.top-drivers,
.gallery,
.social{

padding:80px 10%;

text-align:center;

}



.countdown h2,
.news h2,
.top-drivers h2,
.gallery h2,
.social h2{

color:#ff2d00;

font-size:40px;

margin-bottom:30px;

}




.timer{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}



.timer div{

background:#111;

padding:25px;

width:130px;

border:2px solid #222;

}



.timer span{

font-size:45px;

color:#ff2d00;

font-weight:bold;

}




.news-container{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}



.news-card{

background:#111;

width:300px;

padding:25px;

border:2px solid #222;

}



.news-card h3{

color:#ff2d00;

}




.top-box{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}



.top-box div{

background:#111;

padding:30px;

width:220px;

font-size:20px;

border:2px solid #222;

}




.gallery-grid{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}



.gallery-grid img{

width:300px;

height:180px;

object-fit:cover;

border:2px solid #333;

}



.social a{

display:inline-block;

margin:15px;

padding:15px 35px;

background:#ff2d00;

color:white;

text-decoration:none;

font-weight:bold;

}

/* ==========================
        CLASSEMENT
========================== */


.champ-ranking{

padding:70px 10%;

text-align:center;

}



.champ-ranking h2{

color:#ff2d00;

font-size:40px;

margin-bottom:35px;

}



.champ-ranking table{

width:90%;

margin:auto;

border-collapse:collapse;

background:#111;

}



.champ-ranking th{

background:#ff2d00;

color:white;

font-size:18px;

}



.champ-ranking td,
.champ-ranking th{

padding:18px;

border:1px solid #333;

}



.champ-ranking tr:hover{

background:#1c1c1c;

}




@media(max-width:700px){


.champ-ranking table{

font-size:13px;

width:100%;

}


.champ-ranking td,
.champ-ranking th{

padding:10px;

}


}

/* ==========================
        MENU MOBILE
========================== */


.menu-toggle{

display:none;

font-size:35px;

cursor:pointer;

color:#ff2d00;

}



@media(max-width:900px){


.menu-toggle{

display:block;

}



nav{

position:absolute;

top:90px;

left:0;

width:100%;

background:#050505;

display:none;

flex-direction:column;

text-align:center;

padding:20px 0;

border-bottom:2px solid #ff2d00;

}



nav a{

padding:15px;

}



nav.active{

display:flex;

}

}

/* ==========================
        PAGE 404
========================== */


.error-page{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;


background:

linear-gradient(
rgba(0,0,0,.8),
rgba(0,0,0,.95)
),

url("../assets/background.jpg");


background-size:cover;

}



.error-box{

background:#111;

padding:50px;

border:2px solid #ff2d00;

box-shadow:0 0 30px #ff2d00;

}



.error-box h1{

font-size:120px;

color:#ff2d00;

margin:0;

font-style:italic;

}



.error-box h2{

font-size:35px;

}



.error-box p{

margin:25px 0;

font-size:18px;

}



.error-box a{

display:inline-block;

background:#ff2d00;

color:white;

padding:15px 35px;

text-decoration:none;

font-weight:bold;

}



.error-box a:hover{

background:white;

color:black;

}