* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    white-space: normal;
    word-break: break-word;
    font-family:Verdana, Geneva, Tahoma, sans-serif
}

body {
    width: 100%;
    height: 100vh;
    background-color: #bbbbbb;
}

.alert-red {
    color: red;
    font-weight: bold;
    text-align: center;
}
.alert-green {
    color: rgb(60, 197, 48);
    font-weight: bold;
    text-align: center;
}

.pseudo-condition {
    font-size: 0.8rem;
}

.bold {
    font-weight: bold;
}

.upp {
    text-transform: uppercase;
}

.logo-box {
    width: 100%;
    display: flex;
    justify-content: center;
}

.logo {
    width: 5rem;
    height: auto;
}

/* header */

.header {
    width: 100%;
    height: 8rem;
    background-color: #2b2b2b;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.cercle {
    background-color: #22222200;
    width: 5rem;
    height: 5rem;
    border-radius: 100%;
    align-content: center;
    text-align: center;
    border: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.2rem;
}

.logo-nav {
    width: 100%;
    height: 100%;
    
}

.nav-header {
    width: 60%;
    display: flex;
    justify-content: space-evenly;
    align-items: center; 
}

.nav-header a,
.return-portfolio a {
    font-size: 2.5rem;
    color: white;
}

.nav-header p {
    font-size: 2.5rem;
    color:rgb(242, 190, 58);

}

.nav-header a:hover,
.return-portfolio a:hover{
    color: rgb(242, 190, 58);
}

/* PAGE admin index */

.main-admin {
    width: 100%;
    height: calc(100% - 11.18rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.login-box {
    background-color: #e7e7e7;
    min-width: 30rem;
    width: 50%;
    height: 30rem;
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    border: 2px solid #dddddd;
    border-radius: 12px;
    text-align: center;
    font-size: 1.2rem;
}

.pseudo-box {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.button-account {
    width: fit-content;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 1.5rem;
}

.title-input {
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.3rem;
}

.input-text,
.select-button,
input[type=file]::file-selector-button {
    width: 100%;
    height: fit-content;
    padding: 0.5rem;
    border: 1px solid #cfcfcf;
    border-radius: 2px;
}

.input-text:focus,
.select-button:focus {
    
    outline: 2px solid #fdcc2b
}

.select-button,
input[type=file]::file-selector-button {
    cursor: pointer;
}

input[type=file]::file-selector-button:hover {
    background-color: #fdcc2b;
    border: 1px solid #f0c129;
}

.menu-admin {
    width: fit-content;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    font-size: 3rem;
    gap: 3rem;
}

.menu-admin img {
    width: 2rem;
}

.menu-admin a {
    color: #222222;
}

.menu-admin a:hover {
    color: rgb(242, 190, 58);
}

/* PAGE tech */

.main-tech,
.main-projet {
    width: 100%;
    /* height: calc(100% - 11.18rem); */
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}

.show-tech,
.show-projet {
    width: 100%;
    padding: 1rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: stretch;
    gap: 3rem;
    
}

.box-tech {
    background-color: #e7e7e7;
    width: 20rem;
    padding: 1.5rem 1.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    border: 2px solid #dddddd;
    gap: 2rem;
    position: relative;
}

.box-tech-info {
    text-align: center;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    
}

.duo-button {
    width: fit-content;
    margin-right: 1rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 1.5rem;
    position: absolute;
    bottom: -1.1rem;
    right: 0px;
}

.tech-input {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
}

.button-add-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

/* Project */

.box-projet {
    background-color: #e7e7e7;
    min-width: 22rem;
    width: 40%;
    min-height: 15rem;
    padding: 1rem 1rem 2.5rem;
    height: auto;
    display: flex;
    flex-direction: column;
    border: 2px solid #dddddd;
    gap: 1rem;
    position: relative;
}

.box-projet a {
    color: #222222;
}
.box-projet a:hover {
    color: #f0c129;
}

.box-projet-info {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1rem;
}

.text-projet-info,
.projet-title-box,
.projet-text-box {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.text-projet-info {
    width: 100%;
}

.projet-text-box {
    height: 100%;
}

.projet-input {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.projet-input-tech {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;  
    gap: 0.5rem;
}

.projet-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.tech-box {
    width:max-content;
    display: flex;
    gap: 0.5rem;
}

.tech-box,
.tech-box label,
input[type=checkbox] {
    cursor: pointer;
}

input[type=checkbox] {
    width: 1.21rem;
    height: 1.21rem;
    accent-color: #f0c129;
}

.projet-img {
    width: 100%;
    height: 17rem;
}

.projet-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}


/* Boutons*/

.button-connexion {
    background-color: rgb(204, 204, 204);
    width: 8rem;
    height: 3rem;
    padding: 0.5rem;
    border: none;
    cursor: pointer;
}

.button-connexion:hover {
    background-color: #2d2d2d36;
}

.button,
.small-button,
.smaller-button {
    background-color: #22222200;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-sizing: border-box;
}

.button {
    width: 3.5rem;
    margin: 0 auto;
}

.button img {
    width: 100%;
}

.small-button {
    width: 2.2rem;
}

.small-button img {
    width: 100%;
}

.smaller-button {
    width: 1.46rem;
}

.smaller-button img {
    width: 100%;
}

.select-button {
    text-align: center;
    width:100%;
    padding: 0.5rem;
}

.input-file {
    width: 100%;
}

/* footer */

.footer-admin {
    width: 100%;
    padding: 1rem;
    font-size: 0.6rem;
    display: flex;
    flex-direction: column;
    text-align: center;
}