*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div#container {
  background-image: url("../images/ciel_bleu.png");
  max-width: 1200px;
  margin: 0px auto;
  padding:0;
  min-height: 400px;
  border: 0px solid #426;
  display: table;
}

div#container div#image .img-fluid {
height:100%;
padding:0;
margin:0;
width:100%;
position:relative;
top:0px;
}

div#container main {
  width: 100%;
  min-height: 250px;
  padding:0;
  margin:0;
}

div#container main .row h1 {
  font-weight: bold;
  font-size:30px;
  color: #a00;
  text-align: center;
  padding: 0px auto;
  margin: 10px auto ;
}



@media (max-width: 768px) {
div#container main .row h1 {
font-size: 22px;
}
}

.top-row {
display:flex;
justify-content: space-between;
align-items: center;
margin:10px 50px;
}

/* smartphones */
@media (max-width: 768px) {
.top-row {
margin: 10px;
}
}

/* smartphones */
@media (max-width: 768px) {
div#container main .top-row ul li a {
font-size:10px;
}
}

div#container main .row {
margin:10px auto 0px auto;
}

/* smartphones */
@media (max-width: 768px) {
div#container main .row {
margin:0;
}
}

div#container main .row p {
  font-weight: bold;
  font-style: italic;
  color: #703;
  font-size: 22px;
  text-align: center;
 
}

/* smartphones */
@media (max-width: 768px) {
div#container main .row p {
font-size: 16px;
}
}

div#container main h2 {
font-weight: bold;
margin: 10px auto;
text-align: center;
font-size: 24px;
}

/* smartphones */
@media (max-width: 768px) {
div#container main .row h2 {
font-size:18px;
}
}

div#container main div#commentaire_1,
div#container main div#commentaire_2 {
  width: 95%;
  border: 1px solid #000000;
  border-radius: 20px;
  padding: 10px auto;
  margin: 10px auto;
  background-image: url("../images/ciel_rose.png");
}

/* smartphones */
@media (max-width: 768px) {
div#container main div#commentaire_1,
div#container main div#commentaire_2 {
width:98%; 
padding:5px auto; 
margin: 5px auto;
border: 0px solid #000000;
border-radius: 10px;
}
}

div#container main div#commentaire_1 p,
div#container main div#commentaire_2 p {
  font-weight: bold;
  font-style: italic;
  font-size: 20px;
  color: #11d;
  text-align: justify;
  padding: 10px;
}

@media (max-device-width: 768px) {
div#container main .row div#commentaire_1 p,
div#container main .row div#commentaire_2 p {
font-size:16px;
padding:5px;
}
}

div#container main div#reprints {
  width: 95%;
  border: 1px solid #000000;
  border-radius: 20px;
  background-image: url("../images/gris_clair.png");
  padding: 5px auto;
  margin: 10px auto;
  text-align: center;
}

@media (max-width: 768px) {
div#container main div#reprints {
  border: 0px solid #000000;
  border-radius: 10px;
  margin: 5px auto;
}
}

div#container div#reprints p {
  color: black;
  font-weight: bold;
  font-size: 18px;
  padding:0px ;
  text-align: center;
}

@media (max-width: 768px) {
div#container div#reprints p {
  font-size: 14px;
}
}

div#container div#reprints h3 a {
  color: red;
  font-weight: bold;
  font-size: 20px;
  padding:5px 0px ;
  text-align: center;
}

@media (max-width: 768px) {
div#container div#reprints h3 a {
  font-size: 16px;
  padding:5px 0px;
}
}

div#container main div#passages_parallèles {
  width: 95%;
  border: 1px solid #000000;
  border-radius: 20px;
  background-image: url("../images/gris_clair.png");
  padding: 5px auto;
  margin: 10px auto;
}

@media (max-width: 768px) {
div#container main div#passages_parallèles {
  border: 0px solid #000000;
  border-radius: 10px;
  margin: 5px auto;
}
}

div#container div#passages_parallèles p {
  color: black;
  font-weight: bold;
  font-size: 18px;
  padding:5px ;
  text-align: justify;
}

@media (max-width: 768px) {
div#container div#passages_parallèles p {
font-size: 14px;
}
}

div#container main div#hymnes {
  width: 95%;
  border: 1px solid #000000;
  border-radius: 20px;
  background-image: url("../images/gris_clair.png");
  padding: 5px auto;
  margin: 10px auto;
}

@media (max-width: 768px) {
div#container main div#hymnes {
  border: 0px solid #000000;
  border-radius: 10px;
  margin: 5px auto;
}
}

div#container div#hymnes p {
  color: black;
  font-weight: bold;
  font-size: 18px;
  padding:5px ;
  text-align: center;
}

@media (max-width: 768px) {
div#container div#hymnes p {
font-size: 14px;
}
}

div#container main div#Poèmes {
  width: 95%;
  border: 1px solid #000000;
  border-radius: 20px;
  background-image: url("../images/gris_clair.png");
  padding: 5px auto;
  margin: 10px auto;
}

@media (max-width: 768px) {
div#container main div#Poèmes {
  border: 0px solid #000000;
  border-radius: 10px;
  margin: 5px auto;
}
}

div#container div#Poèmes p {
  color: black;
  font-weight: bold;
  font-size: 18px;
  padding:5px ;
  text-align: center;
}

@media (max-width: 768px) {
div#container div#Poèmes p {
font-size: 14px;
}
}

