* {
    margin: 0px;
    padding: 0px;

    box-sizing: border-box;

    font-size: 16px;
    font-family: "Poppins", sans-serif;
}

body { 
    min-height: 100vh;
    background: #F6F6F6;
}

:root {
    --hei-hd: 80px;
    --fs-hd: 1.5rem;
    --is-hd: 60px;

    --fs-h3: 4rem;
    --fs-h4: 1.75rem;
    --fs-body: 1.25rem;
    --fs-sbody: .8rem;

    --fs-recenzii_1: 1.75rem;
    --fs-recenzii_2: 1.25rem;
    
    --vs-1: 600px;
    --vs-2: 400px;
    --vs-courses: 320px;

    --is-facts: 200px;
    --is-recenzii: 80px;
    --is-account: 172px;

    --hei-pasi: 300px;

    --wid-avantaje: 240px;
    --wid-avantaje-2: 900px;
    --wid-pasi: 380px;
    --wid-despre: 440px;
    --wid-account-box: 580px;
    --wid-admin-box: 600px;
    --wid-account-change-button: 264px;

    --space-xbig: 120px;
    --space-big: 80px;
    --space-xlarge: 120;
    --space-large: 80px;
    --space-medium: 40px;
    --space-small: 20px;
    --space-xsmall: 10px;

    
    --wid-forms: 480px;
    --wid-forms-signup-input: 156px;
    --wid-forms-delete-button: 140px;
    --is-forms-profile-picture: 200px;
    --fs-forms-title: 2.5rem;
    --fs-forms-input: 1.5rem;
    --fs-forms-smaller: 1.25rem;
}

.i_big {
    display: block;
}
.i_medium {
    display: none;
}
.i_small {
    display: none;
}





















@media (max-width: 854px) {
    :root {
        --fs-h3: 3rem;
        --fs-h4: 1.5rem;
        --fs-body: 1rem;
        --fs-sbody: .75rem;
    
        --fs-recenzii_1: 1.5rem;
        --fs-recenzii_2: 1rem;

        --vs-1: 480px;
        --vs-2: 320px;

        --is-facts: 160px;
        --is-recenzii: 50px;
       
        --hei-pasi: 260px;

        --wid-pasi: 280px;
    }

    .hideOnMobile {
        display: none;
    }
    .menu_button {
        display: block;
    }
    .footer {
        flex-direction: column;
    }

    .i_big {
        display: none;
    }
    .i_medium {
        display: block;
    }
    .i_small {
        display: none;
    }
}



@media (max-width: 600px) {
    :root {
        --hei-hd: 60px;
        --fs-hd: 1rem;
        --is-hd: 45px;

        --fs-h3: 2.5rem;
        --fs-h4: 1.25rem;
        --fs-body: 1rem;
        --fs-sbody: .75rem;

        --fs-recenzii_1: 1.25rem;
        --fs-recenzii_2: 1rem;
    
        --vs-1: 320px;
        --vs-2: 280px;
        --vs-courses: 100%;


        --is-recenzii: 50px;
        --is-account: 160px;
        
        --hei-pasi: 240px;

        --wid-pasi: 280px;
        --wid-avantaje: 150px;
        --wid-account-box: 96%;
        --wid-admin-box: 96%;
        --wid-account-change-button: 100%;

        --space-xbig: 90px;
        --space-big: 60px;
        --space-xlarge: 90;
        --space-large: 60px;
        --space-medium: 30px;
        --space-small: 15px;
        --space-xsmall: 7.5px; 

        --wid-forms: 100%;
        --wid-forms-signup-input: 96px;
        --wid-forms-delete-button: 100px;
        --is-forms-profile-picture: 160px;
        --fs-forms-title: 2rem;
        --fs-forms-input: 1rem;
        --fs-forms-smaller: 1rem;
    }

    .sidebar {
        width: 100%;
    }
    .i_big {
        display: none;
    }
    .i_medium {
        display: block;
    }
    .i_small {
        display: none;
    }
    .flex_1 {
        flex-direction: column;
        align-items: center;
    }
}













/* NEW ANIMATIONS */

.animation-1-0 {
    opacity: 0;
    filter: blur(5px);
    transform: scale(90%);
    transition: all 1s;
}
.animation-1-1 {
    opacity: 1;
    filter: blur(0px);
    transform: scale(100%);
}




/* OLD ANIMATIONS */

.animate_b {
    opacity: 0;
    filter: blur(5px);
    transform: scale(90%);
    transition: all 1s;
}
.animate_a {
    opacity: 1;
    filter: blur(0px);
    transform: scale(100%);
}



.animate_b.facts_elem {
    transform: translateX(-100%);  
    transition: all 1s;
}
.animate_a.facts_elem {
    transform: translateX(0);
}

.animate_b.avantaje_elem {
    transform: translateX(100%);
    transition: all 1s;
}
.animate_a.avantaje_elem {
    transform: translateX(0);
}

.animate_b.recenzii_elem {
    transform: translateX(-100%);
    transition: all 1s;
}
.animate_a.recenzii_elem {
    transform: translateX(0);
}

.animate_b.pasi_elem {
    transform: translateX(100%);
    transition: all 1s;
}
.animate_a.pasi_elem {
    transform: translateX(0);
}

.animate_b.echipa_elem {
    transform: translateX(100%);
    transition: all 1s;
}
.animate_a.echipa_elem {
    transform: translateX(0);
}













@media(prefers-reduced-motion) {
    .animate_b {
        transition: none;
    }
    .animate_b.avantaje_elem {
        transition: none;
    }
    .animate_b.facts_elem {
        transition: none;
    }
    .animate_b.pasi_elem {
        transition: none;
    }
    .animate_b.recenzii_elem {
        transition: none;
    }
    .animate_b.echipa_elem {
        transition: none;
    }
}