body {
  --bleu-fonce:#23243C;
  --bleu:#4B516B;
  --nature:#9D8F9C;
  --beige:#CCB1AB;
  --blanc:#BEBAB3;
  margin: 0;
  display:flex;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background-color: black;
}


.page-corner{
  position: fixed;
  bottom: 0px; 
  right: 0px;  
  z-index: 999; 
  width: 20vh;
  height:auto;
}

#boutton-corner{
  height:0px;
  width: 0px;
  margin:0px;
  padding:0px;
  border-style:none;
}

#boutton-retour{
    background-color: black;
    border: 1px solid #000;
    position: absolute;
    left:0px;
    top:0px;
    margin-left:2vw;
    margin-top:2vh;
}



#logo-retour{
  height:6vh;
}

header{
  width:100%;
  height:28vh;
  background-color: rgb(0, 0, 0);
  color: aliceblue;
  text-align: center;
}

#temps-lecture{
  color:rgb(255, 255, 255);
  margin-right: 3%;
}

#logo-vocal{
  height:4vh;
  transition: transform 0.3s ease;
}

#logo-vocal:hover{
  transform: scale(1.3);
}

#logo-vocal:active{
  transform: scale(0.9);
}

#play-vocal{
  background-color: black;
  border: 1px solid #000;
  margin-right:5px;
}

#box-lecture{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: row;
  background-color: rgb(0, 0, 0);
  margin:0px;
}

h1{
  margin-top:5vh;
  color: white;
}

h2{
  font-size: 15px;
  margin-left :25vh;
  color:gray;
}

main{
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-wrap: wrap;
}
#index{
  display: flex;
  width: 30%;
  background-color: var(--beige);
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-direction: column;
}

#article{
  display: flex;
  width: 70%;
  background-color:var(--nature);
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-direction: column;
  font-size: larger;
}

#article-fin{
  display: flex;
  width: 100%;
  background-color:var(--beige);
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-direction: column;
  font-size: large;
}

#expression{
  display:flex;
  width: 70%;
  background-color: var(--bleu);
  align-items: center;
  align-content: center;
  justify-content: center;
}

#photo{
  display:flex;
  width:30%;
  height:auto;
  background-color: var(--bleu-fonce);
  align-items: center;
  align-content: center;
  justify-content: center;
}

footer{
  background-color: #000000;
  width: 100vw;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  text-overflow: ellipsis;
}

h3{
  color:white;
  margin-left:3%;
  margin-bottom: 0px;
}

ul{
  margin-top:10px;
  color:rgb(170, 165, 165);
  margin-left:3%;
  text-overflow: ellipsis;
  width: 90%;
  word-break: break-all;
}

li{
    width:90%;
    text-overflow: ellipsis;
    word-break: break-all;
}

#auteur{
    width: 100%;
  color:white;
  font-size: 20px;
  text-align: end;
  margin-right:0px;
}

.guillemet-debut{
  width: 15%;
  margin:25px;
  margin-bottom:50px
}

.guillemet-fin{
  width: 15%;
  margin:25px;
  margin-top: 50px;
}

#citation{
  color:white;
  font-size:xx-large;
  text-align: center;
}

.text-article{
  margin-right:25px;
  margin-left:25px;
  margin-top:0px;
  margin-bottom: 0px;
  text-align: center;
}


#contenu{
  margin-bottom:5%;
  text-align: center;
  width: 90%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}

#contenu-row{
  margin-bottom:5%;
  text-align: center;
  width: 90%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: row;
}

#hashtag{
  margin-bottom:5%;
  width: 90%;
  height: 20%;
  text-align: center;
  background-color: var(--bleu-fonce);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  color:white;
}

h4{
  margin:5px;
  margin-top:10px;
  text-align: center;
}

.image-contenu{
  width: 90%;
  height: auto;
  margin:5%;
  transition: transform 0.3s ease;
  border-radius: 20px;
}

.demi-image-contenu{
  width: 90%;
  height: auto;
  transition: transform 0.3s ease;
  border-radius: 20px;

}

.image-contenu:hover, .demi-image-contenu:hover{
  transform: scale(1.3);
}

#portrait{
  width: 65%;
  height:auto;
  margin:15px;
  border:outset;
}


@media (max-width:768px){


#contenu-row{
  flex-wrap: wrap;
}

#article{
  font-size: small;
}

#article-fin{
  font-size: small;
}

#citation{
  font-size: small;
}

.guillemet-debut{
  width: 10%;
  margin:15px;
  margin-bottom:50px
}

.guillemet-fin{
  width: 10%;
  margin:15px;
  margin-top: 50px;
}
#temps-lecture{
    font-size: smaller;
}
#logo-vocal{
    height:2vh;
}
ul{
  margin-top:10px;
  color:rgb(170, 165, 165);
  margin-left:3%;
  text-overflow: ellipsis;
  width: 75%;
  font-size: smaller;
  word-break: break-all;
}

li{
    width:75%;
    text-overflow: ellipsis;
    font-size: smaller;
    word-break: break-all;
}

#index{
  display: flex;
  width: 100%;
  background-color: var(--beige);
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-direction: column;
  padding:30px;
}

#article{
  display: flex;
  width: 100%;
  background-color:var(--nature);
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-direction: column;
}

.image-contenu{
    width:100%;
    margin:5%;
}
.demi-image-contenu{
    width: 100%;
    margin:5%;
}

#index{
    flex-direction: row;
    flex-wrap: wrap;
}
#index a{
    width:40%;
    height: auto;
    margin-right:5%;
    margin-left:5%;
}
h2{
   font-size: x-small;
}

#boutton-retour{
    left:0px;
    top:0px;
    position: absolute;
}
#hashtag{
    margin-bottom:5vh;
}
header{
  width:100%;
  height:20vh;
  background-color: rgb(0, 0, 0);
  color: aliceblue;
  text-align: center;
}

}