@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

body{
    margin:0;
    font-family:'Poppins', sans-serif;
    background:
    linear-gradient(
    135deg,
    #020617,
    #0f172a,
    #1e293b
    );
    color:white;
    overflow-x:hidden;
}

/* ANIMATED BACKGROUND */
body::before{
    content:'';
    position:fixed;
    width:100%;
    height:100%;
    background-image:
    radial-gradient(#00ffcc 1px, transparent 1px),
    radial-gradient(#ff00ff 1px, transparent 1px);
    background-size:40px 40px;
    opacity:0.08;
    animation:bgMove 15s linear infinite;
    z-index:-1;
}

@keyframes bgMove{

    from{
        transform:translate(0,0);
    }

    to{
        transform:translate(-40px,-40px);
    }

}

/* HEADER */
header{
    text-align:center;
    padding:40px;
    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(12px);
    border-bottom:
    1px solid rgba(255,255,255,0.1);
    box-shadow:0 0 20px rgba(0,0,0,0.5);
}

header h1{
    font-size:45px;
    color:#00ffcc;
    text-shadow:0 0 20px #00ffcc;
}

header p{
    color:#cbd5e1;
}

/* NAVIGATION */
nav{
    text-align:center;
    padding:20px;
}

nav button{
    background:transparent;
    border:2px solid #00ffcc;
    color:#00ffcc;
    padding:12px 25px;
    margin:10px;
    border-radius:15px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
}

nav button:hover{
    background:#00ffcc;
    color:#020617;
    transform:translateY(-5px);
    box-shadow:0 0 20px #00ffcc;
}

/* PAGE */
.page{
    padding:20px;
}

.hidden{
    display:none;
}

/* BOX */
.box{
    width:75%;
    margin:30px auto;
    padding:35px;
    border-radius:25px;
    background:rgba(255,255,255,0.06);
    backdrop-filter:blur(15px);
    border:
    1px solid rgba(255,255,255,0.1);
    box-shadow:
    0 8px 30px rgba(0,0,0,0.5);
    transition:0.4s;
    position:relative;
    overflow:hidden;
}

.box::before{
    content:'';
    position:absolute;
    width:200px;
    height:200px;
    background:rgba(0,255,204,0.2);
    border-radius:50%;
    top:-100px;
    right:-100px;
}

.box:hover{
    transform:translateY(-8px);
    box-shadow:0 0 30px #00ffcc;
}

/* HERO */
.hero{
    text-align:center;
}

.hero h2{
    font-size:38px;
    color:#00ffcc;
    text-shadow:0 0 20px #00ffcc;
}

/* TITLE */
.title{
    text-align:center;
    font-size:40px;
}

/* EXERCISE BUTTONS */
.exercise-buttons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:20px;
    margin-top:30px;
    margin-bottom:30px;
}

.exercise-buttons button{
    width:200px;
    height:120px;
    border:none;
    border-radius:25px;
    background:
    linear-gradient(
    135deg,
    #00ffcc,
    #ff00ff
    );
    color:white;
    font-size:22px;
    font-weight:bold;
    cursor:pointer;
    transition:0.4s;
    box-shadow:
    0 0 20px rgba(255,0,255,0.5);
}

.exercise-buttons button:hover{
    transform:scale(1.08);
    box-shadow:0 0 40px #00ffcc;
}

/* GENERAL BUTTON */
button{
    background:
    linear-gradient(
    135deg,
    #00ffcc,
    #ff00ff
    );
    color:white;
    border:none;
    padding:12px 18px;
    border-radius:12px;
    cursor:pointer;
    transition:0.3s;
    font-weight:600;
}

button:hover{
    transform:scale(1.05);
    box-shadow:0 0 20px #00ffcc;
}

/* INPUTS */
input{
    background:#0f172a;
    border:1px solid #334155;
    color:white;
    padding:12px;
    border-radius:12px;
    margin:8px;
}

input:focus{
    outline:none;
    border:1px solid #00ffcc;
    box-shadow:0 0 10px #00ffcc;
}

/* LIST */
ul{
    padding:0;
}

ul li{
    list-style:none;
    background:
    rgba(255,255,255,0.08);
    margin:10px 0;
    padding:12px;
    border-radius:12px;
}

/* IMAGE */
img{
    border-radius:20px;
    border:2px solid #00ffcc;
    box-shadow:0 0 30px #00ffcc;
    transition:0.4s;
}

img:hover{
    transform:scale(1.05);
    box-shadow:0 0 50px #ff00ff;
}

/* TEXT */
.centerText{
    text-align:center;
    font-size:28px;
}

/* CHANGE BACKGROUND */
.bg-changed{
    background:
    linear-gradient(
    135deg,
    #120458,
    #29115b,
    #7b00ff,
    #ff00ff
    );
}

/* DARK MODE */
.dark-mode{
    background:
    linear-gradient(
    135deg,
    #000000,
    #020617,
    #0f172a
    );
    color:white;
}

.dark-mode header{
    background:rgba(0,0,0,0.5);
}

.dark-mode nav{
    background:rgba(0,0,0,0.3);
}

.dark-mode .box{
    background:
    rgba(255,255,255,0.04);
}

.dark-mode button{
    background:
    linear-gradient(
    135deg,
    #2563eb,
    #7c3aed
    );
}

.dark-mode input{
    background:#020617;
    color:white;
}