flt_widget.css

@import url("https://fonts.googleapis.com/css2?family=Ubuntu+Condensed&display=swap" );

* {
   font-family: 'Ubuntu Condensed', sans-serif;
    color: rgb(240,240,240);
    font-size: 35px;
}

body {
    display: flex;
    justify-content: center; /* this relies on display set to flex...*/
    height: 100vh;
    align-items: center; /* this relies on giving it a height first...*/
    background-color: rgb(251,199,127);
}


header {
    padding: 10px;
}

.departures {
    background-color: rgb(7,7,7);
    border-radius: 10px;
    padding: 10px;
}

.departures table {
    background-color: rgb(46,46,46);
    text-align: left;
}


.departures table td {
    height: 50px;
}


.departures table div {
     border: solid 4px rgb(26,26,26);
     background-color: rgb(0, 0, 0);
     float: left;
     height: 40px;
}

/* space out the headers... */

#time {
    width: 160px;
}

#destination {
    width: 260px;
}


#flight {
    width: 205px;
}

#gate {
    width: 135px;
}

#remarks {
    width: 260px;
}

/*-------------------------------  
    Animate the letter slots
--------------------------------*/
.flip {
    animation: 0.5s linear flipping;
}

/* Define flipping function */
@keyframes flipping {
    0% {
        transform: rotateX(0deg); 
    }
    50% {
        transform: rotateX(90deg); 
    }    
    100% {
        transform: rotateX(0deg); 
    }
}