@font-face {
   font-family: titre;
   src: url(fonts/apollo-regular/Apollo-Regular/Apollo-Regular.otf);
}

@font-face {
    font-family: paragraphe ;
    src: url(fonts/Nippo_Complete/Nippo_Complete/Fonts/OTF/Nippo-Regular.otf);
}

@font-face {
    font-family: legende;
    src: url(fonts/Nippo_Complete/Nippo_Complete/Fonts/OTF/Nippo-Extralight.otf);
}

@font-face {
    font-family: bold;
    src: url(fonts/Nippo_Complete/Nippo_Complete/Fonts/OTF/Nippo-Bold.otf);
}

body{
    background-color:#96e5d5 ;
}

.entete{
    
   width: 100%;
}



h1{
    font-family: titre;
    color:#000aab ;
    font-size: 69px;
    display: inline-block;
    width: 40%;
    margin-left: 5%;
    text-shadow:2px 2px 4px black;
}

#img_intro {
      display: inline-block;
      width: 40%;
      margin: 5%;
}

h2{
    font-family:bold;
    font-size: 40px;
    color: #000aab;
    width: 40%;
    display: inline-block;
    margin-left: 5%;
    vertical-align: top;
}

.intro{
    color:#00c6e9 ;
    font-size: 28px;
    background-color: #001967;
    padding: 2%;
    width: 40%;
    display: inline-block;
    margin-left: 5%;
}

.col{
    font-family: paragraphe;
     color:#00c6e9 ;
    font-size: 28px;
    background-color: #001967;
    padding: 25px;
    display: flex;
    padding: 2%;
    margin: 2%;
}

.legend {
    font-size: 28px;
     color:#000aab ;
     font-family: legende;
     display: block;
     width: auto;
}

img{
    border-style: dashed;
    border-color: #001967;
    border-width: 15px;
    display: inline-block;
}

.debut{
    display: inline-block;
    width: 40%;
}

h3{
    font-family: bold;
    font-size: 80px;
    color: #0916ad;
    border-style: dashed;
    border-width: 15px;
    padding: 2%;
    display: inline-block;
    width: 40%;
    vertical-align: top;
    margin-left: 5%;
}


.grand{
    font-family: bold;
    font-size: 50px;
    color: #0916ad;
    border-style: dashed;
    border-width: 15px;
    padding: 2%;
    padding-right: 8%;
     display: inline-block;
    width: 40%;
}

p{
    font-family: paragraphe;
    font-size: 36px;
    display: inline-block;
    width: 40%;
    margin-left: 5%;
    vertical-align: top;
}

span{
    font-weight: bold;
}

.question_1{
    display: inline-block;
    width: 100%;
    vertical-align: top;
   
}

.question_2{
      display: inline-block;
    
}

.texte{
    margin-left: 2%;
}

.question_3{
    width: 80%;
}

.question_4{
    font-size: 50px;
}

.question_5{
    width: 80%;
}

.source{
    font-size: 29px;
    font-family: legende;
    color: #ff3c00;
    display: block;
    border: 3px solid #ff3c00;
     text-align: center;
   margin-left: 0%; 
}






/* SMARTPHONE MODE PORTRAIT */
@media screen and (orientation: portrait) {

body{
    width:100%;
    display:block;
    margin-left:5%;
    margin-right:5%;
}


.entete{
    width:100%;
    display:block;
    margin-bottom:5%;
}

#img_intro{
    width:100%;
    display:block;
    margin-bottom:5%;
}

img{
    width:100%;
    display:block;
    border-width:5px;
    margin-bottom:5%;
}

.legend{
    width:100%;
    display:block;
    margin-bottom:5%;
}


h1{
    width:100%;
    display:block;
    margin-bottom:5%;
    font-size:32px;
    border-width:5px;
}

h2{
    width:100%;
    display:block;
    margin-bottom:5%;
    font-size:32px;
}


.intro{
    width:100%;
    display:block;
    margin-bottom:5%;
    font-size:15px;
    border-width:5px;
}


.col{
    width:100%;
    display:block;
    border-width:5px;
    margin-bottom:5%;
}

p{
    width:100%;
    display:block;
    margin-bottom:5%;
    font-size:15px;
}


h3{
    width:100%;
    display:block;
    margin-bottom:5%;
    font-size:32px;
    border-width:5px;
}

.grand{
    width:100%;
    display:block;
    margin-bottom:5%;
    font-size:32px;
    border-width:5px;
}


.question_1{
    width:100%;
    display:block;
    margin-bottom:5%;
}

.question_2{
    width:100%;
    display:block;
    margin-bottom:5%;
}

.texte{
    width:100%;
    display:block;
    margin-bottom:5%;
}

.question_3{
    width:100%;
    display:block;
    margin-bottom:5%;
}

.question_4{
    width:100%;
    display:block;
    margin-bottom:5%;
}

.question_5{
    width:100%;
    display:block;
    margin-bottom:5%;
}


.source{
    width:100%;
    display:block;
    margin-bottom:5%;
    font-size:15px;
}

}