.dashboard { display: flex; flex-direction: column; height: 100%; transition: 0.5s; } /* 7 to 16 */ .day { background-color: #007c7d; } /* 16 to 23 */ .evening { background-color: #3b5773; } /* 23 to 8 */ .night { background-color: #2a3f55; } .cardWrapper { margin: 30px; height: 100%; gap: 30px; flex-direction: column; display: flex; justify-content: flex-start; } .card { flex-direction: column; justify-content: flex-start; background-color: #c0c0c0; border-top: 2px solid white; border-left: 2px solid white; border-bottom: 2px solid #828282; border-right: 2px solid #828282; } .cardContent { padding: 1px 100px 30px 100px; } .cardHeader { height: 30px; color: white; background-color: #000082; text-align: left; padding-left: 5px; font-weight: bold; } .cardHeaderInactive { height: 30px; color: #c0c0c0; background-color: #808080; text-align: left; padding-left: 5px; font-weight: bold; } .clock { width: 45%; <<<<<<< HEAD ======= } .terminal { >>>>>>> 115a228 (Make dashboard change background based on time of day) } .footer { background-color: #c0c0c0; }