#root{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

#story{
    height: 100%;
    width: 100%;
    background-color: black;
    overflow: hidden;
    position: relative;
}

#animationBlock{
    height: 100vh;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#animationBlock.darkStory{animation: darkAnimation 2.4s forwards;}
@keyframes darkAnimation {0%{background-color: #00000000;}33.33%{background-color: #000000ff;}41.66%{background-color: #000000ff;}100%{background-color: #00000000;}}

#animationBlock.greenStory{animation: greenAnimation 2.4s forwards;}
@keyframes greenAnimation {0%{background-color: #a1e64900;}33.33%{background-color: #a1e649ff;}41.66%{background-color: #a1e649ff;}100%{background-color: #a1e64900;}}

#animationBlock.darkGreenStory{animation: darkGreenAnimation 2.4s forwards;}
@keyframes darkGreenAnimation {0%{background-color: #12672c00;}33.33%{background-color: #12672cff;}41.66%{background-color: #12672cff;}100%{background-color: #12672c00;}}

#animationBlock.yellowStory{animation: yellowAnimation 2.4s forwards;}
@keyframes yellowAnimation {0%{background-color: #f6d70a00;}33.33%{background-color: #f6d70aff;}41.66%{background-color: #f6d70aff;}100%{background-color: #f6d70a00;}}

#animationBlock.orangeStory{animation: orangeAnimation 2.4s forwards;}
@keyframes orangeAnimation {0%{background-color: #ff9a1500;}33.33%{background-color: #ff9a15ff;}41.66%{background-color: #ff9a15ff;}100%{background-color: #ff9a1500;}}

#animationBlock.darkRedStory{animation: darkRedAnimation 2.4s forwards;}
@keyframes darkRedAnimation {0%{background-color: #82222200;}33.33%{background-color: #822222ff;}41.66%{background-color: #822222ff;}100%{background-color: #82222200;}}

#animationBlock.redStory{animation: redAnimation 2.4s forwards;}
@keyframes redAnimation {0%{background-color: #eb3b0d00;}33.33%{background-color: #eb3b0dff;}41.66%{background-color: #eb3b0dff;}100%{background-color: #eb3b0d00;}}

#animationBlock.lightblueStory{animation: lightblueAnimation 2.4s forwards;}
@keyframes lightblueAnimation {0%{background-color: #aeeaff00;}33.33%{background-color: #aeeaffff;}41.66%{background-color: #aeeaffff;}100%{background-color: #aeeaff00;}}

#animationBlock.blueStory{animation: blueAnimation 2.4s forwards;}
@keyframes blueAnimation {0%{background-color: #181db900;}33.33%{background-color: #181db9ff;}41.66%{background-color: #181db9ff;}100%{background-color: #181db900;}}

#animationBlock.purpleStory{animation: purpleAnimation 2.4s forwards;}
@keyframes purpleAnimation {0%{background-color: #770bd500;}33.33%{background-color: #770bd5ff;}41.66%{background-color: #770bd5ff;}100%{background-color: #770bd500;}}

#animationBlock.pinkStory{animation: pinkAnimation 2.4s forwards;}
@keyframes pinkAnimation {0%{background-color: #fdcdff00;}33.33%{background-color: #fdcdffff;}41.66%{background-color: #fdcdffff;}100%{background-color: #fdcdff00;}}

#animationBlock.grayStory{animation: grayAnimation 2.4s forwards;}
@keyframes grayAnimation {0%{background-color: #9c9c9c00;}33.33%{background-color: #9c9c9cff;}41.66%{background-color: #9c9c9cff;}100%{background-color: #9c9c9c00;}}

#animationBlock.whiteStory{animation: whiteAnimation 2.4s forwards;}
@keyframes whiteAnimation {0%{background-color: #ffffff00;}33.33%{background-color: #ffffffff;}41.66%{background-color: #ffffffff;}100%{background-color: #ffffff00;}}

.image-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    transition: transform 1s ease-in-out;
}

.image-container>img.left{
    transform: translateX(0) !important;
}

.image-container>img.right{
    transform: translateX(calc(100vw - 100%)) !important;
}

.image-container>img.speedShowing-1{
    transition: opacity .3s linear, transform 1.5s ease-in-out !important;
}

.image-container>img.speedShowing-1-between{
    transition: opacity .3s linear, transform 3s ease-in-out !important;
}

.image-container>img.speedShowing-2{
    transition: opacity .3s linear, transform 1s ease-in-out !important;
}

.image-container>img.speedShowing-2-between{
    transition: opacity .3s linear, transform 2s ease-in-out !important;
}

.iconImage{
    aspect-ratio: 1/1;
    height: 25px;
}

.image-container>img{
    height: 100%;
    object-fit: contain;
    transition: opacity .3s linear, transform 1.5s ease-in-out;
    opacity: 1;
    position: absolute;
    transform: translateX(calc(100vw/2 - 50%));
}

.image-container>img.blur{
    height: 100%;
    object-fit: cover;
    transition: opacity .3s linear;
    opacity: 1;
    position: absolute;
    filter: blur(20px);
}

*{user-select: none;}

#story img { pointer-events: none; }

#overlay.image-container>img.time-0{
    transition: opacity 0.3s linear !important;
}

#overlay.image-container>img.time-1{
    transition: opacity .5s linear !important;
}

#overlay.image-container>img.time-2{
    transition: opacity 1s linear !important;
}

#overlay.image-container>img.time-3{
    transition: opacity 2s linear !important;
}

.image-container>img.hidden{
    opacity: 0;
}

.image-container>img.transition{
    transition: opacity 2s linear !important;
}

.image-container>img.thought{
    background-color: rgba(0, 0, 0, 0.5);
}

#overlay.image-container>img{
    position: absolute;
}

#notifications{
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    font-size: larger;
    transition: opacity .3s linear;
    max-width: calc(((100vh * 1080) / 1920) * 0.88);
    z-index: 101;
}

#notifications>div{
    width: fit-content;
    margin: 10px auto 0 auto;
    transition: opacity .3s linear, translate .3s ease-out;
    padding: .25rem 1rem;
    border-radius: 10px;
    text-align: center;
}

#text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    font-size: larger;
    transition: opacity .3s ease-out, translate .3s ease-out;
}

#text.slided{
    translate: 5px 5px;
}

#choise>tbody>tr.hidden:nth-child(1){
    opacity: 0;
    translate: 10px 0;
    animation-name: choise;
    animation-duration: .6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
#choise>tbody>tr.hidden:nth-child(2){
    opacity: 0;
    translate: 10px 0;
    animation-name: choise;
    animation-duration: .6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: .2s;
}
#choise>tbody>tr.hidden:nth-child(3){
    opacity: 0;
    translate: 10px 0;
    animation-name: choise;
    animation-duration: .6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: .4s;
}
#choise>tbody>tr.hidden:nth-child(4){
    opacity: 0;
    translate: 10px 0;
    animation-name: choise;
    animation-duration: .6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: .6s;
}
#choise>tbody>tr.hidden:nth-child(5){
    opacity: 0;
    translate: 10px 0;
    animation-name: choise;
    animation-duration: .6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: .8s;
}
#choise>tbody>tr.hidden:nth-child(6){
    opacity: 0;
    translate: 10px 0;
    animation-name: choise;
    animation-duration: .6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}

#choise>tbody>tr.notSatisfied>td{
    opacity: 0.6;
}

#showStats>tbody>tr.hidden:nth-child(1){
    opacity: 0;
    translate: 10px 0;
    animation-name: choise;
    animation-duration: .6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
#showStats>tbody>tr.hidden:nth-child(2){
    opacity: 0;
    translate: 10px 0;
    animation-name: choise;
    animation-duration: .6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: .2s;
}
#showStats>tbody>tr.hidden:nth-child(3){
    opacity: 0;
    translate: 10px 0;
    animation-name: choise;
    animation-duration: .6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: .4s;
}
#showStats>tbody>tr.hidden:nth-child(4){
    opacity: 0;
    translate: 10px 0;
    animation-name: choise;
    animation-duration: .6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: .6s;
}
#showStats>tbody>tr.hidden:nth-child(5){
    opacity: 0;
    translate: 10px 0;
    animation-name: choise;
    animation-duration: .6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: .8s;
}
#showStats>tbody>tr.hidden:nth-child(6){
    opacity: 0;
    translate: 10px 0;
    animation-name: choise;
    animation-duration: .6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}

@keyframes choise {
    0%{
        opacity: 0;
        translate: 30px 0;
    }
    70%{
        opacity: .8;
        translate: -10px 0;
        scale: 1.02;
    }
    100%{
        opacity: 1;
        translate: 0 0;
    }
}

#text.hidden{
    opacity: 0;
}

#text>#textOnly{
    width: calc(((100vh * 1080) / 1920) * 0.95);
    padding: 1rem;
    border-radius: .5rem;
    margin: 0 auto;
}

#text>div#characterName{
    position: absolute;
    top: -24px;
    left: 20px;
    border-radius: .5rem;
    padding: .25rem .5rem;
}

#text>table#choise{
    width: calc(((100vh * 1080) / 1920) * 0.9);
    border-collapse: separate;
    border-spacing: 0 .5rem;
    margin: -1rem 5px 0 auto;
}

#text>table#choise td{
    padding: .5rem;
    border-radius: .5rem;
    cursor: pointer;
    position: relative;
}

