/* ---------- HTML / GENERAL ----------*/
body {
    background:url(img/noise.png), linear-gradient(135deg, #17397C, #0A0D2C) no-repeat;
    background-attachment: fixed;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    margin: 0;
}
.column {
    max-width: 1264px;
    margin: 0 auto;
    padding-top: auto;
    padding-left: 32px;
    padding-right: 32px;
}

h2 {
    font-size: 40px;
    font-weight: 600;
    text-align: center;
    margin: 0;
    margin-bottom: 32px;
}

/* ---------- HEADER ----------*/
header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 64px;
}
/* --- ---------- --- */
#logo {
    height: 50px;
    filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(290deg) brightness(104%) contrast(101%) drop-shadow(0px 4px 3px rgba(10,13,44,.3));
}
/* --- ---------- --- */
nav ul {
    display: flex;
    margin: 0;
    padding: 0;
}
nav li {
    display: flex;
    margin-left: 32px;
}
nav a {
    text-decoration: none;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
}
nav a:hover {
    font-weight: 900;
}

/* ---------- MAIN ----------*/
main {
    padding: 0 20px;
}
main section {
    width: 100%;
    margin-top: 200px;
}

/* --- A PROPOS --- */
#presentation {
    background-color: rgba(10,13,44,.5);
    border-radius: 20px;
    padding: 32px;
    padding-bottom: 16px;
    box-shadow: inset 0 4px 10px rgba(0,0,0,.25),inset 0 -4px 10px rgba(23,57,124,.25);
}

#presentation p {
    margin: 0;
    margin-bottom: 16px;
    text-align: center;
    font-size: 20px;
}
#presentation p span {
    font-weight: 700;
}

#citations {
    margin: 0;
    margin-top: 100px;
}

#citations p {
    margin: 0;
    text-align: center;
    font-size: 20px;
    font-style: italic;
}
/* --- animation citations --- */
#spin:after {
    content:"";
    animation: spin 60s linear infinite;
}
@keyframes spin {
    0% { content:"“Si personne ne déteste votre travail, personne ne l’aime vraiment non plus.” - Jessica Walsh"; }
    25% { content:"“Si vous pouvez vraiment définir le problème, vous avez déjà trouvé la solution.” - Chip Kidd"; }
    50% { content:"“Créer un design graphique, c’est comme peindre, sauf que la peinture ne sèche jamais.” - Neuville Brody"; }
    75% { content:"“Je veux créer de belles choses et non pas des choses moches, même si ça n’intéresse personne.” - Saul Bass"; }
    100% { content:"“Les bons designs ne dépendent pas du support que l’on utilise. Pour créer un design de qualité, il faut bien réfléchir à ce que l’on veut faire et au cadre dans lequel cela s’inscrit, avant même de commencer.” - Susan Kare"; }
}

/* --- PORTFOLIO --- */
#portfolio {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.col {
    display: flex;
    flex-direction: column;
    width: calc(33.333333% - (64px / 3));
    margin-right: 32px;
}
.col:nth-child(3n+1) {
    margin-top: 50px;
}
.col:nth-child(3n+2) {
    margin-top: 100px;
}
.col:nth-child(3n+3) {
    margin-right: 0;
}

#portfolio article {
    display: flex;
    aspect-ratio : 1 / 1;
    margin-bottom: 32px;
}

#portfolio article img {
    height: auto;
    width: 100%;
    border-radius: 20px;
}

/* --- CONTACT --- */
#contact {
    margin-bottom: 300px; /* --- <===== Supprimer après ! --- */
}

#contact p {
    text-align: center;
    font-size: 20px;
    margin: 0;
    margin-bottom: 32px;
}

#formulaire {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 100px;
}

#formulaire a {
    display: flex;
    align-items: center;
    padding: 16px;
    margin: 4px 0;
    border-radius: 50px;
    background: linear-gradient(135deg, #F14E6C, #69054D);
    text-decoration: none;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    filter: drop-shadow(0px 4px 3px rgba(10,13,44,.3));
    transition: .2s;
}
#formulaire a:hover {
    padding: 20px;
    margin: 0;
    filter: drop-shadow(0px 10px 3px rgba(10,13,44,.3));
    transition: .2s;
}

#formulaire a img {
    margin-right: 16px;
}

#liens {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#liens div {
    display: flex;
}

#liens a {
    display: flex;
    height: 60px;
    width: 60px;
    padding: 20px;
    margin: 4px 32px 4px 0;
    border-radius: 20px;
    background: linear-gradient(135deg, #FFD467, #905B2A);
    cursor: pointer;
    filter: drop-shadow(0px 4px 3px rgba(10,13,44,.3));
    transition: .2s;
}
#liens a:hover {
    padding: 24px;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 24px;
    filter: drop-shadow(0px 10px 3px rgba(10,13,44,.3));
    transition: .2s;
}

#liens a:nth-child(3n+2) {
    margin-right: 0;
}

/* ---------- FOOTER ----------*/
footer {
    padding: 32px 0;
}
footer p {
    text-align: center;
    margin: 0;
}

/* ========== ========== ========== ========== ========== */
/* ========== ========== = ADMIN == ========== ========== */
/* ========== ========== ========== ========== ========== */

#admin {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
}

#admin-connect {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    width: 310px;
    padding: 5px 0;
    border-radius: 4px;
    background-color: #ebebeb;
    box-shadow: inset 0px 1px 1px #cdcdcd , 0px 1px 1px #fff;
}
#admin-connect form {
    display: flex;
    flex-direction: column;
    background-color: #cdcdcd;
    width: 240px;
    padding: 30px;
    border-radius: 4px;
    background-color: #f3f3f3;
    box-shadow: 0px 1px 1px #cdcdcd , inset 0px 1px 1px #fff;
}
#admin-connect form input {
    border: none;
    margin-bottom: 20px;
    padding: 0 20px;
    height: 30px;
    width: calc(100% - 40px);
    border-radius: 15px;
    background-color: #ebebeb;
    box-shadow: inset 0px 1px 1px #cdcdcd , 0px 1px 1px #fff;
    font-family: 'Montserrat', sans-serif;
}
#admin-connect form button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #f26c4f;
    border: none;
    border-radius: 4px;
    height: 30px;
    margin: 0 auto;
    margin-top: 20px;
    padding: 0 20px;
    box-shadow: 0px 2px 1px #b9604d;
    cursor: pointer;
}
#admin-connect form button img {
    height: 20px;
    width: 20px;
    margin-right: 10px;
}
#admin-connect form button p {
    margin: 0;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
}