body{
    margin: 0 auto;
    padding: 0 20px;
    font-family: 'Open Sans', sans-serif;
    /*max-width: 640px;*/

    --color-header-text: #18A9CD;
    /*
    #c14939
    #de631b
    #36dce7
    */
    --color-background: #343330;
    /*
    #18A9CD
    #030303
    #404040
    #343330
    */
    --color-p-text: #e3e3e3;
    --color-a-active: #6897BB;

    background-color: var(--color-background);
    color: var(--color-p-text);



}

#person-intro{
    top: 25%
}

#person-intro ul li{
    display: inline;
}

html{
    background-color: var(--color-background);
    color: var(--color-p-text);
    /*color : #9bc28e;*/
}


/*General : links */
a{
    /*color: #f7630c;*/
    color: var(--color-header-text);
    text-decoration: none;

}

a:visited{
    /*color: #6897BB;*/
    /*color: #f7630c;*/
    color: var(--color-header-text);
}

a:active{
    color: var(--color-a-active);
}

/* Logo and title stuff */
.container-main{
    margin: 2.5em 0 0.5em 0;
}

.main-head{
    width:100%;
    max-width: 100%;
    align-items: center;
    margin: auto;
    text-align: center;

}

.logo-container{
    gap:10%;
    max-width: 150px;
    margin:auto;
    /*height: auto;*/
}

h1{
    font-family: "DM Serif Display", serif;
    font-weight: 450;
    font-size: 2.5em;
}

img.logo-person{
    border-radius: 50%;
    margin: auto;
    max-width:100%;
    height: auto;
}


/*UL for personal links*/

ul.contacts{
    /*padding-inline-start: 20px;*/
    /*padding-inline-start: 5%;*/
    display: flex;
    justify-content: space-between;
    /*flex-direction: row;*/
    /*flex-wrap: wrap;*/

    padding: 0;
    max-width: 600px;
    margin: auto;
}

ul.contacts>li{
    /*margin-left: 10px;*/
    color:var(--color-header-text);
    text-align: center;
}

/*ul.contacts>p{ !*useless*!*/
/*    margin-block-start:0;*/
/*    margin-block-end:0;*/
/*}*/

ul.contacts>div{
    display:inline;
}

.flex-container{
    flex-wrap: wrap;

}


/*Footer*/

footer{
    font-size: small;
    text-align: center;
    margin: 2em auto;
}

footer ul{
    list-style-type:none;
}



