:root {
    /* Primary colors */
    --primary-accent-green: #00e47c;
    --primary-dark-green: #08312a;
    --primary-light-gray: #f6f5f3;

    /* Secondary colors */
    --secondary-medium-violet: #928bde;
    --secondary-violet: #c5c3ee;

    /* Neutrals */
    --color-white: #ffffff;
    --color-black: #000000;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    width: 2160px;
    height: 3840px;
    color: hsl(0, 0%, 0%);
    background-color: var(--color-white);
    user-select: none;
    font-family: 'GothamBook', sans-serif;
}

.hidden {
    display: none !important;
}

.fullsize {
    width: 100%;
    height: 100%;
}

.button {
    cursor: pointer;
    pointer-events: all;
}

.button.pulse {
    transform-origin: center;
    animation: 3s linear 0s infinite normal none running pulse !important;
    animation-delay: 0.5s !important;
}

.button.locked {
    cursor: none;
    pointer-events: none;
}

.button.disabled {
    cursor: none;
    pointer-events: none;
    opacity: 0.3;
}

.button-next {
    font-size: 40px;
    color: var(--color-white);
}

.app-area,
.app-section,
.app-slide {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: absolute;
    overflow: hidden;
}

.app-area {
    background-color: var(--color-white);
}

.box {
    position: absolute;
}

.video {
    width: 100%;
}

.video-cover {
    position: relative;
}

.clessidra-shadow {
    position: absolute;
    width: 60%;
    bottom: -51px;
}

.video-container {
    background-image: url(../../assets/image/clessidra_shadow.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
    width: 68%;
}

#video-cover {
    width: 68%;
    z-index: 2;
}

.v-centered {
    display: flex;
    align-items: center;
    height: 100vh;
}

