/*font*/
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=VT323');

hr { border-width: 2px;
     color:#ffffff;
     border-style: solid;
     border-bottom: 2px dashed #ffffff;
} 

body {
     text-align:left;
     margin-left: 20pt;
     margin-right: 20pt;
    background:#ff3131;
    color:#ffffff;
    line-height:10pt;
    padding:0;
} 

h1 {
    font-size: 40pt;
    color:#ffffff;
    margin-top: 30pt;
    line-height: 70px;
   font-family: Roboto;
}

.scroll {
    font-size: 15pt;
    color:#ffffff;
    margin-top: 30pt;
    margin-bottom: 30pt;
    font-family: Roboto;
}

h6 {
    font-size: 20pt;
    color:#ffffff;
    margin-top: 30pt;
    font-family: Roboto;
}


h2 {
    font-size: 20pt;
    /*color: #000000;*/
    margin-top: 0pt;
    font-family: VT323;
    /*background: #000000;*/
    line-height: 1.2;
    transition: all 1s linear; 
    /*padding: 0px 20px;*/
}

h2{
    background: transparent;
    color: #ffffff;
    padding: 0;
}

.titre{
    position: relative;
}

.rect{
    position: absolute;
    background: #000000;
    height: 40px;
    width: 90%;
    top:0;
    opacity: 1;
}

h3 {
    font-size: 10pt;
    color:#ffffff;
    font-family: Roboto;
}

h6 {
    margin-bottom: 0;
}

p {
    width: 100%;
    font-size: 10px;
    line-height: 20px;
    position:left;
    font-family: Roboto;
    margin-bottom: 10px;
}

.legende{
    color: #ffffff;
    text-align: left;
    font-size: 5px;
    margin-bottom: 20px;
}

.rond{
	width:100px;
	height:100px;
    background: #FFF;
    opacity: 1;
	
	-webkit-border-radius:100px;
	-moz-border-radius:100px;
	-o-border-radius:100px;
	border-radius:100px;

    transition: all 1s linear; 
    position: absolute;
    filter: blur(4px);
}
/*.rond:hover {
    background: transparent;
}*/

.rond-tech {
	top: 60px;
	left: 100px;
	width: 50px;
	height: 50px;
}

.rond-techsans {
    top: 57px;
    left: 110px;
    width: 100px;
    height: 100px;
}

.rond-bayonetta {
	top: 15px;
	left: 80px;
}

.rond-licorne {
	top: 5px;
	left: 90px;
	width: 150px;
	height:150px;
}

.rond-woman {
	top: 30px;
	left: 120px;
    width: 50px;
    height: 50px;
}

.rond-fel {
	top: 10px;
	left: 60px;
}

.rond-transgenre {
	top: 20px;
	left: 40px;
	width: 180px;
	height:180px;
}
img {
    width: 100%

}

/*conteneur img*/
.image-wrapper {
   width: 100%;
   position: relative;

}

/*responsive*/
.flexbox {
    display: flex;
}

/*adaptatif*/
@media only screen and (max-width: 768px) {
    body {
    font-size: 20px;
        }
}