html{
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: auto;
    /*
    background: linear-gradient(180deg, rgba(1,0,13,1) 0%, 
    rgba(1,0,13,1) 15%, rgba(11,12,56,1) 15%, rgba(11,12,56,1) 25%, 
    rgba(0,16,223,1) 25%, rgba(0,16,223,1) 40%, rgba(0,64,235,1) 40%, 
    rgba(0,64,235,1) 65%, rgba(0,109,248,1) 65%, rgba(0,109,248,1) 80%, 
    rgba(0,212,255,1) 80%, rgba(0,212,255,1) 90%, rgba(0,164,110,1) 90%, 
    rgba(2,47,12,1) 96%, rgba(51,36,25,1) 97%, rgba(51,36,25,1) 100%);
    */
    /* background: radial-gradient(at top right, rgb(236, 234, 220) 0%, rgba(138,179,245,1) 80%), white; */
    background:rgb(138,179,245);
    background-repeat: no-repeat, repeat;

    --accent-color : #324c98; /* #0b2525; */
    --accent-shadow : #202a60; 
    --background-color : #dcf0fa;
    --text-on-accent-color : #F0F0F0;
    --text-color : #0F0F0F;
    --footer-color : #0F0F0F;
    --main-font : 'Roboto', sans-serif;
    --serif-font : 'Parisienne', cursive;
    --style-font : 'SUSE', sans-serif;

    font-family: var(--main-font);
    color:var(--text-on-accent-color);
    line-height: 1.6;
}

header{
    width:auto;
    height:70pt;
}

nav {
    position:fixed;
    width : 100%;
    height: 70pt;
    left : 0%;
    top : 0%;
    background: rgb(0,0,0);
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 10px 10px var(--accent-shadow);
}

nav a{
    display:inline-block;
    width:100%;
    height: 100%;
    margin:0;
    padding-left: 10pt;
    padding-right: 10pt;
    align-content: center;
    text-justify: center;
    text-align: center;
    font-family: var(--main-font);
    color:var(--text-on-accent-color-color);
    text-decoration: none;
}

nav a:hover{
    background-color: var(--accent-shadow);
}

nav ul{
    width : auto;
    height : 100%;
    margin:0;
    padding-right:5%;
    justify-self: end;
    justify-content: right;
    display:flex;
    font-size: 1.5vw;
    font-family: var(--main-font);
    color: var(--text-on-accent-color);
}

nav ul li{

    height:100%;
    /* padding-left:1%;
    padding-right: 1%; */
    list-style: none;
    margin: 10pt 10pt;
    align-self: center;

    align-self: center;
    align-content: center;
    justify-content: center;
}

nav ul li:hover{
    background-color: var(--accent-shadow);
}

#TopContainer, #PortraitTopCornerContainer{
    position : relative;
    float:left;
}

.portrait_container{
    position : relative;
    float:left;
    margin-left: 1%;
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(15,15,19,1) 100%);
}


.top_container_text{
    font-family: var(--style-font);
    font-size: 2vw; 
    color:var(--text-on-accent-color);
    animation : fadeInText 1s linear; 
    animation-timing-function: ease-in-out; 
    animation-fill-mode: forwards;
    float:left;
    align-content: center;
    justify-content: center;
    height:100%;
    margin-left: 2%;
    margin-right: 2%;
}


h2{
    margin-top: 40pt;
    text-align: center;
    font-size: 1.8vw;
}

.index_content{
    margin-left : 10%;
    margin-right : 10%; 
    margin-top: 200pt;
    font-size: 1.5rem;
    font-family: var(--main-font);
    color: rgba(255,255,255,1);
}

.styled{
    margin-left : 10%;
    margin-right : 10%; 
    margin-top: 100pt;
    margin-bottom: 100pt;
    padding-left:1rem;
    border-bottom: 0.3rem solid #000000;
    border-left : 0.3rem solid #000000;
    box-shadow: 0 10px 30px var(--accent-shadow); 
}

.listing{
    margin-left : 5%;
    margin-top:100pt;
    margin-bottom:100pt;
    padding-left: 2rem;
    border-left : 0.3rem solid black;
}


section{
    color:var(--text-on-accent-color);
    font-size: 1.5rem;
    font-family: var(--main-font);
    color: rgba(255,255,255,1);
}

section h2{
    font-size:2rem;
    text-align: left;
}

section a{
    font-family: var(--main-font);
    color:var(--text-on-accent-color-color);
    text-decoration: underline;
}


@keyframes ButtonHoverSelectionBar{
    0% {
        background: rgb(0,0,0);
        background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(15,15,19,1) 100%);
    }

    100% {
        background: rgb(232,9,9);
        background: linear-gradient(90deg, rgba(232,9,9,1) 0%, rgba(224,191,191,1) 100%);
    }
}

@keyframes fadeInButton{
    0% {opacity : 0; color : rgba(0,0,0,0); transform : translateY(-100%);}
    100% {opacity : 1; color : rgba(255,255,255,1); transform : translateY(0%);}
}

@keyframes fadeInText{
    0% {opacity : 0; margin-top: 0%;}
    100% {opacity : 1; color : rgba(255,255,255,255);}
}


#ens_rennes_link{
    background:#324c98;
    color:white;
    text-decoration: none;
    /* border-radius: 10%; */
    border-width: 3pt;
    border-style: solid;
    border-color:#324c98;
}

footer{
    position:fixed;
    width : 100%;
    height: 40pt;
    left : 0%;
    bottom: 0;
    display:flex;
    background: rgb(0,0,0);
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0px -10px 10px var(--accent-shadow);

    color:var(--text-on-accent-color);
}

footer div{
    align-self: center;
    align-content: center;
    justify-content: center;
    height:100%;
    width:auto;
    padding:0;
    margin:0;
    font-family: var(--main-font);
}

#copyright{
    flex:1;
    margin-left:1%;
}

#message_addr{
    margin-right:1%;
}



@media (max-width: 768px) {
    nav ul{
        font-size: 1vw;
    }

    h2{
        font-size: 1vw;
    }
}