.centered {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.overlay {
    background-color: var(--color-white);
    opacity: 0.3;
}

.overlay-popup {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

.message-box {
    background-color: white;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 50px;
}

.mt-10 {
    margin-top: 6rem !important;
}

.mt-15 {
    margin-top: 9rem !important;
}

.mt-20 {
    margin-top: 12rem !important;
}

.col-width-10 {
    width: 10%;
}

.col-width-20 {
    width: 20%;
}

.col-width-30 {
    width: 30%;
}

.col-width-40 {
    width: 40%;
}

.col-width-50 {
    width: 50%;
}

.col-width-60 {
    width: 60%;
}

.col-width-70 {
    width: 70%;
}

.col-width-80 {
    width: 80%;
}

.col-width-90 {
    width: 90%;
}

.col-width-100 {
    width: 100%;
}

.indented-paragraph {
    text-indent: 0;
    margin-left: 75px;
    text-indent: -82px;
}

.indented-paragraph strong {
    font-family: 'GothamBold';
}

.indented-reference {
    text-indent: 0;
    margin-left: 26px;
    text-indent: -31px;
    margin-bottom: 0px;
}

.edugame-footer {
    position: absolute;
    font-size: 100px;
    bottom: 209px;
}

.edugame-footer.left {
    left: 88px;
}

.edugame-title {
    font-size: 200px;
    margin-top: 532px;
}

.edugame span.edu {
    font-family: 'Co Headline Bold';
    color: var(--primary-dark-green);
}

.edugame span.game {
    font-family: 'Co Headline Regular';
    color: var(--secondary-medium-violet);
}

.button-next {
    background-color: var(--primary-accent-green);
    background-image: url(../../assets/image/arrow-right-dark-green.png);
    background-position: center right;
    background-repeat: no-repeat;
    color: var(--primary-dark-green);
    width: 452px;
    height: 145px;
    font-family: 'boehringer_forward_textmd';
    font-size: 60px;
    padding-left: 32px;
}

/* ************************** */
/* AREA HOME */
/* ************************** */

/* GROUP HOME */

.app-section[group="home"] {
    background-image: url(../../assets/image/bkg.png);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* SLIDE 1 */
.app-area[area="home"] .app-section[group="home"] .app-slide[slide="1"] {
    width: 100%;
    height: 100%;
    position: absolute;
}

.app-area[area="home"] .app-section[group="home"] .app-slide[slide="1"] .box-container {
    margin-top: 438px;
}

.app-area[area="home"] .app-section[group="home"] .app-slide[slide="1"] .box-container .box-title {
    font-family: 'Co Headline Bold';
    font-size: 105px;
    color: var(--color-black);
}

.app-area[area="home"] .app-section[group="home"] .app-slide[slide="1"] .box-container .box-video-cover {
    background-color: var(--color-white);
    width: 1504px;
    height: 2046px;
}

.app-area[area="home"] .app-section[group="home"] .app-slide[slide="1"] .button[selection="delete"] {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 470px;
    height: 200px;
}

/* GROUP PROFILE */

.app-section[group="profile"] {
    background-image: url(../../assets/image/bkg.png);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* SLIDE 1 */
.app-area[area="home"] .app-section[group="profile"] .app-slide[slide="1"] {
    width: 100%;
    height: 100%;
    position: absolute;
}

.app-area[area="home"] .app-section[group="profile"] .app-slide[slide="1"] .box-container .box-profile {
    position: relative;
    background-color: var(--primary-accent-green);
    width: 1174px;
    height: 1755px;
    border: 10px solid var(--color-white);
}

.app-area[area="home"] .app-section[group="profile"] .app-slide[slide="1"] .instruction-nickname {
    font-size: 91px;
    font-family: 'CO Headline Regular';
    color: var(--primary-dark-green);
}

.app-area[area="home"] .app-section[group="profile"] .app-slide[slide="1"] .instruction-nickname b {
    font-family: 'CO Headline Bold';
}


.app-area[area="home"] .app-section[group="profile"] .app-slide[slide="1"] input {
    width: 87%;
    height: 194px;
    font-size: 100px;
    color: var(--primary-dark-green);
    border: 3px solid var(--primary-dark-green);
    font-family: 'boehringer_forward_textRg';
}

.app-area[area="home"] .app-section[group="profile"] .app-slide[slide="1"] .button[selection="start"] {
    width: 510px;
}

/* GROUP GAME */

.app-section[group="game"] {
    background-image: url(../../assets/image/bkg_clessidra.png);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* SLIDE 1 */
.app-area[area="home"] .app-section[group="game"] .app-slide[slide="1"] {
    width: 100%;
    height: 100%;
    position: absolute;
}

.app-area[area="home"] .app-section[group="game"] .app-slide[slide="1"] .box-question {
    background-color: var(--primary-accent-green);
    top: 500px;
    width: 1500px;
    height: 2134px;
    padding: 64px;
    border: 10px solid var(--color-white);
}

.app-area[area="home"] .app-section[group="game"] .app-slide[slide="1"] .box-question.showcorrect {
    background-color: var(--secondary-violet);
}

.app-area[area="home"] .app-section[group="game"] .app-slide[slide="1"] .box-question #title {
    font-size: 85px;
    font-family: 'CO Headline Bold';
    line-height: 1.2;
}

.app-area[area="home"] .app-section[group="game"] .app-slide[slide="1"] .box-video-question {
    position: absolute;
    bottom: 38px;
    right: 226px;
    width: 554px;
    height: 1080px;
}

/* VIDEO */
.app-area[area="home"] .app-section[group="game"] .app-slide[slide="1"] .box-video-question #video-question {
    position: relative;
    z-index: 2;
}

.app-area[area="home"] .app-section[group="game"] .app-slide[slide="1"] .box-video-question #nastro-left.movingleft1 {
    animation: moveLeftAndBack1 1s ease-out 2;
}

.app-area[area="home"] .app-section[group="game"] .app-slide[slide="1"] .box-video-question #nastro-right.movingright1 {
    animation: moveRightAndBack1 1s ease-out 2;
}

.app-area[area="home"] .app-section[group="game"] .app-slide[slide="1"] .box-video-question #nastro-left.movingleft2 {
    animation: moveLeftAndBack2 1s ease-out 2;
}

