/*===== GOOGLE FONTS =====*/
@import url('https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@100;300;400;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{

    /*==== Colors ====*/
    --first-color: #EAE4D8;
    --first-color-dark: #0e1824;
    --first-toned-color: #feaa28;
    --second-toned-color: #5dc185;

    font-family: 'Barlow Light', sans-serif;
    font-size: 15px;

    /*===== Font and typography =====*/
    --body-font: 'Barlow', sans-serif;
    --big-font-size: 2.5rem;
    --title-size: 30px;
    --title-font: 'Barlow SemiBold', sans-serif;
    --small-title-size: 13px;
    --small-title-font: 'Barlow Light', sans-serif;
    --normal-font-size: 1vw;

    /*===== layout =====*/
    --container-margin: 0 10vw;
}

/*RESPONSIVE */

@media (min-width: 800px) {
    body > footer > .footer_container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--first-color-dark);
        padding: 2vw 8vw;
        margin: 0 -8vw;
    }

    .footer_container_right {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        width: 25%;
    }

    .footer_container_left {
        display: flex;
        flex-direction: column;
        width: 35%;
        gap: 5vw;
    }

    .footer_container_left > div:nth-child(1) {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
    }

    .footer_container_left > div:nth-child(2) {
        font-size: 1vw;
        color: white;
        display: flex;
        flex-direction: column;
        gap: 1vw;
    }

    .footer_container_right {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        width: 25%;
    }

    .arrow_left {
        display: none;
    }
}



@media (max-width: 800px) {

    body > header {
        display: none;
    }
    /*HEADER*/
    .app > header > div {
        position: fixed;
        top: 89%;
        left: 0%;
        width: 100%;
        height: 11%;
        z-index: 999;
        padding: 0vw 4vw;
        background-color: white;
    }

    body > div.app > header > div > div:nth-child(1) {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 30%;
        gap: 1vw;
    }

    body > div.app > header > div > div:nth-child(1) > img {
        width: 20vw;
    }

    body > div.app > header > div > div:nth-child(2) {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 70%;
        gap: 1vw;
    }

    body > div.app > header > div > div:nth-child(2) > a {
        font-size: 14px;
    }


    body > div.app > header > div > div:nth-child(2) > a.btn_connexion {
        padding: 2vw 3vw;
    }

    /*FOOTER*/

    footer > div > div.footer_container_right > div > a {
        font-size: 12px;
    }

    footer > div > div.footer_container_left > div:nth-child(2) > p {
        font-size: 10px;
    }

    footer > div > div.footer_container_left > div:nth-child(1) > div:nth-child(2) {
        gap: 2.8vw;
    }

    footer > div > div.footer_container_left > div:nth-child(1) > div:nth-child(2) > a:nth-child(1) > svg {
        width: 3vw;
    }

    footer > div > div.footer_container_left > div:nth-child(1) > div:nth-child(2) > a:nth-child(2) > svg {
        width: 5vw;
    }

    footer > div > div.footer_container_left > div:nth-child(1) > div:nth-child(2) > a:nth-child(3) > svg {
        width: 6vw;
    }

    footer > .footer_container {
        flex-direction: column-reverse;
        align-items: flex-start;
        padding: 6vw 8vw 1vw 8vw;
        gap: 5vw;
    }

    .footer_container_left {
        flex-direction: row-reverse;
        width: 100%;
        align-items: center;
        justify-content: space-between;
    }

    .footer_container_right {
        width: 100%
    }

    .footer_container_left > div:nth-child(1) {
        flex-direction: column;
        align-items: flex-end;
    }

    .footer_container_left > div:nth-child(1) > div:nth-child(1) > svg {
        width: 10vw;
    }
}

/*===== BASE =====*/

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    font-size: 62.5%;
}

*,::before,::after{
    box-sizing: border-box;
}

a {
    text-decoration: none;
    cursor: pointer;
    font-family: "Barlow", sans-serif;
    font-size: 1vw;
}

body{
    margin: 0;
    padding: 0 8vw;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    font-weight: 500;
}

h1, h2, h3, h4, h5, p, ul{
    margin: 0;
    color: var(--first-color-dark);
}

h1 {
    font-family: "Londrina Solid", sans-serif;
    font-size: 2.5vw;
}

