body {
  background-image: url("../images/site/background_home_v2_3.jpg");
  display: flex;
  flex-direction: column;
  align-items: center;
  /* font-size: clamp(1rem, 3vw, 2.03rem); */
}

.titre {
  display: flex;
  justify-content: center;
}

main {
  position: relative;
  margin: 6vh 0.8em 0 0.8em;
  max-width: 75em;
  /* height: 18em;
  min-height: 600px; */
  display: grid;
  grid-template-columns: 0.8fr 2fr 0.8fr;
  gap: 2em 2em;
}

.box {
  padding: 0.75em;
  margin-bottom: 2em;
  background-position: center;
}

.section-left {
  margin-top: 5em;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.menu--list--item {
  margin-bottom: 0.3em;
  padding: 0.4em;  
  p {
    font-size: 1.2em;
    text-shadow: 0px 0px 1px var(--color-pink), 0px 0px 6px var(--color-pink), 0px 0px 1px white;
    filter: drop-shadow( 0 8px white) drop-shadow( 8px 0 white) drop-shadow( 0 -8px white) drop-shadow( -8px 0 white);
  }
}

.menu--footer {
  display: flex;
  justify-content: center;
  margin-bottom: 2em;
  .smilies {
    height: 2.5em;
  }
}

.updatelog {
  background-image: url("../images/site/star_background.jpg");
  background-repeat: repeat;
  background-size: cover;
  height: 11em;
  overflow: auto;
}

.updatelog--title {
  font-weight: bold;
  text-decoration: underline;
  color: var(--color-purple);
  font-size: 1em;
  padding-bottom: 1em;
}

.updatelog--date {
  font-weight: bold;
  text-decoration: underline;
  color: var(--color-purple);
}

.section-middle {
  display: grid;
  height: inherit;
  min-height: inherit;
  width: 100%;
}

.intro {
  background-image: url("../images/site/dot_background.jpg");
  background-repeat: repeat;
}

.about {
  background-image: url("../images/site/little_stars_background.jpg");
  background-repeat: repeat;
  background-size: contain;
}

.lists {
  height: 300px;
  /* margin: 0;
  padding: 0; */
}

.lists--grid {
  display: grid;
  height: inherit;
  min-height: inherit;
  width: 100%;
  grid-template-columns: 1fr 0.7fr;
  gap: 2em;
}

.favorites {
  overflow: auto;
  margin-top: 0;
  background-image: url("../images/site/pietro_background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.list-item {
  padding-bottom: 1em;
}

.currently {
  overflow: auto;
  margin-top: 0;
  background-image: url("../images/site/line_background.jpg"); 
  background-repeat: repeat;
  background-size: contain;
}

.listening--title {
  display: flex;
  justify-content: center;
  color: white;
}

.section-right {
  margin-top: 5em;
}

.links {
  background-image: url("../images/site/mew_background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.links--title {
  font-weight: bold;
  text-decoration: underline;
  color: var(--color-pink);
  font-size: 1em;
  padding-top: 1em
}

.diary {
  background: none;
  border-style: dotted;
  border-color: white;
  height: 12em;
  overflow: auto;
  padding: 15px 15px 6px 6px;
}

.diary--title {
  background-image: url("../images/site/background_dot_2.jpg");
  background-repeat: repeat;  
  background-size: cover;
  font-weight: bold;
  text-decoration: underline;
  color: var(--color-light-purple);
  font-size: 1em;
  border: 4px solid var(--color-light-pink);
  border-radius: 100px 120px 100px 100px/70px 225px 65px 205px;
  box-shadow: 0 3px 0 #ebb9d4, 0 5px 10px rgb(247, 255, 187); 
  text-align: center;
  margin: 2em 0 0.3em 0;
}

#diary-container {
    display: flex;
    flex-direction: column;
    gap: 10px; 
}

.ac-bubble {
    position: relative;
    background-image: url("../images/site/background_dot_2.jpg");
    background-repeat: repeat;
    background-size: cover;
    border: 4px solid var(--color-light-pink);
    border-radius: 100px 120px 100px 100px/70px 225px 65px 205px;
    padding: 10px 15px 6px 15px;
    box-shadow: 0 3px 0 #ebb9d4, 0 5px 10px rgb(247, 255, 187); 
    color: #746149; 
    margin: 8px 0;
}

.ac-badge {
    position: absolute;
    top: -25px;
    left: 8px;
    width: 80px;  
    height: 40px;
}

.ac-content {
    margin: 0;
    padding-bottom: 0.3em;
}

.ac-date {
  font-size: 0.5em;
  text-align: end;
}

footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 60%;
  gap: 1.5em;
  margin: 2em;
}

.stamps {
  background-color: white;
  overflow: hidden; 
  width: 100%;     
  white-space: nowrap;
  height: 56px;
  padding: 0;
}

.stamps-track {
    display: inline-flex;
    animation: defilement 25s linear infinite;
}

.stamps--img {
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    
}

.stamps--img:hover {
    transform: scale(1.15); 
    position: relative;
    z-index: 10; 
}

.stamps:hover .stamps-track {
    animation-play-state: paused;
}

.footer--hebergement {
  background-color: white;
  text-align: center;
  border-radius: 100px 120px 100px 100px/70px 225px 65px 205px;
  border-style: dotted;
  border-color: var(--color-light-purple);
}

.old-version {
  display: flex;
  justify-content: center;
}

.old-version--text {
  color: white;
}