.app-area[area="home"] .app-section[group="game"] .app-slide[slide="1"] .box-video-question #nastro-right.movingright2 {
    animation: moveRightAndBack2 1s ease-out 2;
}

.app-area[area="home"] .app-section[group="game"] .app-slide[slide="1"] .box-video-question #nastro-left.movingleft3 {
    animation: moveLeftAndBack3 1s ease-out 2;
}

.app-area[area="home"] .app-section[group="game"] .app-slide[slide="1"] .box-video-question #nastro-right.movingright3 {
    animation: moveRightAndBack3 1s ease-out 2;
}

.app-area[area="home"] .app-section[group="game"] .app-slide[slide="1"] .box-video-question #nastro-left.movingleft4 {
    animation: moveLeftAndBack4 1s ease-out 2;
}

.app-area[area="home"] .app-section[group="game"] .app-slide[slide="1"] .box-video-question #nastro-right.movingright4 {
    animation: moveRightAndBack4 1s ease-out 2;
}

.app-area[area="home"] .app-section[group="game"] .app-slide[slide="1"] .box-video-question #nastro-left.movingleft5 {
    animation: moveLeftAndBack5 1s ease-out 2;
}

.app-area[area="home"] .app-section[group="game"] .app-slide[slide="1"] .box-video-question #nastro-right.movingright5 {
    animation: moveRightAndBack5 1s ease-out 2;
}

.app-area[area="home"] .app-section[group="game"] .app-slide[slide="1"] .box-video-countdown {
    position: absolute;
    bottom: 802px;
    left: 493px;
}

.app-area[area="home"] .app-section[group="game"] .app-slide[slide="1"] .box-video-countdown #remainingTime {
    font-family: 'CO Headline Bold';
    font-size: 200px;
}

.app-area[area="home"] .app-section[group="game"] .app-slide[slide="1"] .button[selection="next"],
.app-area[area="home"] .app-section[group="game"] .app-slide[slide="1"] .button[selection="leaderboard"] {
    position: absolute;
    bottom: 849px;
    right: 330px;
}

.app-area[area="home"] .app-section[group="game"] .app-slide[slide="1"] .box-answers {
    font-size: 67px;
    padding-top: 7%;
    line-height: 1.2;
}

.app-area[area="home"] .app-section[group="game"] .app-slide[slide="1"] .box-answers #answers {
    width: 100%;
}

.asterisk {
    width: 7%;
    font-size: 90px;
    font-weight: bold;
    position: absolute;
    padding-top: 8px;
    font-family: 'GothamBold';

}

.textanswer {
    width: 93%;
    padding-top: 20px;
    padding-bottom: 20px;
}

.app-area[area="home"] .app-section[group="game"] .app-slide[slide="1"] .box-answers #answers tr.showcorrect {
    color: var(--color-white);
    font-family: 'GothamBold';
}

.reference {
    font-size: 43px;
    position: absolute;
    bottom: 10px;
    width: 94%;
    line-height: 1;
}

.reference i strong {
    font-family: 'GothamBold';
}

/* GROUP LEADERBOARD */

