@font-face {
    font-family:"JosefinSans-Regular";
    src:url("../fonts/JosefinSans-Regular.ttf");
}

@font-face {
    font-family:"AbhayaLibre-Regular";
    src:url("../fonts/AbhayaLibre-Regular.ttf");
}

@font-face {
    font-family:"JosefinSans-Light";
    src:url("../fonts/JosefinSans-Light.ttf");
}

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

body {
    --color1: #000000;
    --color2: #ffffff;
    --color3: #FEEBB6;
    --color4: #E5E5E5;
    overflow-x: hidden !important;
}

.paragraph {
    font-family: "JosefinSans-Regular";
    font-size: 1.1rem;
    text-align: justify;
}

.title {
    font-family: "AbhayaLibre-Regular";
    font-size: 2.5rem;
}

.mega-title {
    font-family: "AbhayaLibre-Regular";
    font-size: 4rem;
}

.small-title {
    font-family: "JosefinSans-Regular";
    font-size: 1.3rem;
    color: var(--color1);
    font-weight: bold;
}

.mega-title {
    font-family: "JosefinSans-Regular";
    font-size: 3rem;
    font-weight: normal;
}

.underline {
    text-decoration: underline;
}

.button-normal-white {
    background-color: var(--color2);
    padding: 10px 20px 10px 20px;
    border: none;
    font-size: 1rem;
    color: var(--color5);
    font-family: "JosefinSans-Regular";
    text-align: center;
}

.button-normal-white:hover {
    background-color: var(--color3);
    cursor: pointer;
}

.button-normal-black {
    background-color: rgba(255, 255, 255, 0);
    padding: 10px 20px 10px 20px;
    border: solid 2px var(--color2);
    font-size: 1rem;
    color: var(--color2);
    font-family: "JosefinSans-Regular";
    text-align: center;
}

.button-normal-black:hover {
    background-color: var(--color2);
    color: var(--color1);
    cursor: pointer;
}

.button-normal-padding {
    padding: 10px 40px 10px 40px !important;
}

.button-normal-black2 {
    background-color: rgba(255, 255, 255, 0);
    padding: 17px 50px 17px 50px;
    border: solid 2px var(--color1);
    font-size: 1.5rem;
    color: var(--color1);
    font-family: "JosefinSans-Regular";
    text-align: center;
}

.button-normal-black2:hover {
    background-color: var(--color1);
    color: var(--color2);
    cursor: pointer;
}

.button-normal-black3 {
    background-color: var(--color1);
    padding: 17px 50px 17px 50px;
    border: solid 2px var(--color1);
    font-size: 1.5rem;
    color: var(--color2);
    font-family: "JosefinSans-Regular";
    text-align: center;
}

.button-normal-black3:hover {
    background-color: var(--color2);
    color: var(--color1);
    cursor: pointer;
}

/* ECRAN 2K */
@media screen and (min-width: 2500px) and (min-height: 1400px) {
    .button-normal-white {
        font-size: 2rem;
        padding: 10px 40px 10px 40px;
    }
    .button-normal-black {
        font-size: 2rem;
        padding: 10px 40px 10px 40px;
    }
    .mega-title {
        font-size: 7rem;
    }
    .mega-text {
        font-size: 2.2rem;
    }

    .paragraph {
        font-size: 1.8rem;
    }
    
    .title {
        font-size: 2.8rem;
    }
    
    .small-title {
        font-size: 2.1rem;
    }
    .button-normal-black2 {
        background-color: rgba(255, 255, 255, 0);
        padding: 17px 50px 17px 50px;
        border: solid 2px var(--color1);
        font-size: 2rem;
    }
    
    .button-normal-black2:hover {
        background-color: var(--color1);
        color: var(--color2);
        cursor: pointer;
    }

    .button-normal-black3 {
        padding: 17px 50px 17px 50px;
        font-size: 2rem;
    }
}

/* ECRAN 4K */
@media screen and (min-width: 3500px) and (min-height: 2000px) {
    .button-normal-white {
        font-size: 2.4rem;
        padding: 10px 40px 10px 40px;
    }
    .button-normal-black {
        font-size: 2.4rem;
        padding: 10px 40px 10px 40px;
    }
    .mega-title {
        font-size: 9rem;
    }
    .mega-text {
        font-size: 3rem;
    }
    .paragraph {
        font-size: 2.5rem;
    }
    
    .title {
        font-size: 4.3rem;
    }
    
    .small-title {
        font-size: 2.8rem;
    }
}

/* ECRAN +1920x1080 */
@media screen and (max-width: 1920px) and (max-height: 1080px) {
    .mega-title {
        font-size: 4.5rem;
    }
    .title {
        font-size: 2.5rem;
    }
    .small-title {
        font-size: 1.6rem;
    }
    .button-normal-white {
        font-size: 1.3rem;
        padding: 5px 20px 5px 20px;
    }
    .button-normal-black {
        font-size: 1.3rem;
        padding: 5px 20px 5px 20px;
    }
    .paragraph {
        font-family: "JosefinSans-Regular";
        font-size: 1.2rem;
    }
    
}

/* ECRAN 17 pouces large */
@media screen and (max-width: 1680px) and (max-height: 1100px) {
    .mega-title {
        font-size: 4.3rem;
    }
    .mega-text {
        font-size: 1.6rem;
    }
    .paragraph {
        font-size: 1.3rem;
    }
    .button-normal-white {
        font-size: 1.3rem;
    }
    .button-normal-black {
        font-size: 1.3rem;
    }
}

/* ECRAN 13 à 15 pouces standard */
@media screen and (max-width: 1400px) and (max-height: 1050px) {

}


/* TRES GRAND MOBILE 1050x1370 */
@media screen and (max-width: 1050px ) and (max-height: 1370px ) {
    .button-normal-white {
        padding: 5px 20px 5px 20px;
        font-size: 1.5rem;
    }
    .button-normal-black {
        padding: 5px 20px 5px 20px;
        font-size: 1.5rem;
    }
    .mega-title {
        font-size: 4rem;
    }
    .mega-text {
        font-size: 1.8rem;
    }
    .paragraph {
        font-size: 1.3rem;
    }
    
    .title {
        font-size: 1.8rem;
    }
    
    .small-title {
        font-size: 1.5rem;
    }
}

/* GRAND MOBILE 500x900 */
@media screen and (max-width: 500px ) and (max-height: 1000px ) {
    .mega-title {
        font-size: 3rem;
    }
    .mega-text {
        font-size: 1.5rem;
    }
    .button-home {
        font-size: 1.5rem;
        padding: 5px 50px 5px 50px;
    }
}

/* MOYEN petit 700 */
@media screen and (max-width: 400px ) and (max-height: 750px ) {
    .mega-title {
        font-size: 2rem;
    }
    .mega-text {
        font-size: 1.3rem;
    }
    .button-home-white {
        font-size: 1.3rem;
        padding: 5px 20px 5px 20px;
    }
    .button-home-black {
        font-size: 1.3rem;
        padding: 5px 20px 5px 20px;
    }
    .small-title {
        font-size: 1.2rem;
    }
    .button-normal-white {
        font-size: 1.2rem;
        padding: 5px 20px 5px 20px;
    }
    .button-normal-black {
        font-size: 1.2rem;
        padding: 5px 20px 5px 20px;
    }
}