/* ======================= */
/* BASE */
/* ======================= */

body{
margin:0;
background:black;
font-family:Arial;
}

/* ======================= */
/* CONTENEUR SITE */
/* ======================= */

.site{
position:relative;
width:100%;
max-width:1920px;
margin:auto;
}

/* ======================= */
/* IMAGE FOND */
/* ======================= */

.bg{
width:100%;
display:block;
pointer-events:none;
}

/* ======================= */
/* ZONES CLIQUABLES */
/* ======================= */

.zone{
position:absolute;
cursor:pointer;
transition:0.3s;
}

.zone:hover{
box-shadow:0 0 20px #00eaff;
}

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

.serveur{
top:41%;
left:18%;
width:9%;
height:4%;
}

.events{
top:41%;
left:28%;
width:12%;
height:4%;
}

.tribu{
top:41%;
left:40%;
width:9%;
height:4%;
}

.joueurs{
top:41%;
left:50%;
width:9%;
height:4%;
}

.bot{
top:41%;
left:61%;
width:7%;
height:4%;
}

.mod{
top:41%;
left:68%;
width:7%;
height:4%;
}

/* ======================= */
/* BOUTON REJOINDRE */
/* ======================= */

.rejoindre{
top:65%;
left:33%;
width:35%;
height:7%;
}

/* ======================= */
/* DISCORD */
/* ======================= */

.discord{
top:90%;
left:38%;
width:25%;
height:6%;
}

/* ========================= */
/* PAGE CONTENU */
/* ========================= */

.page{
color:white;
text-align:center;
background:#020617;
min-height:100vh;
padding-top:60px;
}

/* TITRE */

.page h1{
color:#00eaff;
text-shadow:0 0 10px #00eaff;
}

/* BLOCS */

.box{
background:#06142e;
padding:25px;
margin:20px auto;
width:700px;
border-radius:10px;
box-shadow:0 0 20px rgba(0,200,255,0.5);
}

/* ======================= */
/* BOUTON RETOUR */
/* ======================= */

.back{
display:inline-block;
margin-top:40px;
padding:12px 25px;
border:1px solid #00eaff;
color:#00eaff;
text-decoration:none;
border-radius:6px;
transition:0.3s;
}

.back:hover{
background:#00eaff;
color:black;
}

/* ======================= */
/* PAGE EVENEMENTS */
/* ======================= */

.events-page{
background:url("images/events-bg.jpg") center no-repeat;
background-size:cover;
min-height:100vh;
color:white;
padding-top:60px;
display:flex;
flex-direction:column;
align-items:center;
}

/* ======================= */
/* TITRE EVENEMENT */
/* ======================= */

.titre-event{
font-size:45px;
color:black;
text-align:center;
margin-top:30px;
margin-bottom:40px;
animation: lightning 1.5s infinite;
}

/* ======================= */
/* ANIMATION TITRE */
/* ======================= */

@keyframes lightning{

0%{
text-shadow:
0 0 5px #ff0000,
0 0 10px #ff0000,
0 0 20px #ff0000,
0 0 40px #ff0000;
}

25%{
text-shadow:
0 0 10px #ff0000,
0 0 20px #ff0000,
0 0 30px #ff0000,
0 0 60px #ff0000;
}

50%{
text-shadow:
0 0 5px #ff0000,
0 0 15px #ff0000,
0 0 35px #ff0000,
0 0 70px #ff0000;
}

75%{
text-shadow:
0 0 8px #ff0000,
0 0 25px #ff0000,
0 0 45px #ff0000,
0 0 80px #ff0000;
}

100%{
text-shadow:
0 0 5px #ff0000,
0 0 10px #ff0000,
0 0 20px #ff0000,
0 0 40px #ff0000;
}

}

/* ======================= */
/* LISTE EVENTS */
/* ======================= */

.events-list{
width:900px;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin:auto;
}

/* ======================= */
/* BOUTON EVENT */
/* ======================= */

.event{
background:black;
padding:12px;
text-align:center;
cursor:pointer;
border:1px solid #333;
transition:0.3s;
}

.event:hover{
background:#00eaff;
color:black;
transform:scale(1.05);
}

/* ======================= */
/* POPUP */
/* ======================= */

.popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.85);
display:none;
justify-content:center;
align-items:center;
z-index:1000;
}

/* ======================= */
/* CARTE EVENT */
/* ======================= */

.event-card{
background:#111;
padding:30px;
border-radius:10px;
max-width:600px;
width:90%;
text-align:center;
position:relative;
box-shadow:0 0 25px rgba(0,200,255,0.5);
}

/* IMAGE EVENT */

.event-image{
width:100%;
border-radius:10px;
margin-bottom:15px;
}

/* ======================= */
/* BOUTON FERMER */
/* ======================= */

.close{
position:absolute;
top:10px;
right:15px;
font-size:25px;
cursor:pointer;
color:white;
}

.close:hover{
color:#00eaff;
}

/* ======================= */
/* BOUTON RETOUR EVENT */
/* ======================= */

.retour{
position:fixed;
bottom:40px;
left:50%;
transform:translateX(-50%);
width:200px;
text-align:center;
background:black;
padding:12px;
color:white;
text-decoration:none;
border:1px solid #444;
transition:0.3s;
}

.retour:hover{
background:#00eaff;
color:black;
}

/* ======================= */
/* AUTH DISCORD */
/* ======================= */

.auth{
position:fixed;
top:20px;
right:30px;
z-index:9999;
text-align:right;
}

.auth button{
color:#00eaff;
background:black;
border:1px solid #00eaff;
padding:8px 14px;
border-radius:6px;
cursor:pointer;
}

.auth button:hover{
background:#00eaff;
color:black;
}

/* ======================= */
/* UTILISATEUR CONNECTE */
/* ======================= */

#user-info{
color:#00ff6a;
font-size:18px;
margin-top:5px;
}

/* avatar discord */

.avatar{
width:32px;
height:32px;
border-radius:50%;
vertical-align:middle;
margin-right:6px;
border:2px solid #00ff6a;
}

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

@media(max-width:900px){

.auth{
top:10px;
right:10px;
}

.zone{
transform:scale(1.2);
}

}