/*
Version: 1
*/
@font-face {
    font-family: CarterOne;
    src: url("../fonts/CarterOneRegular.ttf") format("truetype");
}

@font-face {
    font-family: Quicksand;
    src: url("../fonts/QuicksandVariableFont.ttf") format("truetype");
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
    margin:0;
    padding:0;
}

:root{
    --color-pink: #cb66a4;
    --color-white: #FFF;
    --color-blue: #0d2dbf;
    --color-pink-dark: #a3467f;

}


#header {
    background-color: var(--color-pink);
}

#logotop {
    height:200px;
    margin:30px 30px 15px 30px;
}

h1 {
    text-transform: uppercase;
    padding-bottom:15px;
    color: var(--color-white);
}

h2 {
    margin:15px 15px 15px 0;
    font-size:20px;
    color: var(--color-pink-dark);
    padding:0 30px 0 30px;
}

h3 {
    margin:15px;
    color: var(--color-blue);
}

#content {
    background-color: var(--color-white);
    color: var(--color-pink);
    padding:15px;
}

#logos img {
    height:70px;
    margin:15px;
}

#contenu {
    text-align:left;
    max-width:1100px;
    margin:auto;
    font-weight: 650;
    padding:15px;
}

#contenu p span {
    color: var(--color-pink-dark);
    font-size:14px;
}

#content p {
    margin:30px;
}

#contact, #contact-mobile  {
    text-align: center;
    color: var(--color-blue);
}

#contact-mobile {
    display: none;
}


body {
    text-align:center;
    font-family: Quicksand, serif;
    background-color: var(--color-pink);
}

footer {
    color: var(--color-white);
    padding:20px 20px 40px 20px;
}

button {
    background-color: var(--color-white);
    border:none;
    padding:20px;
    border-radius: 10px;
    margin:20px;
    cursor: pointer;
    font-weight: bold;
}


@media screen and (min-width: 381px) and (max-width: 430px) {

    #logotop {
        height:150px;
    }

    h1 {
        font-size: 22px;
    }

}

@media screen and (min-width: 0px) and (max-width: 380px) {

    #logotop {
        height:120px;
    }

    #contact {
        display: none;
    }

    #contact-mobile {
        display: block;
    }

    h1 {
        font-size: 20px;
    }

    h2 {
        font-size: 18px;
    }

}

@media screen and (min-width: 0px) and (max-width: 320px) {

    #logos img {
        height:50px;
    }

}