body {
    background-color: #0C0B0B;
    margin-right: 20%;
    margin-left: 20%;
    margin-bottom: 20%;
}

img {
    border-radius: 40px;
    max-width: 700px;
}

p {
    font-family: 'Roboto', sans-serif;
    color: white;
    font-size: 1em;
}

h2 {
    font-size: 2em;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    color: white;
    margin-bottom: 100px;
}


nav {
    margin-top: 0px;
    height: 60px;
    background-color: #0C0B0B;
    width: 100%;
    position: fixed;
    z-index: 100;
    scroll-behavior: smooth;
    top:0;
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    text-decoration: none;
    color: white;
    font-size: 1em;
    text-transform: uppercase;
}

nav ul {
    text-align: center;
}

nav ul li {
    display: inline-block;
    line-height: 30px;
    margin: 0 15px;
}

nav ul li a{
    position: relative;
}









span {
    color:#0800FF;
}

.citation {
    color: #EE00FF;
}

.legende {
    font-style: italic;
}
/*Home*/

.titre {
    width: 100%;
    margin-bottom: 200px;
}

.titre h2 {
    margin-top: 40%;
    text-align: center;
    margin-bottom: 40%;
}

.perception {
    margin-top: 40%;
    margin-bottom: 40%;
}

/*Introduction*/

.intro {
    width: 100%;
    text-align: center;
    margin-bottom: 200px;
    
}

.intro p{
    width: auto;
    height: auto;
}

.intro img{
    width: 400px;
    height: 250px;
    display: inline-block;
    text-align: center;
    display: inline-block;
    
}

.block_image_texte {
    width: 400px;
    height: auto;
    display: inline-block;
    margin-right: 20px;
}

/*Problematique*/

.problematique {
    text-align: center;
    width: 100%;
    height: 100%;
    font-size: 1.7em;
    margin-top: 40%;
    margin-bottom: 40%;
}

/*science-fiction*/
.partie  {
    text-align: center;
    font-size: 1.7em;
}

/*Axes*/
.axes {
    margin-top: 40%;
    margin-bottom: 40%;
}
.blocaxe img {
    width: 400px;
    height: auto;
}

.blocaxe {
    width: 400px;
    height: auto;
    text-align: center;
    padding: 20px;
    border: solid 0px #0800FF;
    border-radius: 40px;
    display: inline-block;
}

.blocaxe p{
    opacity: 0;
}

.blocaxe:hover{
    border: solid 2px #0800FF;
    transition: 0.5s;
    border-radius: 40px;
}

.blocaxe p:hover{
    opacity: 1;
}

/*partie*/

.partie {
    margin-bottom: 40%;
    margin-top: 40%;
}

/*perception*/
.perception {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.perception img{
    width: 250px;
    height: 500px;
    display: inline-block;
    padding: 10px;
}

.block_image_texte_portrait{
    width: 250px;
    height: auto;
    text-align: center;
}

.bloctexte {
    width: 190px;
    height: 190px;
    border: solid 2px #0800FF;
    padding: 40px;
    display: flex;
    text-align: center;
    margin: auto;
}

/*partie*/

.mosaictwo {
    margin-top: 25px;
    column-count: 2;
}
    
.mosaictwo img{
    width: 100%;
    margin-bottom: 1em;
}

.verne {
    margin-top: 40%;
    margin-bottom: 40%;
}

.verne img{
    float: left;
    max-width: 400px;
}


.livre {
    width: 200px;
    height: auto;
}

.cotedroite img {
    width: 200px;
    height: 150px;
}

.cotedroite {
    width: 200px;
    height: auto;
    float: right;
}


.blackmirror{
    width: 500px;
    margin-top: 40%;
    margin-bottom: 40%;
}

.blackmirror img{
    text-align: center;
}

.blackmirror h2{
    text-align: left;
}

.armure {
    margin-bottom: 40%;
    margin-top: 40%;
}

.defintion {
    margin-top: 40%;
    margin-bottom: 40%;
}

.definition p {
    font-size: 1.7em;
}

.signauxfaibles {
    margin-top: 40%;
    margin-bottom: 40%;
}


.signauxfaibles h1{
    width: 250px;
    padding: 30px;
    border: solid 0px #0800FF;
    display:inline-block;
    margin: auto;
    color: white;
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    justify-content: space-around;
}

.signauxfaibles h1:hover{
    border: solid 2px #0800FF;
}


.palpable h2{
    text-align: left;
}
.palpable h1{
    width: 200px;
    padding: 20px;
    border: solid 0px #0800FF;
    display:inline-block;
    margin: auto;
    color: white;
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    justify-content: space-around;
    margin: 10px;
    margin-bottom: 40px;
}

.palpable { 
    text-align: center;
    margin-top: 40%;
    margin-bottom: 40%;
}

.palpable h1:hover{
    border: solid 2px #0800FF;
}






.casusludi{
   margin-top: 40%;
   margin-bottom: 40%;
}

.casusludi p{
    width: 50%;
    height: auto;
    color: #0C0B0B;
}

.casusludi p:hover{
    color: white;
}

.casusludi img{
    width: 400px;
    float: right;
}


/*skyscrapper*/

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.container img{
    width: 250px;
    height: auto;
    padding: 5px;    
}


.matsuda h2{ 
    text-align: left;
}
.matsuda img{
    width: 450px;
    height: auto;
    display: inline-block;
    height: 250px;
    text-align: center;
    margin: 10px;
}

.matsuda {
    text-align: center;
    margin-top: 40%;
    margin-bottom: 40%;
}

.aday_vs_archigram img{
    width: 300px;
    height: 200px;
}

.aday_vs_archigram {
    text-align: center;
    margin-bottom: 40%;
    margin-top: 40%;
}

.aday_vs_archigram h2{
    text-align: left;
}


.entreprises img{
    width: 300px;
    height: 300px;
}

.entreprises {
    text-align: center;
    margin-bottom: 40%;
    margin-top: 40%;
}

.entreprises h2{
    text-align: left;
}

.adaymadeof img{
    width: 400px;
    height: 250px;
    display: flex;
    justify-content: space-between;
}

.adaymadeof {
    margin-top:40%;
    margin-bottom: 40%;
    text-align: center;
}

.adaymadeof h2{
    text-align: left;
}

.vs{
    margin-top: 40%;
    margin-bottom: 40%;
    column-count: 2;

}

.vs h2{
    width: 100%;
    margin-bottom: 80px;
}

.vs img{
    width: 400px;
}

.aday {
    width: 400px;
    display: flex;
}

.tomorrow {
    width: 400px; 
    display: ;   
}

.conclusion {
    margin-top: 40%;
    margin-bottom: 40%;
}

.conclusion img{
    width: 400px;
    height: 250px;
    display: inline-block;
    justify-content: space-around;
}

.gibson p{
    font-size: 1.875em;
    margin-top: 40%;
    margin-bottom: 40%;
}
.partoprojet img {
    max-width: 400px;
    height: 300px;
    
    
}

/*Index*/

.block {
    text-align: center;
    margin-top: 35%;
    text-align: center;
}

.bouton{
    border: white solid 1px;
    text-align: center;
    width: 250px;
    border-radius: 20px;
    padding: 20px;
    display: inline-flex;
    justify-content: space-between;
    text-align: center;
    cursor: pointer;
}

.bouton:hover{
    background-color: #0800FF;
    color: white;
}

.bouton p{
    text-align: center";
}