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

@font-face {
    font-family: "Jetbrain";
    src: url(../fonts/JetBrainsMonoNL-Regular.ttf) format('truetype');
}

/* ------------------------------------- */
/* ------------------------------------- */
/* MOBILE VERSION */
/* ------------------------------------- */
/* ------------------------------------- */

html {
    scroll-behavior: smooth;
    font-family: "Comfortaa";
}

header {
    width: 100%;
    height: 60px;

    position: fixed;
    bottom: 0;
    left: 0;

    z-index: 999;
}

header>h1 {
    display: none;
}

header>nav {
    display: flex;
    align-content: center;
    justify-content: space-around;

    background-color: #202020;
}

header>nav>a>h4 {
    display: none;
}

nav>a {
    width: 20%;
    padding: 15px;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    margin: 0;
}

a>h5 {
    margin: 0;
    position: absolute;
    z-index: 100;
    color: black;
    padding-left: 1%;

    text-align: center;
}

i.fas-hidden {
    display: inline-block;
}

#selected, nav>a:hover {
    color: #FC7E1F;
}

/*///////////////////////////////////////////////////////////////////*/
/* SECTION BUTTON ANIMAITON */
/*///////////////////////////////////////////////////////////////////*/
div.buttons-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 3vh;
}

div.buttons-container>button.btn {
    position: relative;
    background-color: #FC7E1F;
    border: none;
    text-align: center;
    padding: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
    font-family: "Comfortaa";
    color: #fff;
    transition-duration: 4s;
}

div.buttons-container button.btn div.left:before, section.vitrine div.content div.product div.left:before {
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    width: 15px;
    height: 15px;
    background: transparent;
    border-top: 2px solid white;
    border-left: 2px solid white;
    transition-duration: 100ms;
}

div.buttons-container button.btn div.left:after, section.vitrine div.content div.product div.left:after {
    position: absolute;
    content: "";
    bottom: 0px;
    left: 0px;
    width: 15px;
    height: 15px;
    background: transparent;
    border-bottom: 2px solid white;
    border-left: 2px solid white;
    transition-duration: 100ms;
}

div.buttons-container button.btn div.right:before, section.vitrine div.content div.product div.right:before {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    width: 15px;
    height: 15px;
    background: transparent;
    border-top: 2px solid white;
    border-right: 2px solid white;
    transition-duration: 100ms;
}

div.buttons-container button.btn div.right:after, section.vitrine div.content div.product div.right:after {
    content: "";
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 15px;
    height: 15px;
    background: transparent;
    border-bottom: 2px solid white;
    border-right: 2px solid white;
    transition-duration: 100ms;
}

/* ///////////////////////////////////// */
/* /////   HOVER ANIMATION BUTTON  ///// */
/* ///////////////////////////////////// */

div.buttons-container button.btn:hover div.left:before {
    top: -10px;
    left: -10px;
}

div.buttons-container button.btn:hover div.left:after {
    bottom: -10px;
    left: -10px;
}

div.buttons-container button.btn:hover div.right:before {
    top: -10px;
    right: -10px;
}

div.buttons-container button.btn:hover div.right:after {
    bottom: -10px;
    right: -10px;
}

/*///////////////////////////////////////////////////////////////////*/
/* SECTION BUTTON INPUT TEXTENTRY */
/*///////////////////////////////////////////////////////////////////*/
div.entry-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20%;
}

div.entry-container-address {
    margin-bottom: 0%;
}

div.entry-container>div.box {
    position: relative;
    background-color: #2B2B2B;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    color: #fff;
    padding: 0vh;
    font-family: "Comfortaa";
}

div.entry-container>div.box>input, label, select {
    position: relative;
    width: 270px;
    height: 6.28%;
    background-color: #2B2B2B;
    text-align: center;
    padding: 10px;
    padding-top: 18px;
    padding-bottom: 18px;
    font-family: "Comfortaa";
    color: #fff;
    font-size: 15px;
    border: none;
}

div.entry-container>div.box>input:focus {
    outline: none;
}

div.box>div.left:before {
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    width: 15px;
    height: 15px;
    background: transparent;
    border-top: 2px solid white;
    border-left: 2px solid white;
    z-index: 100;
}

div.box>div.left:after {
    position: absolute;
    content: "";
    bottom: 0px;
    left: 0px;
    width: 15px;
    height: 15px;
    background: transparent;
    border-bottom: 2px solid white;
    border-left: 2px solid white;
    z-index: 100;
}

div.box>div.right:before {
    position: absolute;
    content: "";
    top: 0px;
    right: 0px;
    width: 15px;
    height: 15px;
    background: transparent;
    border-top: 2px solid white;
    border-right: 2px solid white;
    z-index: 100;
}

div.box>div.right:after {
    content: "";
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 15px;
    height: 15px;
    background: transparent;
    border-bottom: 2px solid white;
    border-right: 2px solid white;
    z-index: 100;
}

/*///////////////////////////////////////////////////////////////////*/
/* SECTION ALERTS */
/*///////////////////////////////////////////////////////////////////*/
#displayAlert {
    width: 100%;

    background-color: #ad1a1a;
    color: #fff;

    display: flex;
    justify-content: space-around;
    align-items: center;

    transition-duration: 200ms;
}

