/*----------------------------------------------------------------------------
        Style.css    :       vlinder.host      By Vlinder    2024
----------------------------------------------------------------------------*/
/*                                                                */
/*                                                                */
/*                             COMMUN                             */
/*                                                                */
/*                                                                */

html {
    scroll-behavior: smooth;
}

:root {
    --green: #0C756F;
    --green2: #0c706b;
    --green3: #08514d;
    --yellow: #FFCE86;
    --yellow2: #F9F6EE;
    --gray: #999a99;
    --white: white;
    --black: black;
    --red: red;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Poppins";
}

header {
    width: 100%;
    padding: 15px 10% 15px 10%;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000000;
}

.logoButton {
    width: 8vh;
    height: 8vh;
    background: var(--green);
    border-radius: 20px;
    display:flex;
    align-items: center;
    justify-content: center;
}

.logoButton:hover {
    cursor: url('../src/img/cursor.png'), default !important;
}

.logoButton svg {
    width: 50%;
    height: 50%;
    fill: white;
}

.navContainer {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: row;
    gap: 60px;
}

.navBar {
    width: auto;
    height: 8vh;
    display: flex;
    align-items: center;
    padding: 20px 50px 20px 50px;
    background-color: var(--green);
    border-radius: 20px;
}

.mobileNavBar{
  display: none;
}

.buttonHamburger{
    display: none;
}

.navBar nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

.homeButton {
    font-size: 2.5vh;
    font-weight: 500;
    color: var(--white);
    text-decoration: none;
}

.homeButton:hover,
.aboutButton:hover,
.contactButton:hover {
    cursor: url('../src/img/cursor.png'), default !important;
}

.homeButton.use {
    font-size: 2.5vh;
    font-weight: 500;
    color: var(--yellow);
    text-decoration: none;
}

.aboutButton {
    font-size: 2.5vh;
    font-weight: 500;
    color: var(--white);
    text-decoration: none;
}

.aboutButton.use {
    font-size: 2.5vh;
    font-weight: 500;
    color: var(--yellow);
    text-decoration: none;
}

.contactButton {
    font-size: 2.5vh;
    font-weight: 500;
    color: var(--white);
    text-decoration: none;
}

.contactButton.use {
    font-size: 2.5vh;
    font-weight: 500;
    color: var(--yellow);
    text-decoration: none;
}

.accountButton {
    width: 8vh;
    height: 8vh;
    background: var(--green);
    border-radius: 20px;
    display:flex;
    align-items: center;
    justify-content: center;
}

.accountButton:hover {
    cursor: url('../src/img/cursor.png'), default !important;
}

.accountButton svg {
    width: 45%;
    height: 45%;
    fill: var(--white);
}

/*                                                              */
/*                                                              */
/*                             HOME                             */
/*                                                              */
/*                                                              */

.Container {
    width: 100vw;
    height: auto;
    padding: 114px 25% 3% 25%; 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 50px;
}

.Container h1 {
    font-size: 48px;
    font-weight: 700;
    color: var(--yellow);
}

.content {
    font-family: Poppins;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    font-size: 20px;
    color: var(--green);
}

.content span {
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    font-size: 22px;
    color: var(--green);
}

.content a {
    font-family: Poppins;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    font-size: 20px;
    text-decoration:none;
    color: var(--green);
}

.content a:hover {
    cursor: url('../src/img/cursor.png'), default !important;
}

.Container p {
    color: var(--green);
}

.Container p a {
    color: var(--green);
}

.Container p a:hover {
    cursor: url('../src/img/cursor.png'), default !important;
}

