@font-face {
    font-family: "Made Tommy Soft";
    src: url('fonts/MADE Tommy Soft Light PERSONAL USE.otf');
}


body {
    margin: 0;
    color:#ffffff;
    font-family:"Made Tommy Soft";
    background-image: url(../pics/fond.jpeg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: auto;
    font-size: 50%;
}
header {
    background-color:#BF213E;
}

header::after {
content:'';
display: table;
clear: both;
}
.logo {
    float: left;
    height: 100px;
    width: 100px;
    padding:10px 0;
}
.container {
    width: 80%;
    margin: 0 15 0 15; 
}
nav {
    float: right;
    }
    
    nav ul {
        margin:0 ;
        padding: 0;
        list-style: none;
    }
    
    nav li {
        display:inline-block;
        margin-left:70px;
        padding-top: 47px;
    }
    
    nav a {
    color:#ffffff;
    text-decoration:none;
    font-size:1.5em;
    }
    
    nav a:hover {
    background-color:#E6863C;
    border-radius: 5mm;
    padding: 20px;
    width:300px;
    box-sizing: border-box;
    
    }

    .carre2 {
    border : 2px solid white;
    border-radius: 5mm;
    width: 30%;
    background-color : #8C0343;
    position : relative ;
    top: 110px; left: 510px; right: 150px; 
    font-size: 2em;
    padding: 0px 10px 0px 0px;
    text-align: center;
    }

    .carre1 {
        border : 2px solid white;
        border-radius: 5mm;
        width: 30%;
        background-color: #49B3BF;
        position : relative ;
        top: 110px; left: 510px; right: 150px; 
        font-size: 2em;
        padding: 0px 10px 0px 0px;
        text-align: center;
        display: inline-block;
        }

    img {
    border : 2px solid white;
    border-radius: 5mm;
    position : center ;
    bottom: 100px; right: 500px; 
    width: 30%;
    height: 30% ;
    }

    h1 {
        font-size: 1em;
    }

    li {
        list-style-type: none;
        position: center;
    }

    #carte {
position: relative;
left:100px;
height: 300px;
  width: 600px;
    }

#model {
    position: relative;
    right: 80%;
    
}

#id {
    text-align: left;
    float: right;
    position: relative;
    top: 10%;
    right: 7%;
}

#photoid {
    width: 150px;
    height: 200px;
}

#lunettes {  
position: relative;
left:100px;
 height: 300px;
 width: 600px;
 margin-top: 10px;
}

#artiste {
    position: relative;
    left: 50%;
    bottom: 10%;
}