.app-section[group="leaderboard"] {
    background-image: url(../../assets/image/bkg_clessidra.png);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* SLIDE 1 */
.app-area[area="home"] .app-section[group="leaderboard"] .app-slide[slide="1"] {
    width: 100%;
    height: 100%;
    position: absolute;
}

.app-area[area="home"] .app-section[group="leaderboard"] .app-slide[slide="1"] .box-container {
    margin-top: 504px;
}

.app-area[area="home"] .app-section[group="leaderboard"] .app-slide[slide="1"] .box-container .box-leaderboard {
    background-color: var(--primary-accent-green);
    width: 1500px;
    height: 2134px;
    position: relative;
    border: 10px solid var(--color-white);
}

.app-area[area="home"] .app-section[group="leaderboard"] .app-slide[slide="1"] .box-container .box-leaderboard .box-leaderboard-content {
    background-color: var(--primary-light-gray);
    width: 90%;
    height: 93%;
    padding: 0% 2% 1% 2%;
}

.app-area[area="home"] .app-section[group="leaderboard"] .app-slide[slide="1"] .box-container .box-leaderboard .box-leaderboard-content .title {
    font-family: 'CO Headline Bold';
    font-size: 90px;
    color: var(--primary-dark-green);
}

.app-area[area="home"] .app-section[group="leaderboard"] .app-slide[slide="1"] .box-container .box-leaderboard .box-leaderboard-content .ranking {
    width: 100%;
    height: 100%;
    overflow: hidden;
    line-height: 1.1;
}

.app-area[area="home"] .app-section[group="leaderboard"] .app-slide[slide="1"] .box-container .box-leaderboard .box-leaderboard-content .table td {
    font-size: 64px;
    color: #000;
    border-color: transparent;
    background-color: transparent;
}

.app-area[area="home"] .app-section[group="leaderboard"] .app-slide[slide="1"] .box-video-leaderboard {
    position: absolute;
    bottom: 38px;
    right: 226px;
    width: 554px;
    height: 1080px;
}

.app-area[area="home"] .app-section[group="leaderboard"] .app-slide[slide="1"] .box-video-leaderboard #video-leaderboard {
    position: relative;
    z-index: 2;
}

/* GROUP BIBLIO */

.app-section[group="biblio"] {
    background-image: url(../../assets/image/bkg_clessidra.png);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* SLIDE 1 */
.app-area[area="home"] .app-section[group="biblio"] .app-slide[slide="1"] {
    width: 100%;
    height: 100%;
    position: absolute;
}

.app-area[area="home"] .app-section[group="biblio"] .app-slide[slide="1"] .box-container {
    margin-top: 503px;
}

.app-area[area="home"] .app-section[group="biblio"] .app-slide[slide="1"] .box-container .box-biblio {
    background-color: var(--primary-light-gray);
    width: 1500px;
    height: 2134px;
    position: relative;
    padding: 100px;
    border: 10px solid var(--color-white);
}

.app-area[area="home"] .app-section[group="biblio"] .app-slide[slide="1"] .box-container .box-biblio .title {
    font-family: 'CO Headline Bold';
    font-size: 70px;
    color: var(--primary-dark-green);
}

.app-area[area="home"] .app-section[group="biblio"] .app-slide[slide="1"] .box-container .box-biblio .list-biblio {
    font-family: 'GothamBook';
    color: var(--primary-dark-green);
    font-size: 41px;
    line-height: 2;
    list-style-type: disc;
}

.app-area[area="home"] .app-section[group="biblio"] .app-slide[slide="1"] .box-container .box-biblio .list-biblio span {
    font-family: 'GothamMedium';
}

.app-area[area="home"] .app-section[group="biblio"] .app-slide[slide="1"] .box-container .box-biblio .list-biblio li::marker {
    color: var(--primary-accent-green);
}

.app-area[area="home"] .app-section[group="biblio"] .app-slide[slide="1"] .box-container .box-biblio .text {
    font-size: 44px;
}

.app-area[area="home"] .app-section[group="biblio"] .app-slide[slide="1"] .box-container .box-biblio .footnotes {
    position: absolute;
    bottom: 100px;
    font-size: 29px;
    line-height: 1.3;
}

.app-area[area="home"] .app-section[group="biblio"] .app-slide[slide="1"] .box-video-biblio {
    position: absolute;
    bottom: 38px;
    right: 226px;
    width: 554px;
    height: 1080px;
}

.app-area[area="home"] .app-section[group="biblio"] .app-slide[slide="1"] .box-video-biblio #video-biblio {
    position: relative;
    z-index: 2;
}


