* {
    box-sizing: border-box;
}

body {
.menu {

display:none;

background:red;

color:white;

border:none;

padding:10px;

font-size:20px;

}



@media(max-width:700px){


.menu{

display:block;

}


.nav-links{

display:none;

}


}
section {

background:

radial-gradient(
circle,
rgba(255,0,0,.08),
transparent 60%
);

}
nav {

position:fixed;

top:0;
left:0;

width:100%;

display:flex;

justify-content:space-between;

align-items:center;

padding:15px 40px;

background:#050505;

border-bottom:2px solid red;

box-shadow:0 0 20px red;

z-index:1000;

}


nav a {

color:white;

text-decoration:none;

margin:15px;

font-weight:bold;

}


nav a:hover {

color:red;

}
    
    margin: 0;
    background:
    radial-gradient(circle at top, #330000, #050505 60%);
    color:white;
    font-family:Arial, Helvetica, sans-serif;
}


/* HERO */

.hero {
    height:100vh;

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

    background:
    linear-gradient(
    rgba(0,0,0,.7),
    rgba(0,0,0,.95)
    );

    border-bottom:3px solid red;

}


.hero h1 {

    font-size:100px;

    color:white;

    text-shadow:
    0 0 10px red,
    0 0 30px red,
    0 0 60px red;

}


.hero h2 {

    color:red;

    letter-spacing:5px;

}



.btn {

    background:#e00000;

    padding:15px 45px;

    border-radius:10px;

    color:white;

    text-decoration:none;

    font-weight:bold;

    box-shadow:
    0 0 15px red,
    0 0 40px red;

}





/* TITLES */

h2 {

    color:white;

    text-align:center;

    font-size:40px;

    text-shadow:
    0 0 15px red;

}




/* CARDS */

.cards {

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

}


.card {

    width:300px;

    background:

    linear-gradient(
    145deg,
    #1a0000,
    #050505
    );


    border:2px solid red;

    border-radius:20px;

    padding:25px;


    box-shadow:

    0 0 15px red,
    inset 0 0 20px rgba(255,0,0,.3);


}





/* ===== FC26 FORMATION ===== */


.fc-pitch {


    width:650px;

    max-width:95%;

    margin:auto;

    padding:40px;


    background:

    linear-gradient(
    180deg,
    rgba(255,0,0,.15),
    rgba(0,0,0,.95)
    );


    border:

    3px solid red;


    border-radius:30px;


    box-shadow:

    0 0 20px red,
    0 0 60px rgba(255,0,0,.5),
    inset 0 0 40px rgba(255,0,0,.25);


}




.line {


    display:flex;

    justify-content:center;

    align-items:center;

    margin:45px 0;


}





/* LAM RAM */

.two {

    justify-content:space-around;

}



/* LM RM */

.wide {

    justify-content:space-between;

}





/* DEFENCE */


.four {

    justify-content:space-between;

}





/* PLAYER BALLS */


.player {


    width:70px;

    height:70px;


    display:flex;

    align-items:center;

    justify-content:center;


    background:

    radial-gradient(
    circle,
    #ff0000,
    #500000 60%,
    #080000
    );


    border:

    3px solid white;


    border-radius:50%;


    font-size:13px;

    font-weight:bold;


    box-shadow:

    0 0 15px red,
    0 0 35px red;


    text-shadow:

    0 0 10px black;


}




.player:hover {


    transform:scale(1.15);

    box-shadow:

    0 0 30px white,
    0 0 60px red;


}




/* SECTIONS */


section {

    padding:70px 20px;

}




footer {

    background:#000;

    padding:30px;

    border-top:2px solid red;

    text-shadow:0 0 10px red;

}




@media(max-width:700px){

.hero h1{

font-size:60px;

}


.player{

width:55px;

height:55px;

font-size:11px;

.media {
    padding:70px 20px;
}


.gallery {

    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;

}


.gallery img {

    width:300px;
    height:180px;

    object-fit:cover;

    border-radius:20px;

    border:3px solid red;

    box-shadow:
    0 0 20px red,
    0 0 40px rgba(255,0,0,.5);

    transition:.3s;

}


.gallery img:hover {

    transform:scale(1.08);

    box-shadow:
    0 0 40px red;
.club-title {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

}

.club-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
}

.club-title h1 {
    margin: 0;
    line-height: 1.1;
}

.hero h2 {
    margin-top: 20px;
}

.hero p {
    margin-top: 10px;
}
.player-cards {

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:25px;

}



.fc-card {

    width:230px;
    height:330px;

    background:

    linear-gradient(
    145deg,
    #300000,
    #050505
    );


    border:3px solid red;

    border-radius:25px;

    padding:20px;


    position:relative;


    box-shadow:

    0 0 20px red,
    inset 0 0 30px rgba(255,0,0,.4);


    transition:.3s;

}



.fc-card:hover {

    transform:translateY(-15px) scale(1.05);


    box-shadow:

    0 0 40px red,
    0 0 80px red;

}



.card-badge {

    width:70px;

    height:70px;

    object-fit:contain;


    filter:

    drop-shadow(0 0 15px red);

}



.rating {

    position:absolute;

    top:20px;

    left:20px;


    font-size:45px;

    font-weight:bold;


    color:white;


    text-shadow:

    0 0 15px red;

}



.fc-card h3 {

    margin-top:80px;

    font-size:25px;

}



.position {

    color:red;

    font-weight:bold;

    font-size:20px;

html {
scroll-behavior:smooth;
}


/* NAVBAR */

nav {

position:fixed;

top:0;

left:0;

width:100%;

height:70px;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 40px;

background:#050505;

border-bottom:2px solid red;

box-shadow:0 0 20px red;

z-index:999;

}



.nav-logo {

font-size:30px;

font-weight:bold;

color:white;

text-shadow:0 0 15px red;

}



.nav-links a {

color:white;

text-decoration:none;

margin-left:25px;

font-weight:bold;

transition:.3s;

}



.nav-links a:hover {

color:red;

text-shadow:0 0 15px red;

}




/* NEWS CARDS */


#news .card {

min-height:180px;

}





/* FOOTER */


footer {

background:#020202;

border-top:2px solid red;

padding:40px;

box-shadow:0 -10px 30px rgba(255,0,0,.3);

}



footer h2 {

margin:0;


}

}
/* LOADING SCREEN */

.loader {

position:fixed;

top:0;
left:0;

width:100%;
height:100vh;

background:#050505;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

z-index:9999;


animation:hideLoader 3s forwards;

}



.loader img {

width:120px;

filter:
drop-shadow(0 0 20px red);

animation:pulse 1.5s infinite;

}



.loader h1 {

font-size:70px;

color:white;

text-shadow:
0 0 20px red;

}



@keyframes pulse {

50%{

transform:scale(1.1);

}

}



@keyframes hideLoader {

0%,80%{

opacity:1;

}

100%{

opacity:0;

visibility:hidden;

}
/* MOBILE NAV */

.menu {

display:none;

background:red;

color:white;

border:none;

border-radius:8px;

padding:10px 15px;

font-size:22px;

box-shadow:0 0 15px red;

}



@media(max-width:700px){


nav {

padding:0 20px;

height:65px;

}


.nav-logo {

font-size:24px;

}



.menu {

display:block;

}



.nav-links {

position:absolute;

top:65px;

left:0;

width:100%;


background:#050505;


border-bottom:2px solid red;


display:none;


flex-direction:column;


padding:20px;


box-shadow:0 0 25px red;

}



.nav-links a {

margin:15px 0;

font-size:18px;

}



.nav-links.show {

display:flex;

}




/* PHONE CARDS */


.cards,
.player-cards {

flex-direction:column;

align-items:center;

}



.card,
.fc-card {

width:90%;

max-width:330px;

}




/* PHONE FORMATION */


.fc-pitch {

width:95%;

padding:25px 10px;

}



.player {

width:50px;

height:50px;

font-size:11px;

}




/* HERO */


.hero h1 {

font-size:55px;

}



.hero h2 {

font-size:20px;

}



.club-badge {

width:60px;

height:60px;

}


}
}
}
}

}