h2 {
    font-family: "Londrina Solid", sans-serif;
    font-size: 2.5vw;
}

p {
    font-family: "Barlow", sans-serif;
    font-size: 1vw;
}

ul{
    padding: 0;
    list-style: none;
}

button {
    border: none;
    cursor: pointer;
}

input {
    cursor: pointer;
    border: none;
}

textarea, input {
    outline: none;
}

#profil ,#email, #password {
    background-color: transparent;
    font-size: 1vw;
}

.d_flex_row {
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.d_flex_column {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.d_shadow {
    box-shadow: 4px 4px 25px 1px rgba(0, 0, 0, 0.25);
}

.d_none {
    display: none;
}

.blur {
    filter: blur(10px);
}

.cursor_ptr {
    cursor: pointer;
}



/*===== COMMON LAYOUT =====*/

/* HEADER */

header {
    margin-bottom: 5vw;
}

/* up part */

.nav_up_container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 6vw;
    padding: 0 8vw;
    margin: 0 -8vw;
    background-color: white;
    box-shadow: rgba(149, 157, 165, 0.3) 0 8px 8px;
    z-index: 999;
}

.nav_up_container > div {
    display: inline-block;
    text-align: center;
}

#logo_premium {
    width: 7vw;
}

.nav_up_container > div:nth-child(2) {
    background-color: white;
    border-radius: 0 0 0.5em 0.5em;
    box-shadow: rgba(149, 157, 165, 0.3) 0 8px 8px;
    height: 13vw;
    width: 11vw;
    position: relative;
}

.nav_up_container > div:nth-child(2) > a > svg {
    position: absolute;
    width: 85%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -30%);
}

.nav_up_container > div:nth-child(odd) {
    width: 20vw;
}

.nav_up_container > div:nth-child(1) > a {
    position: relative;
    float: left;
}

.nav_up_container > div:nth-child(1) > a > img {
    width: 10vw;
}

.nav_up_container > div:nth-child(3) {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}
.nav_up_container > div:nth-child(3) > a {
    float: right;
}

.nav_up_container > div:nth-child(3) > a > svg {
    width: 1.5vw;
    margin-left: 1.5vw;
}

/*search-box*/

.search_menu_active {
    width: 69vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 18.5vw;
    position: absolute;
    z-index: 5;
    left: 15%;
    transform: translateY(-4vw);
    border-radius: 0 0 1.5vw 1.5vw;
}

.search-box {
    background-color: white;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 10vw;
    border: 2px solid var(--first-toned-color);
    padding: 0 2vw 1vw 2vw;
}

body > header > div > div:nth-child(3) > div > input[type=text]:nth-child(1) {
    width: 100%;
}

body > header > div > div.d_shadow > div.search-box > input[type=text]:nth-child(1) {
    font-family: "Barlow SemiBold", sans-serif;
    font-size: 1.2vw;
    color: #A0A4A9;
}

body > header > div > div.d_shadow > div.search-box > input[type=button]:nth-child(2) {
    font-size: 1.2vw;
    width: 6vw;
    background-color: transparent;
    color: var(--first-color-dark);
}

body > header > div > div:nth-child(3) > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    width: 100%;
    height: auto;
    background-color: white;
    padding: 1vw 2vw 2vw 2vw;
    gap: 0.8vw;
    border-radius: 0 0 1.5vw 1.5vw;
}

body > header > div > div:nth-child(3) > div:nth-child(2) > p {
    font-family: "Barlow SemiBold", sans-serif;
    font-size: 1.3vw;
    color: #A0A4A9;
}

.recent-research {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    gap: 0.2vw;
}

.recent-research > a {
    font-family: "Barlow SemiBold", sans-serif;
    font-size: 1.2vw;
    color: var(--first-color-dark);
}

/* down part */

.nav_down_container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    width: 60vw;
    height: 3.5vw;
    border-radius: 0 0 0.5em 0.5em;
    box-shadow: rgba(149, 157, 165, 0.3) 0 8px 8px;
    background-color: white;
    z-index: 10;
}

.nav_down_container_left, .nav_down_container_right {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 40%;
    padding: 0 1vw;
}

.nav_down_container > div > div > a > p {
    font-size: 1.1vw;
    position: relative;
}

.nav_down_container_right > div:nth-child(2) > a > p {
    color: var(--first-toned-color);
}