/* NASTRO */
/* NASTRO CENTER BACK */
/* 0 */
.nastro-center-back.step-0 {
    background-image: url(../../assets/image/nastro/0/center_back.png);
    position: absolute;
    top: 491px;
    left: 249px;
    width: 62px;
    aspect-ratio: 1.184;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: cover;
}


/* 1 */
.nastro-center-back.step-1 {
    background-image: url(../../assets/image/nastro/1/center_back.png);
    position: absolute;
    top: 491px;
    left: 249px;
    width: 62px;
    aspect-ratio: 1.184;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: cover;
}

/* 2 */
.nastro-center-back.step-2 {
    background-image: url(../../assets/image/nastro/2/center_back.png);
    position: absolute;
    top: 491px;
    left: 249px;
    width: 62px;
    aspect-ratio: 1.184;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: cover;
}

/* 3 */
.nastro-center-back.step-3 {
    background-image: url(../../assets/image/nastro/3/center_back.png);
    position: absolute;
    top: 491px;
    left: 249px;
    width: 62px;
    aspect-ratio: 1.184;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: cover;
}


/* NASTRO LEFT */
/* 0 */
.nastro-left.step-0 {
    background-image: url(../../assets/image/nastro/0/left.png);
    position: absolute;
    top: 436px;
    left: -77px;
    width: 390px;
    aspect-ratio: 1.543;
    z-index: 3;
    background-repeat: no-repeat;
    background-size: cover;
}

/* 1 */
.nastro-left.step-1 {
    background-image: url(../../assets/image/nastro/1/left.png);
    position: absolute;
    top: 436px;
    left: -77px;
    width: 390px;
    aspect-ratio: 2.109;
    z-index: 3;
    background-repeat: no-repeat;
    background-size: cover;
}

/* 2 */
.nastro-left.step-2 {
    background-image: url(../../assets/image/nastro/2/left.png);
    position: absolute;
    top: 440px;
    left: -87px;
    width: 398px;
    aspect-ratio: 2.784;
    z-index: 3;
    background-repeat: no-repeat;
    background-size: cover;
}

/* 3 */
.nastro-left.step-3 {
    background-image: url(../../assets/image/nastro/3/left.png);
    position: absolute;
    top: 439px;
    left: -117px;
    width: 424px;
    aspect-ratio: 3.855;
    z-index: 3;
    background-repeat: no-repeat;
    background-size: cover;
}

/* 4 */
.nastro-left.step-4 {
    background-image: url(../../assets/image/nastro/4/left.png);
    position: absolute;
    top: 424px;
    left: -137px;
    width: 446px;
    aspect-ratio: 5.246;
    z-index: 3;
    background-repeat: no-repeat;
    background-size: cover;
}

/* 5 */
.nastro-left.step-5 {
    background-image: url(../../assets/image/nastro/5/left.png);
    position: absolute;
    top: 411px;
    left: -156px;
    width: 464px;
    aspect-ratio: 4.834;
    z-index: 3;
    background-repeat: no-repeat;
    background-size: cover;
}

/* NASTRO CENTER FRONT */
/* 2 */
.nastro-center-front.step-2 {
    background-image: url(../../assets/image/nastro/2/center_front.png);
    position: absolute;
    top: 491px;
    left: 249px;
    width: 62px;
    aspect-ratio: 1.184;
    z-index: 3;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.8;
}

/* 3 */
.nastro-center-front.step-3 {
    background-image: url(../../assets/image/nastro/3/center_front.png);
    position: absolute;
    top: 491px;
    left: 249px;
    width: 62px;
    aspect-ratio: 1.184;
    z-index: 3;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.8;
}

/* NASTRO RIGHT */
/* 0 */
.nastro-right.step-0 {
    background-image: url(../../assets/image/nastro/0/right.png);
    position: absolute;
    top: 497px;
    left: 224px;
    width: 430px;
    aspect-ratio: 1.818;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 3;
}