div#images {
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0px solid #88f;
  display: flex;
}

div#images img {
width: 60%;
margin: 10px auto;
align-items: center;
border: 0px solid #88f;
border-radius: 20px;
}

/* smartphones */
@media (max-width: 768px) {
div#images img {
width:85%;
}
}

div#images .top-left a {
  position: absolute;
  top: 30%;
  left: 10%;
  font-size: 20px;
  font-weight: bold;
  color: #00f;
text-align:center;
}

@media (max-width: 768px) {
div#images .top-left a {
left:1%;
font-size: 14px;
}
}

div#images .top-right a {
   position: absolute;
  top: 30%;
  right: 10%;
  font-size: 20px;
  font-weight: bold;
  color: #00f;
text-align:center;
}

@media (max-device-width: 768px) {
div#images .top-right a {
right:1%;
font-size: 14px;
}
}

div#images .top-left a:hover,
div#images .top-right a:hover,
div#Poèmes a:hover,
div#hymnes a:hover,
div#paspar a:hover,
div#reprints a:hover  {
  background-color: #fff;
  color: #a00;
  font-weight: bold;
  text-decoration: none;
}

div#Poèmes a,
div#hymnes a,
div#paspar a,
div#reprints a
 {
  color: #a00;
  text-decoration: none;
}

audio {
position: relative;
opacity:1;
margin: 10px auto;
height: 20px;
width:30%;
z-index:1;
}

div#container main .dropbtn 
{
margin: 0px;
padding: 0px;
font-size: 18px;
}

.dropdown-content {
margin: 25px 0px 0px 0px;
padding:2px;
width: 25px;
}

.dropdown-content a 
{
color: #000;
font-weight:bold;
float:right;
margin: 3px 0px;
font-size: 15px;
text-decoration: none;
display: block-inline;
}

/* Reihe mit gleichmäßiger Verteilung */
div#container main .top-row {
  display: flex;
  justify-content: space-evenly; /* gleichmäßig verteilt */
  align-items: center;
  margin: 10px 0;
width:100%;
background-color:blue-light;
}

/* Sprachliste */
div#container main .language-list ul {
  list-style: none;
background: #007bff;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0 px;
  border-radius: 5px;
}

div#container main .language-list a, 
div#container main .language-list span {
  text-decoration: none;
   padding: 5px;
  border: none;
  background: #007bff;
  color: #fff;
    cursor: pointer;
font-size: 16px;
font-weight: bold;
}

div#container main .language-list a:hover
 {
  background-color: #fff;
  color: #a00;
  font-weight: bold;
  text-decoration: none;
}

 .language-list .active {
  font-weight: bold;
  color: #f55;
font-size:16px;
  cursor: default;
background: #ccc;
}

/* Buttons */
div#container main button {
  padding: 5px;
  border: none;
  background: #007bff;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
font-size: 16px;
font-weight: bold;
}

div#container main button:hover {
  background: #0056b3;
}

/* smartphones */
@media (max-width: 768px)
{.language-list .active,
.language-list a, 
.language-list span,
div#container main button
{font-size: 10px;}
}

/* Overlay */
div#container main .popup {
  display: none;
position: relative;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  background: rgba(0,0,0,0.6);
  justify-content: flex-start;
  align-items: flex-start;
  z-index: 9999;
  overflow-y: auto;
}

/* Popup-Inhalt */
div#container main .popup .popup-content {
background: #eef;
  color: #000;              /* schwarzer Text */
  font-size: 20px;          /* Schriftgröße */
  width: 80%;              /* volle Breite */
  max-height: 100%;         /* volle Höhe */
  padding: 20px;  /* Abstand innen */
margin:0px auto;       /* Abstand aussen */
  box-sizing: border-box;
(Buttons) */
border-radius:20px;
overflow-y: auto;
z-index: 9999 !important;
}

/* smartphones */
@media (max-width: 768px)
{div#container main .popup .popup-content {
width:100%;
top:0;
z-index:9999;
}
}

 div#container main #popup1 .popup-content .popup-text
{
color: #000;              /* schwarzer Text */
font-size: 20px;          /* Schriftgröße */
text-align: justify;
}

div#container main #popup2 .popup-content .popup-text
{
color: #000;              /* schwarzer Text */
font-size: 20px;          /* Schriftgröße */
text-align: justify;
}

/* smartphones */
@media (max-width: 768px) {
div#container main #popup1 .popup-content .popup-text,
div#container main #popup2 .popup-content .popup-text {
font-size: 16px;
}
}

div#container main #popup1 .popup-content h2
{
color: #500;              
font-size: 28px;          
text-align: center;
margin: 20px auto;
}


@media (max-width: 768px) {
div#container main #popup1 .popup-content h2 {
font-size: 16px;
margin: 10px auto;
}
}

div#container main #popup2 .popup-content h2 {
color: #500;              
font-size: 28px;          
text-align: center;
margin: 20px auto;
}

@media (max-width: 768px) {
div#container main #popup2 .popup-content h2 {
font-size: 16px;
margin: 10px auto;
}
}

div#container main .close {
  position: relative;
  top: 20px; 
right: 8%;
  font-size: 40px;
  cursor: pointer;
color: #000 !important; 
}

@media (max-width: 768px) {
div#container main .close {
  top: 10px; 
  right: 2%;
  font-size: 25px;
}
}