/* styles communs */

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

@font-face
{
    font-family: "Metropolis";
    src: url("../fonts/Metropolis-Bold.woff2");
}

@font-face
{
    font-family: "KG Always A Good Time";
    src: url("../fonts/KG_Always_A_Good_Time.woff2");
}

/* réinitialiser les styles */

html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

html
{
    background: url("../images/background.jpg") top center no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

body
{
    all: unset;

    font-family: "Poppins";
    user-select: none;
}

/* paliers de tailles */

h1
{
    margin-bottom: 1rem;

    font-family: "KG Always A Good Time";
    font-size: 2.2rem;
    color: #92223A;
}

*+h1
{
    margin-top: 2rem;
}

h2
{
    margin-bottom: 1rem;

    font-family: "KG Always A Good Time";
    font-size: 1.8rem;
    color: rgb(0, 123, 206);
}

*+h2
{
    margin-top: 1.5rem;
}

h3
{
    margin-bottom: 1rem;

    font-family: "KG Always A Good Time";
    font-size: 1.4rem;
    color: black;
}

*+h3
{
    margin-top: 1rem;
}

h4
{
    margin-bottom: 1rem;

    font-family: "KG Always A Good Time";
    font-size: 1.2rem;
    color: black;
}

*+h4
{
    margin-top: 0.9rem;
}

p
{
    font-size: 1.1rem;

    text-align: justify;
}

/* styles génériques */

.bouton-couleur
{
    padding: 0.5rem;

    color: white;
    text-decoration: none;
    background-color: #92223A;
    border-radius: 2em;

    transition: 1s;
}

.bouton-couleur:hover
{
    color: #92223A;
    text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff; /* pour faire le contour en blanc (pas de border car ça ferait le tour de la box) */

    transform: scale(1.1);
    transition: 1s;
}

.section
{
    padding: 2rem 20vw 2rem 20vw;
}

.section.opaque
{
    background-color: white;
    border-radius: 1rem; /* bords arrondis */
}

/* styles répétés */

#top-nav-container
{
    display: flex;
    justify-content: space-between;
    position: fixed;

    width: 100%;
    background-color: #92223A;
    border-radius: 0 0 1rem 1rem; /* bords arrondis */
}

#top-nav-container > ul
{
    display: flex;
}

#top-nav-container > ul > li > a
{
    display: block;
    padding: 1.5rem;

    font-family: "Metropolis";
    font-size: 1.5rem;
    color: white;
    text-decoration: none;

    transition: 1s;
}

#top-nav-container > ul > li > a:hover
{
    color: #92223A;
    text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff; /* pour faire le contour en blanc (pas de border car ça ferait le tour de la box) */

    transition: 1s;
}

#logo-header
{
    padding: 15vh 0 15vh 0;

    text-align: center;
}

footer
{
    padding: 2rem 20vw 2rem 20vw;

    background-color: #92223A;
    border-radius: 1rem 1rem 0 0;
}

@media screen and (max-width: 990px)
{
    .section, footer
    {
        padding: 2rem;
    }
}