body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
}

#ChangeLocationButton {
    background-color: rgba(0, 0, 0, 0);
    padding: 0;
    border: 1px solid;
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 99;
    width: 50px;
    height: 30px;
    border-radius: 50px;
    color: white;
}

#dot {
    position: relative;
    left: 0px;
    margin-left: 4px;
    margin-right: 4px;
    height: 20px;
    width: 20px;
    background-color: aliceblue;
    border-radius: 100%;
    transition-duration: 0.3s;
}


#LeftSide {
    position: absolute;
    height: 100%;
    width: 50vw;
    z-index: 1;
    background-color: #2c2b2b;
    color: #454545;
    display: flex;
    align-items: center;
    justify-content: center;
    transition-duration: 1s;
}

#RightSide {
    position: relative;
    height: 100%;
    width: 50vw;
    z-index: 0;
    left: 50%;
    background-color: #343332;
}

#map {
    height: 100%;
    width: 100%;
}

#showTime {
    font-family: 'Caveat', cursive;
    font-size: var(--Normal-Font-Size);
    display: flex;
    flex-wrap: nowrap;
    flex-flow: row;
    justify-content: center;
    align-items: baseline;
    --main-color: #9ca09b;
    --sec-color: #9ca09b4b;
    --positionUp: -45px;
    --positionMid: 0px;
    --positionBottom: 60px;
    --Normal-Font-Size: 50px;
    --Small-Font-Size: 35px;
}

#second {
    height: 1em;
    width: 1em;
}

#second-1 {
    z-index: 10;
    position: absolute;
    animation: second1 3s infinite;
    animation-play-state: paused;
}

