/* -- Main html -- */

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: rgb(190, 190, 190);
}
body.darkmode {
    background-color: rgb(65, 65, 65);
}
.headerTop {
    width: 100%;
    min-height: 30px;
    background-color: rgb(210, 210, 210);
    display: flex;
    justify-content: center;
    position: relative;
}
.headerTop a {
    display: block;
}
.headerTop.darkmode {
    background-color: rgb(45, 45, 45);
}
.logoBigHope {
    width: 50%;
    max-width: 500px;
    margin-bottom: 10px;
}
.logoBigHope.darkmode {
    content: url(logoBigHope/BigHopeTextWhite.png);
}
#toggleNav {
    width: 50px;
    height: 50px;
    background-color: rgb(190, 190, 190);
    margin: 10px;
    right: 0px;
    bottom: 0px;
    position: absolute;
    border-style: none;
    border-radius: 15px;
    transition: transform 0.2s;
    font-size: 30px;
    color: black;
}
#toggleNav.darkmode {
    background-color: rgb(65, 65, 65);
    color: white;
}
#toggleNav:hover {
    background-color: rgb(0, 191, 255);
    transform: scale(1.2);
}
#darkButton {
    width: 50px;
    height: 50px;
    background-color: rgb(190, 190, 190);
    margin: 10px;
    right: 60px;
    bottom: 0px;
    position: absolute;
    border-style: none;
    border-radius: 15px;
    font-size: 30px;
    color: black;
}
#darkButton.darkmode {
    background-color: rgb(65, 65, 65);
    color: white;
}
#darkButton:hover {
    background-color: rgb(0, 191, 255);
    transform: scale(1.2);
}


.headerTop > a {
    width: 50px;
    height: 50px;
    background-color: rgb(190, 190, 190);
    margin: 10px;
    padding: 0;
    bottom: 0px;
    position: absolute;
    border-style: none;
    border-radius: 15px;
    transition: transform 0.2s;
    font-size: 18px;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}
.headerTop > a.darkmode {
    background-color: rgb(65, 65, 65);
    color: white;
}
.headerTop > a:hover {
    background-color: rgb(0, 191, 255);
    transform: scale(1.2);
}

#registerButton{left: 0px;}
#logInButton{left: 60px;}


#nav {
    display: flex;
}
.navItems {
    width: 25%;
    height: 50px;
    background-color: rgb(230, 230, 230);
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.navItems.darkmode {
    background-color: rgb(25, 25, 25);
}
.navButtons {
    width: 75%;
    height: 30px;
    background-color: rgb(190, 190, 190);
    border-radius: 30px;
    transition: transform 0,2s;
    text-decoration: none; 
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}
.navButtons.darkmode {
    background-color: rgb(65, 65, 65);
    color: white;
}
.navButtons:hover {
    background-color: rgb(0, 191, 255);
    transform: scale(1.1);
}
.navLinks {
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-size: 20px;
}
.navLinks.darkmode {
    color: white;
} 
h1.darkmode, h2.darkmode {
    color: rgb(255, 255, 255);
}

/* registration.php */

.regBG {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* index.html */

.hero {
    background-color: rgb(190, 190, 190);
    padding: 100px;
}
.hero.darkmode {
    background-color: rgb(65, 65, 65);
}
.heroTitle {
    font-size: 25px;
    margin-bottom: 50px;
}
.heroTitle.darkmode {
    color: white;
}
.heroText {
    font-size: 20px;
    margin-bottom: 50px;
}
.heroText.darkmode {
    color: white;
}
.bg {
    width: 100%;
}
.bg.darkmode {
    content: url(BG/code-noir-flou.png);
}
footer {
    width: 100%;
    height: 50px;
    background-color: rgb(210, 210, 210);
    display: flex;
}
footer.darkmode {
    background-color: rgb(45, 45, 45);
}
.copyright {
    padding: 10px;
}
.copyright.darkmode {
    color: white;
}

/* projet.php */

.project {
    display: flex;
    flex-wrap: wrap;
}
.projectContainer {
    width: 25%;
    padding: 10px 0px 10px 0px;
    display: flex;
    justify-content: center;
}
.projectHolder {
    width: 95%;
    background-color: rgb(210, 210, 210);
    border-radius: 10px;
}
.projectHolder.darkmode {
    background-color: rgb(45, 45, 45);
}
.projectLinks {
    width: 100%;
    padding: 0px;
}
.projectIcon {
    width: 100%;
    border-radius: 10px;
}
.projectHolder h1, p{
    padding: 10px;
}
.projectHolder h1.darkmode, p.darkmode {
    color: white;
}
.projectHolder button {
    width: 30px;
    height: 30px;
    background-color: rgb(195, 195, 195);
    margin: 10px;
    border-radius: 10px;
    border-style: none;
    font-size: 20px;
}
.addButton {
    width: 30px;
    height: 30px;
    background-color: rgb(210, 210, 210);
    margin: 5px;
    color: black;
    border-radius: 10px;
    border-style: none;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.projectHolder button.darkmode, .addButton.darkmode {
    background-color: rgb(60, 60, 60);
    color: rgb(45, 45, 45);
}

/* contact.php */

.contactBG {
    width: 100%;
    
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.form {
    width: 75%;
    background-color: rgb(210, 210, 210);
    border-radius: 20px;
}
.form.darkmode {
    background-color: rgb(45, 45, 45);
}
.formDiv {
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content:space-evenly;
    flex-direction: column;
}
.formDiv input,textarea {
    width: 75%;
    height: 30px;
    border-radius: 10px;
    border-style: none;
    font-size: 20px;
}
.formDiv h1.darkmode,label.darkmode{
    color: white;
}
.formDiv button {
    width: 150px;
    height: 40px;
    background-color: rgb(190, 190, 190);
    border-style: none;
    border-radius: 20px;
    font-size: 20px;
}
.formDiv button.darkmode {
    background-color: rgb(65, 65, 65);
    color: white;
}
.formDiv button:hover {
    transform: scale(1.1);
    background-color: rgb(0, 191, 255);
}
.socialMediaHolder{
    width: 100%;
    height: 50px;
}
.socialMediaHolder a {
    padding: 20px;
    color: black;
}
.bi.darkmode {
    color: white;
}

/* project_page.php */

.project_bg {
    height: 100vh;
}

/* apropos.php */

.apropos_bg.darkmode {
    color: white;
    font-size: 40;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ========================================== */
/* ========================================== */
/* ========================================== */
/* ========================================== */
/* ========================================== */
@media screen and (max-width: 992px) {
    /* projets.php */

    .projectContainer {
        width: 50%;
    }
}
/* ========================================== */
/* ========================================== */
/* ========================================== */
/* ========================================== */
/* ========================================== */
@media screen and (max-width: 658px){
    #toggleNav {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        font-size: 20px;
    }
    #darkButton {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        font-size: 20px;
        right: 35px;
    }
    #registerButton {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        font-size: 8px;
    }
    #logInButton {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        font-size: 8px;
        left: 35px;
    }
    #nav {
        display: flex;
        flex-direction: column;
    }
    .navItems {
        width: 100%;
    }
    .hero {
        padding: 50px;
    }

    /* projets.php */

    .projectContainer {
        width: 100%;
    }

    /* contact.php */

    .formDiv {
        flex-direction: row;
        padding: 10px;
    }
    .formDiv input,textarea {
        width: 50%;
    }
}