* {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  box-sizing: border-box;
}
body {
    background-color: #eeeeee;


}
p {
    margin-bottom: 10px;
}
.wrapper {
    width: 360px;
    margin: 0 auto;
    position: relative;
   
}
.menu-bar {
    background-color: #eeeeee;
    height: 50px;
}
#burger {
  border: 0;
  position: absolute;
  top: 19px;
  left: 5px;
  background: none;
}
.img-burger {
  height: 30px;

}
#btn-question {
  border: 0;
  position: absolute;
  top: 21px;
  right: 5px;
  background: none;
}
.img-question {
  height: 25px;
}
.burger-slide {
  overflow: auto;
  width: 360px;
  height: 592px;
  background-color: #ACA09B;
  position: absolute;
  top: 50px;
  border: 2px solid #ffffff;
  padding: 5px;
  z-index: 500;
}
.disp-burger-slide {
  display: none;
}
.questions-slide {
    overflow: auto;
    width: 360px;
    height: 592px;
    background-color: #ACA09B;
    position: absolute;
    top: 50px;
    border: 2px solid #ffffff;
    padding: 5px;
    z-index: 500;
}
.disp-questions-slide {
    display: none;
} 
ul {
    list-style: none;
    padding-left: 20px;
    font-size: 0.8em;
}
.promotion {
  display: inline-block;
  width: 325px;
  border: 1px solid red;
  padding: 5px;
  font-size: 0.8em;
}
li::before {
    content: "• "; 
    display: inline-block;
    width: 1em; 
    margin-left: -1em; 
    
}
.footnote {
  position: absolute;
  right: 20px;
  top: 66px;
}
.footnote-text {
  font-size: 0.6em;
}
 

.questions {
  
  top: 10px;
  left: 10px;
  position: absolute;
  color:azure;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 600;
  max-width: 360px;
  overflow-x: hidden;
}
.img-questions {
    left: 10px;
}
.questions a {
    color: #51403B; 
}
.questions a:visited {
    color: #cecece; 
   }
.questions a:active {
    color: #96756c; 
   }
.questions p a {
    color: #51403B;
   }
.questions p a:visited {
    color: #cecece; 
   }
.questions p a:active {
    color: #96756c; 
   }


/* ##### */

.nav-item {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 600;
}
.adv {
    height: 116px;
    width: 360px;
    background-color: #d9b8a781;
    position: relative;
    z-index: -1;
}
.adv-block {
    height: 100px;
    width: 320px;
    background-color: #dcb5a386;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
.main {
    text-align: center;
}
.pict {
    height: 360px;
}
.pic {
    width: 360px;
}

.buttons {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    background-color: #d9b8a781;
    height: 96px;
    padding: 0 20px; 
}

.center-controls {
    display: flex; 
    align-items: center; 
    gap: 20px; 
    
}


.button-backward img,
.button-forvard img {
    height: 60px; 
    width: auto;
    cursor: pointer;
    vertical-align: middle; 

}
.button-favorite img {
      display: none;
}


.image-info {
    white-space: nowrap; 
    min-width: 110px; 
    text-align: center; 
}
#pictname {
    font-weight: bold;
    color: #333;
    font-size: 1.1em; /
}

.share {
  margin-left: -30px;
}
.share-button {
    background-color: transparent; 
    color: #6c757d; 
    border: none;
    border-radius: 5px;
    cursor: pointer;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease; 
    width: 48px;
    height: 48px;
}

.share-button:hover {
    background-color: rgba(0,0,0,0.05);
    color: #5a6268; 
}

.share-button svg {
    width: 24px;
    height: 24px;
    transform: rotate(180deg);
}

.footer {
    height: 20px;
    background-color: #cc987085;
}
.footer-ornament {
    height: 20px;
    width: 360px;
}
.menu-bar-ornament {
    height: 20px;
    width: 360px;
}