/* 1 */
.nastro-right.step-1 {
    background-image: url(../../assets/image/nastro/1/right.png);
    position: absolute;
    top: 497px;
    left: 224px;
    width: 430px;
    aspect-ratio: 2.434;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 3;
}

/* 2 */
.nastro-right.step-2 {
    background-image: url(../../assets/image/nastro/2/right.png);
    position: absolute;
    top: 497px;
    left: 224px;
    width: 430px;
    aspect-ratio: 3.384;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 3;
}

/* 3 */
.nastro-right.step-3 {
    background-image: url(../../assets/image/nastro/3/right.png);
    position: absolute;
    top: 497px;
    left: 227px;
    width: 504px;
    aspect-ratio: 5.599;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 3;
}

/* 4 */
.nastro-right.step-4 {
    background-image: url(../../assets/image/nastro/4/right.png);
    position: absolute;
    top: 477px;
    left: 240px;
    width: 489px;
    aspect-ratio: 5.868;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 3;
}

/* 5 */
.nastro-right.step-5 {
    background-image: url(../../assets/image/nastro/5/right.png);
    position: absolute;
    top: 443px;
    left: 241px;
    width: 491px;
    aspect-ratio: 4.647;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 3;
}


/* ANIMATIONS */
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale3d(1.0, 1.0, 1.0);
        -webkit-animation-timing-function: ease-in-out;
    }

    5% {
        -webkit-transform: scale3d(1.15, 1.15, 1.15);
        -webkit-animation-timing-function: ease-in-out;
    }

    10% {
        -webkit-transform: scale3d(1.0, 1.0, 1.0);
        -webkit-animation-timing-function: ease-in-out;
    }
}

/* move left and back */
@keyframes moveLeftAndBack1 {
    0% { transform: translateX(0); }      /* Start at original position */
    50% { transform: translateX(-30px); } /* Move left */
    100% { transform: translateX(0); }     /* Move back to original */
}

@keyframes moveRightAndBack1 {
    0% { transform: translateX(0); }      /* Start at original position */
    50% { transform: translateX(30px); } /* Move right */
    100% { transform: translateX(0); }     /* Move back to original */
}
    
@keyframes moveLeftAndBack2 {
    0% { transform: translateX(0); }      /* Start at original position */
    50% { transform: translateX(-24px); } /* Move left */
    100% { transform: translateX(0); }     /* Move back to original */
}

@keyframes moveRightAndBack2 {
    0% { transform: translateX(0); }      /* Start at original position */
    50% { transform: translateX(24px); } /* Move right */
    100% { transform: translateX(0); }     /* Move back to original */
}

@keyframes moveLeftAndBack3 {
    0% { transform: translateX(0); }      /* Start at original position */
    50% { transform: translateX(-18px); } /* Move left */
    100% { transform: translateX(0); }     /* Move back to original */
}

@keyframes moveRightAndBack3 {
    0% { transform: translateX(0); }      /* Start at original position */
    50% { transform: translateX(18px); } /* Move right */
    100% { transform: translateX(0); }     /* Move back to original */
}

@keyframes moveLeftAndBack4 {
    0% { transform: translateX(0); }      /* Start at original position */
    50% { transform: translateX(-12px); } /* Move left */
    100% { transform: translateX(0); }     /* Move back to original */
}

@keyframes moveRightAndBack4 {
    0% { transform: translateX(0); }      /* Start at original position */
    50% { transform: translateX(12px); } /* Move right */
    100% { transform: translateX(0); }     /* Move back to original */
}

@keyframes moveLeftAndBack5 {
    0% { transform: translateX(0); }      /* Start at original position */
    50% { transform: translateX(-6px); } /* Move left */
    100% { transform: translateX(0); }     /* Move back to original */
}

@keyframes moveRightAndBack5 {
    0% { transform: translateX(0); }      /* Start at original position */
    50% { transform: translateX(6px); } /* Move right */
    100% { transform: translateX(0); }     /* Move back to original */
}