/* elevator.css 
   By Ramon Pinho
   Specific styles for elevator page
   Mar 2021
*/

.building {
    background-color: #ffffff;
    display:flex;			
    flex-direction: column;
    align-content: center;
    padding: 10px;
}

.floor {
    background-color: #d0d0d0;
    width: 60px;
    height: 40px;
    font-size: 28px;
    font-weight: 700;
    color: #000000;
    text-align: center;
    margin-bottom: 5px;
    vertical-align: middle;
    cursor: pointer;
}

.floor:hover{
    background-color: #909090;
    text-decoration: underline;
    border: 2px solid #ff0000;
}

:root {
    --elevator-x: 0px;
    --elevator-y: 0px;
}

.elevator {
    background-color: #fdfd97;
    position: absolute;
    top: var(--elevator-y);
    left: var(--elevator-x);
    width: 30px;
    height: 30px;   
}

/* animations */

@keyframes frames-up {    
    0% {top: var(--elevator-y)}
    5% {top: calc(var(--elevator-y) - 2px);}
    10% {top: calc(var(--elevator-y) - 4px);}
    15% {top: calc(var(--elevator-y) - 6px);}
    20% {top: calc(var(--elevator-y) - 9px);}
    25% {top: calc(var(--elevator-y) - 11px);}
    30% {top: calc(var(--elevator-y) - 13px);}
    35% {top: calc(var(--elevator-y) - 15px);}
    40% {top: calc(var(--elevator-y) - 18px);}
    45% {top: calc(var(--elevator-y) - 20px);}
    50% {top: calc(var(--elevator-y) - 23px);}
    55% {top: calc(var(--elevator-y) - 25px);}
    60% {top: calc(var(--elevator-y) - 28px);}
    65% {top: calc(var(--elevator-y) - 30px);}
    70% {top: calc(var(--elevator-y) - 33px);}
    75% {top: calc(var(--elevator-y) - 35px);}
    80% {top: calc(var(--elevator-y) - 38px);}
    85% {top: calc(var(--elevator-y) - 40px);}
    90% {top: calc(var(--elevator-y) - 43px);}
    95% {top: calc(var(--elevator-y) - 44px);}
    100% {top: calc(var(--elevator-y) - 45px);}
  }

  @keyframes frames-down {    
    0% {top: var(--elevator-y)}
    5% {top: calc(var(--elevator-y) + 2px);}
    10% {top: calc(var(--elevator-y) + 4px);}
    15% {top: calc(var(--elevator-y) + 6px);}
    20% {top: calc(var(--elevator-y) + 9px);}
    25% {top: calc(var(--elevator-y) + 11px);}
    30% {top: calc(var(--elevator-y) + 13px);}
    35% {top: calc(var(--elevator-y) + 15px);}
    40% {top: calc(var(--elevator-y) + 18px);}
    45% {top: calc(var(--elevator-y) + 20px);}
    50% {top: calc(var(--elevator-y) + 23px);}
    55% {top: calc(var(--elevator-y) + 25px);}
    60% {top: calc(var(--elevator-y) + 28px);}
    65% {top: calc(var(--elevator-y) + 30px);}
    70% {top: calc(var(--elevator-y) + 33px);}
    75% {top: calc(var(--elevator-y) + 35px);}
    80% {top: calc(var(--elevator-y) + 38px);}
    85% {top: calc(var(--elevator-y) + 40px);}
    90% {top: calc(var(--elevator-y) + 43px);}
    95% {top: calc(var(--elevator-y) + 44px);}
    100% {top: calc(var(--elevator-y) + 45px);}
  }

.move-up {
    animation-name: frames-up;
    animation-duration: 5s;
}

.move-down {
    animation-name: frames-down;
    animation-duration: 5s;
}