CountdownClock.css

.countdown-clock { width : 30rem; height : 15rem; background : url("https://static.miraheze.org/pgrwiki/thumb/f/f7/Eternal_Engine_event_banner.png/190px-Eternal_Engine_event_banner.png"); background-size: cover; background-repeat: no-repeat; color : white; display : grid; grid-template-rows: 1fr 2fr; font-family: "roboto condensed"; } .countdown-clock .update-name { font-size: 2rem; text-align: center; background : rgba(26, 26, 26, 0.267); padding : 1rem 0; margin : 0 auto; width : 100%; } .countdown-clock .time-field { display : flex; } .countdown-clock .countdown-time { margin-left : auto; margin-right : 3rem; margin-top : 2rem; display : flex; } .countdown-clock .arrival-time { margin : 0; padding : 0.3rem; font-size: 0.8rem; background :rgba(1, 1, 1, 0.2) } .countdown-clock .fields { padding : 0 0.2rem; margin : auto 0; flex : auto; flex-direction: row; background : rgba(1, 1, 1, 0.6); color : white; padding : 0 0.3rem; } .countdown-clock .values { flex : auto; font-size: 2.5rem; margin : 0; text-align: center; } .countdown-clock .subtitle { font-size: 0.9rem; flex : auto; margin : 0; text-align: center; }