/* DEF VAR AND DEFAULT */

html {
    box-sizing: border-box;
    --Col0: #ffffff;
    --Col00: #36180a;
    --Col1: #008585;
    --Col2: #74a892;
    --Col3: #fbf2c4;
    --Col4: #e5c185;
    --Col5: #c7522a;

    --fsize0: 0.8rem;
    --fsize1: 1.1rem;
    --fsize2: 1.3rem;
    --fsize3: 3.5rem;
    --fsize4: 15rem;
}

* {
    margin: 0;
}

/* FONT AND TEXT STYLES */
body {
    font-family: 'Manrope', sans-serif;
    font-size: var(--fsize1);
}

a {
    color: var(--Col4);
    text-decoration: none;
}

strong {
    color: var(--Col2);
    font-style: bold;
}

em {
    color: var(--Col5);
    font-style: italic;
}

h1 {
    font-size: var(--fsize3);
    color: var(--Col1);
    font-family: 'Manrope', sans-serif;
}

h2 {
    font-size: var(--fsize2);
    color: var(--Col5);
}

p,
li {
    color: var(--Col00);
    text-align: justify;
}

ul {
    list-style-type: none;
    padding: 0;
}

.bottom-text {
    font-size: var(--fsize0);
}

.navbutton {
    font-size: var(--fsize1);
    color: var(--Col0);
    font-style: bold;
    text-align: center;
    align-content: center;
}

.form-input {
    font-size: var(--fsize1);
    font-family: 'Manrope', sans-serif;
}

::placeholder { /* Most modern browsers support this now. */
    font-size: var(--fsize1);
    font-family: 'Manrope', sans-serif;
}

.bloc-button {
    font-size: var(--fsize1);
    color: var(--Col0);
}

.list-item {
    font-size: var(--fsize2);
    color: var(--Col0);
}

/* COLOR STYLES */

body {
    background-color: var(--Col3);
}

nav,
footer {
    background-color: var(--Col1);
}

header {
    background-color: var(--Col3);
}

.section-class {
    background-color: var(--Col3);
}

.div-like-image {
    background-color: var(--Col4);
}

.bloc-button {
    background-color: var(--Col5);
}

.list-item {
    background-color: var(--Col2);
}

.logo-col-1 {
    fill: var(--Col5);
}

.logo-col-2 {
    fill: var(--Col3);
}

.logo-col-3 {
    fill: var(--Col1);
}

h1::after {
    background-color:var(--Col5);
}

.form-input {
    background-color: var(--Col4);
    color: var(--Col00);
}

::placeholder { /* Most modern browsers support this now. */
    color: var(--Col3);
}

/* PADDING AND DISPLAY */

html,
main,
body {
    width: 100%;
}

ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fixed-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    padding: 0% 20% 0% 20%;
    top: 0;
    width: 60%;
    height: 5em;
    overflow: hidden;
}

.navbox{
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.navbutton {
    width: 100%;
    height: 100%;
}

footer {
    width: 60%;
    height: 5em;
    padding: 1% 20% 0 20%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footerbox{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.section-class {
    width: 60%;
    padding: 3% 3% 3% 3%;
    margin: 5em 17% 2% 17%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.top-section {
    margin: 8% 17% 2% 17%;
}

.bloc-section-text {
    display: flex;
    flex-direction: column;
    width: 64%;
    padding: 3% 3% 3% 3%;
    text-align: center;
    gap: 20px;
}

.unpair-section {
    flex-direction: row-reverse;
}

.list-item {
    display: inline-flex;
    width: auto;
    border-radius: 10px;
    padding: 5px 20px;
    margin: auto;
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
}

label {
    display: none;
}

form {
  display: flex;
  flex-direction: column;
}

.form-input {
    height: 2.0em;
    margin-bottom: 1.3em;
    border: none;
    border-radius: 3px;
}

.form-div-row {    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.form-input-mid {
    width: 48%;
}

.form-input-text {
    height: 5em;
    resize: vertical;
}

.bloc-button {
    display: inline-block;
    border-radius: 50px;
    padding: 10px 20px;
    width: auto;
    margin: auto;
    border: none;
}

/* BEFORE - AFTER */

h1::after {
    content:"";
    display:block;
    height:4px;
    width:80px;
    margin-top:20px;
    margin: 30px auto 10px;
}

/* IMAGES */
.logo-img {
    width: 4rem;
    height: 4rem;
}

.section-img {
    width: 20rem;
    height: 20rem;
    border-radius: 49% 51% 63% 37% / 37% 40% 60% 63% ;
}

.div-like-image {
    border-radius: 49% 51% 63% 37% / 37% 40% 60% 63% ;
    text-align: center;
    align-content: center;
    position: static;
}

.deco-logo {
    width: 15rem;
    height: 15rem;
}

.social-logo {
    width: 2.0rem;
    height: 2.0rem;
}

/* HOVER */
a:hover {
    color: var(--Col5);
    text-decoration: none;
}

.lien-icone:hover,
.social-logo:hover {
    opacity: 0.5;
}

.navbutton:hover {
    background-color: var(--Col4);
    color: var(--Col5);
    transition: .5s width;
}

.bloc-button:hover {
    background-color: var(--Col2);
    color: var(--Col0);
}

.list-item:hover {
    background-color: var(--Col5);
}

/* MEDIA CHANGES */
@media screen and (max-width: 996px) {
    html {
        --fsize0: 1.5rem;
        --fsize1: 2.2rem;
        --fsize2: 2.7rem;
        --fsize3: 4.3rem;
        --fsize4: 15rem;
    }

    .fixed-nav {
        padding: 0% 5% 0% 5%;
        width: 90%;
    }

    .fixed-nav,
    footer {
        height: 3em;
    }

    .navbox{
        width: 80%;
        height: 100%;
    }

    .section-class {
        flex-direction: column;
        width: 94%;
        padding: 3% 3% 3% 3%;
        margin: 5em 0 2% 0;
    }

    .bloc-section {
        width: 84%;
        padding: 3% 3% 3% 3%;
        text-align: center;
    }

    .bloc-section-text {
        width: 84%;
        padding: 3% 3% 3% 3%;
    }

    .section-img {
        width: 24rem;
        height: 24rem;
    }

    .deco-logo {
        width: 20rem;
        height: 20rem;
    }

    .social-logo {
        width: 4.0rem;
        height: 4.0rem;
    }
}