#text>table#choise td:empty{
    display: none;
}


#text>table#showStats{
    width: calc(((100vh * 1080) / 1920) * 0.9);
    border-collapse: separate;
    border-spacing: 0 .5rem;
    margin: -1rem 5px 0 auto;
}

#text>table#showStats td{
    padding: .5rem;
    border-radius: .5rem;
    cursor: pointer;
    position: relative;
}

#text>table#showStats td:empty{
    display: none;
}

#text>div#input{
    padding: 2rem 1rem .5rem 1rem;
    width: calc(((100vh * 1080) / 1920) * 0.95);
    margin: .5rem auto 0 auto;
    border-radius: .5rem;
    text-align: center;
    position: relative;
}

#inputQuestion{
    position: absolute;
    top: -24px;
    left: calc(50% - 150px);
    width: 300px;
    border-radius: 10px;
    padding: .25rem .5rem;
}

#text>div input#startButton{
    background-color: var(--makeon-color);
    border: 1px solid var(--makeon-color);
    border-radius: 30px;
    color: var(--color-white);
    font-size: 18px;
    font-weight: bold;
    padding: 6px 10px;
    box-shadow: 5px 5px 10px -3px var(--shadow-color);
    width: fit-content;
}

#text>div#input>input{
    border-radius: .5rem;
    padding: .5rem;
    outline: none;
    width: 90%;
}

