*{
    font-family: 'Caprasimo', serif;
    color: #2a3050;
}
body {
    margin: 0;
    background-color: #2d2319;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

}

.container {
    /*background-color: blue;*/
    position: relative;
    width: 100%;
    max-width: min(100vw, calc(100vh * (16/9)));
    max-height: 100vh;
    height: auto;
    margin: auto;
    aspect-ratio: 16/9; 
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}



.bg {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 16/9; 
  object-fit: cover;
  z-index: 1;
}

.bg{
    z-index: 1;
}

.paper, .paperone {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%; 
  object-fit: contain;
  z-index: 4;
}

.buttons {
    position: absolute;
    display: flex;
    justify-content: center;
    left: 70%;
    width: 20%;
    height: 80%; 
    object-fit: contain;
    flex-direction: column;
}
.sticky {
    position: absolute;
    background-color: transparent;
    background-image: url('sticky.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    display: flex;
    justify-content: flex-end;
    padding: 0.5em ;
    padding-right: 1em;
    align-items: center;  
    
    top: 30%;
    aspect-ratio: 296/86; 
    font-size: clamp(8px, 1.8cqw, 22px);
    transform: translate(37%, -150%);
    width: 90%; 
    height: auto;             
    z-index: 2;
}

.sticky.slide-right{
    transform: translate(42%, -150%);
    transition: transform 0.4s ease;
}

.sticky.two{
    top: 45%;
    z-index: 5;
}

.sticky.three{
    top: 60%;
    z-index: 3;
}

.paperone {
    position: absolute;
    opacity: 1;
    transition: opacity 0.4s ease;
    z-index: 6;
}