/* general styling */
 :root {
	 --smaller: .75;
}
.countdown-container{
    position: absolute;
    top: 1em;
    left: 1em;
}
@media screen and (max-width: 767px){
    .countdown-container{
        position: relative;
            inset: 0;
    }
}
 #countdown{
	 display: flex;
	 flex-direction: column;
	 background-image: url(https://www.scranton.edu/academics/registrar/assets/countdown/bg-sprite-purple-tile.jpg);
	 border: 5px solid white;
	 box-shadow: 0 0 5px 2px #ccc;
	 align-items: center;
}
 #countdown img{
	 max-width: 300px;
	 padding-top: 1em;
	 object-fit: contain;
}
 #countdown ul{
	 margin: 0;
	 padding: 0;
	 display: flex;
}
 #countdown ul li{
	 background-image: none;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
}
 #countdown li {
	 display: inline-block;
	 font-size: 1.5em;
	 list-style-type: none;
	 padding: 1em;
	 text-transform: uppercase;
	 color: white;
	 text-shadow: 0 0 5px #000;
}
 #countdown li span {
	 display: block;
	 font-size: 2rem;
}
 #content .emoji {
	 display: none;
	 padding: 1rem;
}
 #content.emoji span {
	 font-size: 4rem;
	 padding: 0 .5rem;
}
 @media all and (max-width: 768px) {
	 #countdown h1 {
		 font-size: calc(1.5rem * var(--smaller));
	}
	 #countdown li {
		 font-size: calc(1.125rem * var(--smaller));
	}
	 #countdown li span {
		 font-size: calc(3.375rem * var(--smaller));
	}
}