/*===== PREMIUM AD =====*/

.ad_premium {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #EAE4D8;
    margin: 6vw -8vw;
    height: 13vw;
    background-image: url("../img/decorations/set_of_leaves.svg"), url("../img/decorations/set_of_leaves_right.svg") ;
    background-repeat: no-repeat;
    background-size: 13%;
    background-position: 100% 0, 0 100%;
}

.container_ad_premium {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 70%;
    height: 40%;
}

.container_ad_premium > div > h5 {
    font-family: "Barlow", sans-serif;
    font-size: 2.4vw;
    color: var(--first-color-dark);
}

.container_ad_premium > div > p {
    font-family: "Barlow", sans-serif;
    font-size: 1.3vw;
    color: var(--first-color-dark);
}

.container_ad_premium > a {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5vw;
    padding: 1.1vw 1.5vw;
    color: white;
    background-color: var(--first-toned-color);
    border-radius: 5rem;
    font-family: "Barlow SemiBold", sans-serif;
    font-size: 1.6vw;
    box-shadow: rgb(254 170 40) 0 0 15px;
    transition: 0.1s ease-in-out;
}

.container_ad_premium > a:hover {
    box-shadow: rgb(254 170 40) 0 0 30px;
    transition: 0.1s ease-in-out;
}

.ad_premium > div > a::before {
    position: absolute;
    content: "";
    background-image: url(../img/logos/declination/declination_blue.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 10vw;
    height: 21vw;
    top: -80%;
    left: -16%;
    transform: rotate(-25deg);
    pointer-events: none;
}


.container_ad_premium > a > svg {
    width: 3.5vw;
    height: auto;
}




/*===== FOOTER =====*/

footer {
    margin-top: 10vw;
}

.footer_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--first-color-dark);
    padding: 2vw 8vw;
    margin: 0 -8vw;
}

.footer_container a, .footer_container p {
    color: white;
}

.footer_container_left > div:nth-child(1) > div:nth-child(1) > svg {
    width: 8vw;
}

.footer_container_left {
    display: flex;
    /*flex-direction: column;*/
    /*width: 35%;*/
    gap: 5vw;
}

.footer_container_left > div:nth-child(1) {
    display: flex;
    /*align-items: baseline;*/
    justify-content: space-between;
}

.footer_container_left > div:nth-child(1) > div:nth-child(2) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1vw;
}

.footer_container_left > div:nth-child(1) > div:nth-child(2) > a:nth-child(1) > svg {
    width: 1vw;
    height: auto;
}

.footer_container_left > div:nth-child(1) > div:nth-child(2) > a:nth-child(2) > svg {
    width: 2vw;
    height: auto;
}

.footer_container_left > div:nth-child(1) > div:nth-child(2) > a:nth-child(3) > svg {
    width: 2vw;
    height: auto;
}

.footer_container_right {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    /*width: 25%;*/
}

.footer_container_left > div {
    font-size: 1vw;
    color: white;
}

.footer_container_left > div:nth-child(2) {
    font-size: 1vw;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

body > footer > div > div.footer_container_right > div {
    display: flex;
    flex-direction: column;
    gap: 2.5vw;
    color: white;
    font-family: "Londrina Solid", sans-serif;
    font-size: 1.3vw;
}



/*==== Grid Games ad ====*/


/* Content */

.content_games {
    margin-top: 10vw;
}

.content_games > h5 {
    font-family: "Londrina Solid", sans-serif;
    font-size: 3vw;
    margin-bottom: 5vw;
}

/* Wrapper */

.wrapper_games {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
}

/* Grid item */

.grid_items_games {
    width: 20vw;
    height: auto;
}

.grid_items_games  > div:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
    border-radius: 1rem;
    height: 20vw;
    width: 20vw;
}

.grid_items_games > div:nth-child(1) > a > img {
    width: 15vw  ;
}

.content_games > div > div:nth-child(2) > div:nth-child(1) > a > img, .content_games > div > div:nth-child(3) > div:nth-child(1) > a > img  {
    width: 20vw  ;
}


/*==== DATA ====*/

.data {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    padding: 1vw 0;
}

.data a {
    color: var(--first-color-dark);
}

.data > a:nth-child(1) {
    font-family: "Barlow SemiBold", sans-serif;
    font-size: 1.3vw;
}