@font-face {
    font-family: "light";
    src:url("font/Millimetre-Light.woff") format("woff");
}

@font-face {
    font-family: "dinish";
    src:url("font/DINishCondensed-Bold.woff") format("woff");
}

@font-face {
    font-family: "regular";
    src:url("font/Millimetre-Bold.woff") format("woff");
}

body{
    margin-right:50px;
    margin-top:0;
    margin-left:0;
    margin-bottom:0;
    font-family: arial, times, sans-serif;
}

i{
    font-family: dinish;
}

span{
    font-size: smaller;
}

a{
    text-decoration: inherit;
    color: inherit;
}

/*PAGE INDEX*/
#img_index{
    width: 102%; 
    position:fixed;
    margin-left: 0%;
    margin-top: -2%;
}

.titre_index{
    margin-top: 0;
    margin-left: 33%;
    margin-right: 20%;
    font-family: dinish;
    font-size: 400%;
}

.titre_index:hover{
    opacity: 0.7;
}

#credit_index{
    z-index: 1;
    color: white;
    position: absolute; 
    bottom:0; 
    left:0.1; 
    right: 0;
    font-size: x-small;
}

/*PAGE INFO*/
#link{
    font-size: smaller;
    margin-left: 25%;
    margin-top: 5%;
}

.link:hover{
    opacity: 0.7;
}

#bio{
    font-size: smaller;
    margin-left: 25%;
    margin-right: 12%;
}

#credit_info{
    z-index: 1;
    position: absolute; 
    bottom:-1%;
    left: 2%; 
}

#credit_info:hover{
    opacity: 0.5;
}

/*PAGE MIXED MEDIA*/
.titre_mixed_media{
    margin-top: 3;
    margin-left: 2%;
    font-family: dinish;
    font-size: 170%;
}

.menu_mixed_media{
    right: 0;
    position: absolute; 
}

.menu_mixed_media:hover{
    opacity: 0.7;
}

#menu_principal{
    display:flex;
    height:calc(100vh - 80px);
      line-height: 1;
}

.titre_menu_principal:hover{
    opacity: 0.8;  
}

nav{
    width:300px;
    padding:20px;
    overflow-y:auto;
}

nav ul{
    list-style:none;
    margin:0;
    padding:0;
}

nav li{
    margin-bottom:10px;
}

nav a{
    text-decoration:none;
    color:inherit;
}

main{
    flex:1;
    padding:20px;
    overflow-y:auto;
}

img{
    max-width:100%;
    height:auto;
}

#info{
    margin-right: 40%;
    font-size: 90%;
    text-decoration: none;
}