@media (max-width: 925px ) {
    
    /*                                                                */
    /*                                                                */
    /*                             COMMUN                             */
    /*                                                                */
    /*                                                                */

    /*                                        */
    /*                                        */
    /*                 HEADER                 */
    /*                                        */
    /*                                        */
    
    .navBar{
        display: none;
    }
    
    .accountButton {
        display: none;
    }
    
    .mobileNavBar {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right:0;
        top:0;
        padding: 40% 10% 60% 10%;
        background: var(--green);
        transform: translateX(100%);
        opacity: 0;
        transition: transform 600ms ease-in-out, opacity 600ms ease-in-out;
    }

    .mobileNavBar.open {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right:0;
        top:0;
        padding: 40% 10% 60% 10%;
        background: var(--green);
        transform: translateX(0);
        opacity: 1;
    }

    .mobileNavBar.closing {
        transform: translateX(100%);
        opacity: 0;
    }

    .mobileNavBar nav ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .buttonHamburger{
        width: 50%;
        padding-right: 10%;
        display: flex;
        justify-content: right;
        align-items: center;
        z-index: 100;
    }

    #checkbox {
        display: none;
    }
      
    .toggle {
        position: relative;
        width: 30px;
        cursor: pointer;
        margin: auto;
        display: block;
        height: calc(3px * 3 + 8.25px * 2);
    }
    
    .bar {
        position: absolute;
        left: 0;
        right: 0;
        height: 3px; 
        border-radius: calc(3px / 2); 
        background: var(--green);
        color: inherit;
        opacity: 1;
        transition: none 0.35s cubic-bezier(.5,-0.35,.35,1.5) 0s;
    }
        
    .bar--top {
        bottom: calc(50% + 8.25px + 3px / 2); 
        transition-property: bottom,margin,transform;
        transition-delay: calc(0s + 0.35s),0s,0s;
    }
    
    .bar--middle {
        top: calc(50% - 3px / 2);
        transition-property: top,opacity;
        transition-duration: 0.35s,0s;
        transition-delay: calc(0s + 0.35s * 1.3),calc(0s + 0.35s * 1.3);
    }
    
    .bar--bottom {
        top: calc(50% + 8.25px + 3px / 2);
        transition-property: top,transform;
        transition-delay: 0s;
    }
    
    #checkbox:checked + .toggle .bar--top {
        bottom: calc(50% - 8.25px - 3px);
        margin-bottom: calc(8.25px + 3px / 2);
        transform: rotate(45deg);
        transition-delay: calc(0s + 0.35s * .3),calc(0s + 0.35s * 1.3),calc(0s + 0.35s * 1.3);
    }
    
    #checkbox:checked + .toggle .bar--middle {
        top: calc(50% + 8.25px);
        opacity: 0;
        transition-duration: 0.35s,0s;
        transition-delay: 0s,calc(0s + 0.35s);
    }
    
    #checkbox:checked + .toggle .bar--bottom {
        top: calc(50% - 3px / 2);
        transform: rotate(-45deg);
        transition-delay: calc(0s + 0.35s * 1.3),calc(0s + 0.35s * 1.3);
    }
    
    .homemobileButton {
        font-size: 29px;
        font-weight: 500;
        color: var(--white);
        text-decoration: none;
    }
    
    .homemobileButton:hover,
    .aboutmobileButton:hover,
    .contactmobileButton:hover {
        cursor: url('../src/img/cursor.png'), default !important;
    }
    
    .homemobileButton.use {
        font-size: 29px;
        font-weight: 500;
        color: var(--yellow);
        text-decoration: none;
        border-bottom: 3px solid var(--yellow);
    }
    
    .aboutmobileButton {
        font-size: 29px;
        font-weight: 500;
        color: var(--white);
        text-decoration: none;
    }
    
    .aboutmobileButton.use {
        font-size: 29px;
        font-weight: 500;
        color: var(--yellow);
        text-decoration: none;
        border-bottom: 3px solid var(--yellow);
    }
    
    .contactmobileButton {
        font-size: 29px;
        font-weight: 500;
        color: var(--white);
        text-decoration: none;
    }
    
    .contactmobileButton.use {
        font-size: 29px;
        font-weight: 500;
        color: var(--yellow);
        text-decoration: none;
        border-bottom: 3px solid var(--yellow);
    }
    
    .accountmobileButton {
        text-decoration: none;
    }
    
    .accountmobileButton svg {
        width: 35px;
        height: auto;
        fill: white;
    }
    
    /*                                        */
    /*                                        */
    /*                 FOOTER                 */
    /*                                        */
    /*                                        */
    
    
    .footer {
        color: var(--green);
        text-align: center;
        font-size: 13px;
    }
    
    .footer a{
        color: var(--green);
        font-size: 13px;
    }
    
    .footer a:hover{
        cursor: url('../src/img/cursor.png'), default !important;
    }
    
    .Container {
        padding: 100px 10% 3% 10%;
    }
    
    .Container h1 {
        font-size: 45px;
        font-weight: 700;
        color: var(--yellow);
    }
    
    .content {
        font-size: 20px;
        color: var(--green);
    }
    
    .Container p {
        color: var(--green);
    }
    
    .Container p a {
        color: var(--green);
    }
    
    .Container p a:hover {
        cursor: url('../src/img/cursor.png'), default !important;
    }

}

/*                                                               */
/*                                                               */
/*                             PHONE                             */
/*                                                               */
/*                                                               */

@media (max-width: 480px ) {

    .Container {
        padding: 100px 10% 3% 10%;
    }

    .Container h1 {
        font-size: 30px;
        font-weight: 700;
        color: var(--yellow);
    }
    
    .content {
        font-size: 17px;
        color: var(--green);
    }
    
    .Container p {
        color: var(--green);
    }
    
    .Container p a {
        color: var(--green);
    }
    
    .contentFooter {
        text-align: center;
    }
    
    .Container p a:hover {
        cursor: url('../src/img/cursor.png'), default !important;
    }
    
    .contentFooter {
        text-align: center;
    }
}