@keyframes second1 {
    0% {
        opacity: 100%;
        transform: translateY(var(--positionUp));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);

    }

    2% {
        transform: translateY(var(--positionMid));
        opacity: 100%;
        color: var(--main-color);
        font-size: var(--Normal-Font-Size);
    }

    33% {
        transform: translateY(var(--positionMid));
        color: var(--main-color);
        font-size: var(--Normal-Font-Size);
    }

    35% {
        transform: translateY(var(--positionBottom));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    66% {
        opacity: 100%;
        transform: translateY(var(--positionBottom));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    74% {
        opacity: 0%;
        transform: translateY(var(--positionBottom));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    76% {
        opacity: 0%;
        transform: translateY(var(--positionUp));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    84% {
        opacity: 100%;
        transform: translateY(var(--positionUp));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    100% {
        transform: translateY(var(--positionUp));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }


}

#second-2 {
    z-index: 20;
    position: absolute;
    animation: second2 3s infinite;
    animation-play-state: paused;

}

@keyframes second2 {
    0% {
        transform: translate(0px);
        color: var(--main-color);
        font-size: var(--Normal-Font-Size);
    }

    2% {
        transform: translateY(var(--positionBottom));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    33% {
        transform: translateY(var(--positionBottom));
        opacity: 100%;
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    41% {
        opacity: 0%;
        transform: translateY(var(--positionBottom));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    43% {
        opacity: 0%;
        transform: translateY(var(--positionUp));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    51% {
        transform: translateY(var(--positionUp));
        opacity: 100%;
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    66% {
        transform: translateY(var(--positionUp));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    68% {
        transform: translateY(var(--positionMid));
        color: var(--main-color);
        font-size: var(--Normal-Font-Size);
    }

    100% {
        transform: translateY(var(--positionMid));
        color: var(--main-color);
        font-size: var(--Normal-Font-Size);
    }

}

#second-3 {
    z-index: 30;
    position: absolute;
    animation: second3 3s infinite;
    animation-play-state: paused;
}


@keyframes second3 {
    0% {
     transform: translateY(var(--positionBottom));
     opacity: 100%;   
     color: var(--sec-color);
     font-size: var(--Small-Font-Size);
    }
    8%{
        transform: translateY(var(--positionBottom));
        opacity: 0%;
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }
    10%{
        transform: translateY(var(--positionUp));
        opacity: 0%;
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }
    18%{
        transform: translateY(var(--positionUp));
        opacity: 100%;
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }
    33%{
        transform: translateY(var(--positionUp));
        opacity: 100%;
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }
    35%{
        transform: translateY(var(--positionMid));
        opacity: 100%;
        color: var(--main-color);
        font-size: var(--Normal-Font-Size);
    }
    66%{
        transform: translateY(var(--positionMid));
        opacity: 100%;
        color: var(--main-color);
        font-size: var(--Normal-Font-Size);
    }
    68%{
        transform: translateY(var(--positionBottom));
        opacity: 100%;
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }
    100%{
        transform: translateY(var(--positionBottom));
        opacity: 100%;
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

}
/* ______________minute_________________ */
#minute {
    height: 1em;
    width: 1em;
}

#minute-1 {
    z-index: 10;
    position: absolute;
    animation: minute1 180s infinite;
    animation-play-state: paused;
}

@keyframes minute1 {
    0% {
        opacity: 100%;
        transform: translateY(var(--positionUp));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);

    }

    2% {
        transform: translateY(var(--positionMid));
        opacity: 100%;
        color: var(--main-color);
        font-size: var(--Normal-Font-Size);
    }

    33% {
        transform: translateY(var(--positionMid));
        color: var(--main-color);
        font-size: var(--Normal-Font-Size);
    }

    35% {
        transform: translateY(var(--positionBottom));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    66% {
        opacity: 100%;
        transform: translateY(var(--positionBottom));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    66.5% {
        opacity: 0%;
        transform: translateY(var(--positionBottom));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    66.51% {
        opacity: 0%;
        transform: translate(var(--positionUp));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    67% {
        opacity: 100%;
        transform: translateY(var(--positionUp));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    100% {
        transform: translateY(var(--positionUp));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }


}

#minute-2 {
    z-index: 20;
    position: absolute;
    animation: minute2 180s infinite;
    animation-play-state: paused;

}

@keyframes minute2 {
    0% {
        transform: translate(0px);
        color: var(--main-color);
        font-size: var(--Normal-Font-Size);
    }

    2% {
        transform: translateY(var(--positionBottom));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    33% {
        transform: translateY(var(--positionBottom));
        opacity: 100%;
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    33.5% {
        opacity: 0%;
        transform: translateY(var(--positionBottom));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    33.51% {
        opacity: 0%;
        transform: translateY(var(--positionUp));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    34% {
        transform: translateY(var(--positionUp));
        opacity: 100%;
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    66% {
        transform: translateY(var(--positionUp));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    68% {
        transform: translateY(var(--positionMid));
        color: var(--main-color);
        font-size: var(--Normal-Font-Size);
    }

    100% {
        transform: translateY(var(--positionMid));
        color: var(--main-color);
        font-size: var(--Normal-Font-Size);
    }

}

#minute-3 {
    z-index: 30;
    position: absolute;
    animation: minute3 180s infinite;
    animation-play-state: paused;
}


@keyframes minute3 {
    0% {
     transform: translateY(var(--positionBottom));
     opacity: 100%;   
     color: var(--sec-color);
     font-size: var(--Small-Font-Size);
    }
    0.5%{
        transform: translateY(var(--positionBottom));
        opacity: 0%;
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }
    0.51%{
        transform: translateY(var(--positionUp));
        opacity: 0%;
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }
    1%{
        transform: translateY(var(--positionUp));
        opacity: 100%;
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }
    33%{
        transform: translateY(var(--positionUp));
        opacity: 100%;
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }
    35%{
        transform: translateY(var(--positionMid));
        opacity: 100%;
        color: var(--main-color);
        font-size: var(--Normal-Font-Size);
    }
    66%{
        transform: translateY(var(--positionMid));
        opacity: 100%;
        color: var(--main-color);
        font-size: var(--Normal-Font-Size);
    }
    68%{
        transform: translateY(var(--positionBottom));
        opacity: 100%;
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }
    100%{
        transform: translateY(var(--positionBottom));
        opacity: 100%;
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

}

/* -------------hour-------------- */
#hour {
    height: 1em;
    width: 1em;
}

#hour-1 {
    z-index: 10;
    position: absolute;
    animation: hour1 3600s infinite;
    animation-play-state: paused;
}

@keyframes hour1 {
    0% {
        opacity: 100%;
        transform: translateY(var(--positionUp));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }
    /* 1sec */
    0.0003% { 
        transform: translateY(var(--positionMid));
        opacity: 100%;
        color: var(--main-color);
        font-size: var(--Normal-Font-Size);
    }

    33% {
        transform: translateY(var(--positionMid));
        color: var(--main-color);
        font-size: var(--Normal-Font-Size);
    }

    33.0003% {
        transform: translateY(var(--positionBottom));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    66% {
        opacity: 100%;
        transform: translateY(var(--positionBottom));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    66.0002% {
        opacity: 0%;
        transform: translateY(var(--positionBottom));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    66.0004% {
        opacity: 0%;
        transform: translate(var(--positionUp));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    66.0006% {
        opacity: 100%;
        transform: translateY(var(--positionUp));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    100% {
        transform: translateY(var(--positionUp));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }


}

#hour-2 {
    z-index: 20;
    position: absolute;
    animation: hour2 3600s infinite;
    animation-play-state: paused;

}

@keyframes hour2 {
    0% {
        transform: translate(var(--positionMid));
        color: var(--main-color);
        font-size: var(--Normal-Font-Size);
    }

    0.0003% {
        transform: translateY(var(--positionBottom));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    33% {
        transform: translateY(var(--positionBottom));
        opacity: 100%;
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    33.0002% {
        opacity: 0%;
        transform: translateY(var(--positionBottom));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    33.0004% {
        opacity: 0%;
        transform: translateY(var(--positionUp));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    33.0006% {
        transform: translateY(var(--positionUp));
        opacity: 100%;
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    66% {
        transform: translateY(var(--positionUp));
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

    66.0003% {
        transform: translateY(var(--positionMid));
        color: var(--main-color);
        font-size: var(--Normal-Font-Size);
    }

    100% {
        transform: translateY(var(--positionMid));
        color: var(--main-color);
        font-size: var(--Normal-Font-Size);
    }

}

#hour-3 {
    z-index: 30;
    position: absolute;
    animation: hour3 3600s infinite;
    animation-play-state: paused;
}


@keyframes hour3 {
    0% {
     transform: translateY(var(--positionBottom));
     opacity: 100%;   
     color: var(--sec-color);
     font-size: var(--Small-Font-Size);
    }
    0.0002%{
        transform: translateY(var(--positionBottom));
        opacity: 0%;
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }
    0.0004%{
        transform: translateY(var(--positionUp));
        opacity: 0%;
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }
    0.0006%{
        transform: translateY(var(--positionUp));
        opacity: 100%;
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }
    33%{
        transform: translateY(var(--positionUp));
        opacity: 100%;
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }
    33.0003%{
        transform: translateY(var(--positionMid));
        opacity: 100%;
        color: var(--main-color);
        font-size: var(--Normal-Font-Size);
    }
    66%{
        transform: translateY(var(--positionMid));
        opacity: 100%;
        color: var(--main-color);
        font-size: var(--Normal-Font-Size);
    }
    66.0003%{
        transform: translateY(var(--positionBottom));
        opacity: 100%;
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }
    100%{
        transform: translateY(var(--positionBottom));
        opacity: 100%;
        color: var(--sec-color);
        font-size: var(--Small-Font-Size);
    }

}