@charset "UTF-8";

html { 
	font-size: 62.5%; 
}

body {
	background-color: #FFF;
	font-size: 1.6rem;
	font-family:"Courier New", Courier, monospace;
	color: #333;
	line-height:2.4rem;
    padding-top: 20rem;
}

h1, h2 {
    font-size: 1.6rem;
    line-height:2.4rem;
	font-weight:bold;
    margin: 0;
    padding: 0;
}

.avatar {
    margin-bottom: 2rem;
}

/* style des liens */

a {
	color:#ec3d15;
}

.lien
{ 	color: #ec3d15;
	text-decoration: none;
	border-bottom: 1px solid #ec3d15;
}

.lien:link {
	color: #ec3d15;
}

.lien:visited {
	color: #833abc;
	border-bottom: 1px solid #833abc;
}

.lien:hover {
    color:#FFF;
	background-color:#ec3d15;
	border-bottom: 0px;
}

span.highlight {
    background-color: #ec3d15;
}

.couverture {
    margin-bottom: 2rem;
    border-width:1px;
    border-style:solid;
    border-color:#d1d1d1;
}

/* responsive */

@media screen and (min-width: 400px) {
    
    #description {
        margin-left: 5rem;
    }

    #tableau {
        list-style: none;
        margin: 0;
        padding: 5rem 2rem 0 0;
    }

    #tableau li {
        width: auto;
        float: left;
        padding:0 0 10rem 5rem;
    }

    .couverture {
        width: 320px;
        height: 320px;
    }
}

@media screen and (max-width: 400px) {
    
    #description {
        margin-left: 3rem;
    }

    #tableau {
        list-style: none;
        margin: 0;
        padding: 5rem 2rem 0 0;
    }

    #tableau li {
        width: auto;
        float: left;
        padding:0 0 10rem 3rem;
    }

    .couverture {
        width: 240px;
        height: 240px;
    }
}