#displayAlert>h3 {
    font-family: "Comfortaa";
    font-size: 12px;
}

#displayAlert>h3.textAlert {
    width: 80%;
    text-align: center;
}

#displayAlert>h3.closeBtn {
    width: 3%;
    text-align: center;
}

#displayAlert>h3.closeBtn:hover {
    cursor: pointer;
}

div.succes {
    background-color: #1fad1a;
}

div.failed {
    background-color: #FC7E1F;
}

div.error {
    background-color: #ad1a1a;
}

#cart-recap {
    display: none;
}

/* ------------------------------------- */
/* ------------------------------------- */
/* PC VERSION */
/* ------------------------------------- */
/* ------------------------------------- */

@media only screen and (min-width : 1224px) {
    header {
        width: 100%;
        height: 10vh;
        color: #fff;
        background-color: #202020;

        display: flex;
        align-items: center;
        justify-content: space-between;
        position: static;
    }

    header>h1 {
        display: inherit;
        margin: 0;
        margin-left: 2vh;
        font-family: "Comfortaa";
    }

    header>nav {
        display: flex;
        align-items: center;
        gap: 2vh;
        margin-right: 2vh;
    }

    header>nav>a {
        color: #fff;
        text-decoration: none;
        font-family: "Comfortaa";
        transition-duration: 100ms;
    }

    header>nav>a>h4 {
        display: inherit;
        margin: 0;
        font-size: 18px;
    }

    i.fas-hidden {
        display: none;
    }

    /* ///////////////////////////////////// */
    /* /////   ANIMATION BUTTON  ///// */
    /* ///////////////////////////////////// */

    div.buttons-container {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    div.buttons-container button.btn {
        position: relative;
        background-color: #FC7E1F;
        border: none;
        text-align: center;
        padding: 20px;
        padding-top: 15px;
        padding-bottom: 15px;
        font-family: "Comfortaa";
        color: #fff;
        transition-duration: 4s;
    }

    div.buttons-container button.btn div.left:before, section.vitrine div.content div.product div.left:before {
        position: absolute;
        content: "";
        top: 0px;
        left: 0px;
        width: 15px;
        height: 15px;
        background: transparent;
        border-top: 2px solid white;
        border-left: 2px solid white;
        transition-duration: 100ms;
    }

    div.buttons-container button.btn div.left:after, section.vitrine div.content div.product div.left:after {
        position: absolute;
        content: "";
        bottom: 0px;
        left: 0px;
        width: 15px;
        height: 15px;
        background: transparent;
        border-bottom: 2px solid white;
        border-left: 2px solid white;
        transition-duration: 100ms;
    }

    div.buttons-container button.btn div.right:before, section.vitrine div.content div.product div.right:before {
        content: "";
        position: absolute;
        top: 0px;
        right: 0px;
        width: 15px;
        height: 15px;
        background: transparent;
        border-top: 2px solid white;
        border-right: 2px solid white;
        transition-duration: 100ms;
    }

    div.buttons-container button.btn div.right:after, section.vitrine div.content div.product div.right:after {
        content: "";
        position: absolute;
        bottom: 0px;
        right: 0px;
        width: 15px;
        height: 15px;
        background: transparent;
        border-bottom: 2px solid white;
        border-right: 2px solid white;
        transition-duration: 100ms;
    }

    /* ///////////////////////////////////// */
    /* /////   HOVER ANIMATION BUTTON  ///// */
    /* ///////////////////////////////////// */

    button.btn:hover div.left:before {
        top: -10px;
        left: -10px;
    }

    button.btn:hover div.left:after {
        bottom: -10px;
        left: -10px;
    }

    button.btn:hover div.right:before {
        top: -10px;
        right: -10px;
    }

    button.btn:hover div.right:after {
        bottom: -10px;
        right: -10px;
    }

    /* 
        CSS FOR DIV DISPLAY ALERT
    */
    #displayAlert {
        width: 100%;

        background-color: #ad1a1a;
        color: #fff;

        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    #displayAlert>h3 {
        font-family: "Comfortaa";
    }

    #displayAlert>h3.textAlert {
        width: 99%;
        text-align: center;
    }

    #displayAlert>h3.closeBtn {
        width: 3%;
        text-align: center;
    }

    #displayAlert>h3.closeBtn:hover {
        cursor: pointer;
    }

    #displayAlert>h3 {
        font-size: revert;
    }

    div.succes {
        background-color: #1fad1a;
    }

    div.failed {
        background-color: #FC7E1F;
    }

    div.error {
        background-color: #ad1a1a;
    }

    /* /////////////////////////: */
    /* /////////////////////////: */
    /* /////////////////////////: */

    #cart-recap {
        display: none;
        width: 22%;
        height: 40%;
        position: absolute;
        z-index: 1000;
        right: 0;
        top: 58px;
    }

    #cart-recap > div.result {
        background-color: #202020;
    }
}

textarea {
    resize: none;
}