@font-face {
	font-family: 'Apercu Condensed Bold Pro';
	src: url('./fonts/apercu-condensed-bold-pro.woff');
}

#controller {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	z-index: 9999;
	bottom: 20px;
	left: 50%;
	width: 1165px;
	height: 692px;
	background: url('./images/controller-base.png') no-repeat center/contain;
	transform: translateX(-50%);
}

#controller .buttons {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 845px;
}

#controller .buttons-action,
#controller .buttons-direction,
#controller .display-time {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 350px;
	height: 350px;
	background-color: #ffd300;
	border-radius: 50%;
}

#controller .buttons-action .button,
#controller .buttons-direction .button {
	position: absolute;
	margin: 0;
	padding: 0;
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	border: none;
}

#controller .buttons-action .button {
	width: 175px;
	height: 175px;
}

#controller .buttons-direction .button {
	width: 200px;
	height: 200px;
}

#controller .buttons-action .button.home {
	top: -75px;
	background-image: url('./images/controller-button-home.png');
}

#controller .buttons-action .button.home:active {
	background-image: url('./images/controller-button-home-pressed.png');
}

#controller .buttons-action .button.info {
	bottom: -55px;
	background-image: url('./images/controller-button-info.png');
}

#controller .buttons-action .button.info:active {
	background-image: url('./images/controller-button-info-pressed.png');
}

#controller .buttons-action .button.reset {
	left: -55px;
	background-image: url('./images/controller-button-reset.png');
}

#controller .buttons-action .button.reset:active {
	background-image: url('./images/controller-button-reset-pressed.png');
}

#controller .buttons-action .button.accessibility {
	right: -55px;
	background-image: url('./images/controller-button-accessibility.png');
}

#controller .buttons-action .button.accessibility.active,
#controller .buttons-action .button.accessibility:active {
	background-image: url('./images/controller-button-accessibility-pressed.png');
}

#controller .buttons-direction .button.up {
	top: -75px;
	background-image: url('./images/controller-button-up.png');
}

#controller .buttons-direction .button.up:active {
	background-image: url('./images/controller-button-up-pressed.png');
}

#controller .buttons-direction .button.down {
	bottom: -75px;
	background-image: url('./images/controller-button-down.png');
}

#controller .buttons-direction .button.down:active {
	background-image: url('./images/controller-button-down-pressed.png');
}

#controller .buttons-direction .button.left {
	left: -75px;
	background-image: url('./images/controller-button-left.png');
}

#controller .buttons-direction .button.left:active {
	background-image: url('./images/controller-button-left-pressed.png');
}

#controller .buttons-direction .button.right {
	right: -75px;
	background-image: url('./images/controller-button-right.png');
}

#controller .buttons-direction .button.right:active {
	background-image: url('./images/controller-button-right-pressed.png');
}

#controller .display-time {
	flex-direction: column;
	padding-top: 40px;
	font-family: 'Apercu Condensed Bold Pro', sans-serif;
	color: #0073bc;
}

#controller .display-time .label {
	position: relative;
	margin-bottom: 7.5px;
	font-size: 75px;
	text-transform: uppercase;
}

#controller .display-time .label::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #0073bc;
}

#controller .display-time .time {
	font-size: 245px;
}

#help-modal{
	position:absolute; z-index:99999; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,0.5); opacity:0; pointer-events:none; transition:all 0.5s ease;
}

#help-modal.show{
	opacity:1; pointer-events:all;
}

#help-content{
	position:absolute; top:500px; bottom:500px; left:250px; right:250px; padding:100px; border-radius:50px; background:#d43731; border:20px solid #ffca2e; box-shadow:0 0 100px rgba(0,0,0,0.75); color:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center;
}

#help-content h1{
	font-size:220px; text-transform:uppercase; margin:0; margin-bottom:50px; text-align:center;
}

#close-help{
	padding: 50px 100px; text-transform: uppercase; font-size: 90px; color:#d43631; background:#ffca2e; border: 0; border-radius: 100px;
}

#instructions{
	font-size:70px; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px;
}

#instructions div{
	text-align:center; padding:30px;
}

#instructions img{
	border-radius:30px; box-shadow:0 0 50px rgba(0,0,0,0.5); margin-bottom:20px;
}


#hard-refresh{
	position:absolute; top:0; right:0; width:300px; height:300px; border:1px solid red; z-index:99999999; opacity:0;
}

#timeout-modal{
	position:absolute; top:0; bottom:0; left:0; right:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.5); z-index:999999; transition:all 0.5s ease; opacity:1;
}

#timeout-modal.hidden{
	opacity:0; pointer-events:none;
}

#timeout-content{
	background:#d43731; border:10px solid #ffca2e; box-shadow:0 0 100px rgba(0,0,0,0.75); color:#fff; padding:120px; border-radius:30px; text-align:center;
}

#timeout-content h1{
	font-size:100px;
}

#timeout-content button{
	padding: 50px 100px; text-transform: uppercase; font-size: 90px; color:#d43631; background:#ffca2e; border: 0; border-radius: 100px; font-family: 'Apercu Condensed Bold Pro', sans-serif; margin-top:100px;
}