#text.progressBar{
    top: 50%;
    color:var(--color-white);
    text-align: center;
}

#text.progressBar>div>div{
    width: 200px;
    border-radius:20px;
    border: 1px solid var(--makeon-color-30);
}

@media (max-width: 768px) {
    .image-container>img {
        height: 100%;
        object-fit: cover;
        position: absolute;
    }
    #root{
        height: calc(var(--vh, 1vh) * 100);
    }
    #text{
        top: calc(100vh - 200px);
    }
    #text>#textOnly{
        width: calc(100vw * 0.95);
    }
    #text>div#input{
        width: calc(100vw * 0.95);
    }
    #text>table#choise{
        width: calc(100vw * 0.9);
    }
    #text>table#showStats{
        width: calc(100vw * 0.9);
    }
    #notifications{
        width: calc(100vw * 0.88);
    }
}

.menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 250px;
    height: fit-content;
    background-color: #f8f9fa;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1050;
}

.menu>ul>li{
    cursor: pointer;
}

.menu>ul>li:hover{
    background-color: var(--color-gray-light);
}

.menu.show {
    transform: translateX(0);
}

.menu-button {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1060;
    background-color: transparent;
    border: none;
    text-align: center;
    display: inline-block;
    padding: .375rem .75rem;
    border-radius: .25rem;
}



.menu-button img{
    opacity: 0.5;
    width: 20px;
    height: 20px;
}

.menu-button.filter img{
    filter: brightness(50%);
}

#text>div.timeLimit{
    position: absolute;
    top: -20px;
    right: -4px;
    border-radius: 50%;
    padding: 4px 5px;
    min-width: 40px;
    height: 40px;
    text-align: center;
    z-index: 100000000;
}

.grayscale{
    filter: grayscale(100%);
}

.negative{
    filter: invert(100%);
}

.sepia{
    filter: sepia(1);
}

.saturation{
    filter: saturate(390%);
}

.shake{
    animation: shaking 0.7s ease-in-out 1;
}

@keyframes shaking {
    0% {
        transform: scale(1.0) translateX(0px);
    }
    14%{
        transform: scale(1.1) translateX(-10px) translateY(-5px);
    }
    28%{
        transform: scale(1.1) translateX(5px);
    }
    42%{
        transform: scale(1.1) translateX(-5px) translateY(10px);
    }
    56%{
        transform: scale(1.1) translateX(5px);
    }
    70%{
        transform: scale(1.1) translateX(-10px) translateY(5px);
    }
    84%{
        transform: scale(1.1) translateX(5px); 
    } 
    100%{
        transform: scale(1.0) translateX(0px) translateY(0px);
    }
}

#loaderContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 300px;
    background-color: transparent !important;
}

#loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid var(--makeon-color);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#text>table tr>td:first-child{
    box-sizing: border-box;
    height: 46px;
}

.imageContainer{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

.notificationSlide{
    translate: 0 10px;
}