*{box-sizing: border-box; margin: 0; padding: 0;}
body{
	background-color: #ffffff;
	background-image: url('images/backeagle.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

}

::selection{background-color: transparent;}

/* Floating Image */
.armban {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 150px;
    height: auto;
    z-index: 10000;
}
@font-face {
    font-family: 'VCR OSD Mono';
    src: url('font/vcr_osd_mono-webfont.woff2') format('woff2'),
        url('font/vcr_osd_mono-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OldNewspaperTypes';
    src: url('font/OldNewspaperTypes.woff2') format('woff2'),
        url('font/OldNewspaperTypes.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Banner & Countdown */
.banner {
    width: 100%;
    height: 30px;
    background-color: #ffff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #000000;
}

.countdown-timer {
    font-size: 1.1em;
    letter-spacing: 1px;
	font-family: 'OldNewspaperTypes', monospace;
}

.countdown-timer span {
    margin: 0 5px;
}

.screen{
	height: 60px;
	width: 225px;
	border-radius: 10px;
	border: 4px solid #000000;
	background-color: #fff;
	font-size: 40px;
	color: #000;
	padding: 0px 20px 0px 20px;
	letter-spacing: 25px;
	font-family: 'OldNewspaperTypes', monospace;
	position: relative;
}
.flasher{
	content: "";
	display: block;
	width: 25px;
	height: 3px;
	background-color: #000;
	position: absolute;
	top: 45px;
	left: 20px;
	animation: blink 1s linear infinite;
	-webkit-animation: blink 1s linear infinite;
}
.keypad_wrapper{
	position: relative;
	width: 225px;
	height: 375px;
	background-color: #fff;
	border-radius: 10px;
	margin: 15vh auto;
}

.key{
	width: 65px;
	height: 65px;
	float: left;
	border-radius: 50px;
	border: 4px solid #000000;
	line-height: 55px;
	text-align: center;
	font-size: 40px;
	background-color: #fff;
	font-family: 'OldNewspaperTypes', monospace;
	margin: 5px;
	color: #000000;
}
.key{
	cursor: pointer;
}
.key:active{
	transform: scale(0.95);
	box-shadow: inset 0px 2px 5px rgba(0,0,0,0.2);
	color: #000000;
	line-height: 60px;
}
.key.last{
	position: relative;
	left: 75px;
}

.notification{
	color: #000000;
	font-family: 'OldNewspaperTypes', monospace;
	letter-spacing: 2px;
	text-align: center;
	font-size: 30px;
	position: absolute;
	width: 225px;
	top: 10px;
	left: 0;
	display: none;
}


@keyframes blink {
	0%{opacity: 0;}
	50%{opacity: 1;}
	100%{opacity: 0;}
}
@-webkit-keyframes blink {
	0%{opacity: 0;}
	50%{opacity: 1;}
	100%{opacity: 0;}
}

@media (max-width: 768px) {
    .armban {
        width: 100px;
    }
    
    .banner {
        position: fixed;
        right: -20px;
        top: 80%;
        transform: translateY(-50%) rotate(-90deg);
        transform-origin: left center;
        z-index: 1000;
        margin-top: 15px;
        padding: 20px;
        color: #000000;
    }
    
    .countdown-timer {
        font-size: 14px;
        white-space: nowrap;
    }
}