@import url(fonts.css);

:root {
	--primary-color: #397;
	--secondary-color: #E48;
}

body {
	text-align: center;
	font-weight: 100;
	font-family: 'IBMPlexSans-Regular', Arial, sans-serif;
	background-image: linear-gradient( 115deg, rgba(0, 85, 85, 0.85) 0%, rgba(51, 153, 119, 0.85) 49%, rgba(0, 85, 51, 0.85) 100% );
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
	height: 100vh;
	margin: 0;
}

#logo img {
	width: 300px;
	max-width: 100%;
	margin: 0 auto;
	padding: 50px 15px 0;
}

h1 {
	font-family: 'IBMPlexSans-Light', Arial, sans-serif;
	font-weight: 100;
	font-size: 36px;
	line-height: .8;
	margin: 40px 0px 20px;
}
@media (min-width: 480px){
	h1 {
		font-size: 70px;
	}
}
@media (min-width: 768px){
	h1 {
		font-size: 110px;
	}
}
@media (min-width: 992px){
	h1 {
		margin-top: 100px;
		font-size: 120px;
	}
}
@media (min-width: 1200px){
	h1 {
		font-size: 140px;
	}
}

h2 {
	font-size: 30px;
	font-family: 'IBMPlexSans-Regular', Arial, sans-serif;
	font-weight: 100;
	padding-top: 30px;
}

#clockdiv {
	color: #fff;
	display: inline-block;
	text-align: center;
	font-family: 'IBMPlexSans-SemiBold', Arial, sans-serif;
	line-height: 1;
}

#clockdiv > div {
	display: inline-block;
}

#clockdiv div > span {
	padding: 5px;
	color: #fff;
	display: inline-block;
	text-align: center;
	font-size: 85px;
}
@media (min-width: 480px){
	#clockdiv div > span {
		font-size: 120px;
	}
}
@media (min-width: 768px){
	#clockdiv div > span {
		font-size: 150px;
	}
}
@media (min-width: 992px){
	#clockdiv div > span {
		font-size: 320px;
	}
}

#control-wrap {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 100px;
}

.btn {
	font-family: 'IBMPlexSans-SemiBold', Arial, sans-serif;
	margin: 0;
	padding: 15px 16px;
	background: var(--secondary-color);
	display: block;
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 18px;
	cursor: pointer;
}

#control-wrap .btn {
	margin-bottom: 15px;
	width: 100%;
}

#btn-hazard {
	position: absolute;
	left: 160px;
	bottom: 15px;
}

#btn-modal {
	position: absolute;
	right: 15px;
	bottom: 65px;
}
@media (min-width: 500px){
	#btn-modal {
		right: auto;
		left: 15px;
		bottom: 15px;
	}
}

.btn[disabled="disabled"] {
	background: #aaaaaa;
	cursor: default;
}

#score {
	margin-top: 50px;
	font-family: 'IBMPlexSans-Regular', Arial, sans-serif;
	font-size: 40px;
	text-align: left;
	position: absolute;
	left: 30%;
	bottom: 15px;
	overflow: hidden;
}

@media (max-width: 1199px){
	#score {
		display: none;
	}
}

#score .change-score {
	font-size: 30px;
}

#score .change-score span {
	display: inline-block;
}

#score .team {
	display: inline-block;
	width: 290px;
}

#score .score-wrapper {
	display: inline-block;
	width: 700px;
	position: relative;
	font-family: "DK Crayonista", Arial, sans-serif;
	font-size: 65px;
	line-height: 1;
	height: 38px;
}

#score .score {
	display: inline;
}

#score .score-wrapper .score:nth-child(5n){
	transform: rotate(60deg) scale(1,2);
	margin-left: -50px;
	display: inline-block;
}

#score .score-wrapper .score:nth-child(5n + 1){
	margin-left: 55px;
}

#score .score-wrapper .score:nth-child(1){
	margin-left: 0;
}

/* The Modal (background) */
.modal {
	display: none;
	opacity: 0;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
}

/* Modal Content/Box */
.modal-content {
	background-color: #fefefe;
	color: #000;
	position: absolute;
	bottom: 65px;
	right: 15px;
	left: auto;
	padding: 15px;
	width: 300px;
	max-width: 75%;
	text-align: left;
}

.modal-content .input-group {
	margin-bottom: 10px;
}

.modal-content .input-group label {
	display: inline-block;
	width: 40%;
	font-weight: bold;
}

.modal-content .input-group input {
	height: 30px;
	width: 40px;
	text-align: center;
}

@media (min-width: 500px){
	.modal-content {
		right: auto;
		left: 0;
		bottom: 0;
	}
}

/* The Close Button */
.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

#attention {
	font-size: 36px;
	position: absolute;
	right: 225px;
	top: 50%;
	transform: translate(50%, -50%);
	width: 391px;
	height: 391px;
	opacity: 0;
	transition: all 2s ease-in-out;
}

#attention > img {
	transition: all 2s ease-in-out;
	width: 100%;
}

#attention > #next-wrapper {
	width: 80%;
	position: absolute;
	right: 50%;
	top: 50%;
	transform: translate(50%, -50%) rotate(-5deg);
	transition: all 2s ease-in-out;
}

#attention p {
	margin-top: 0;
	margin-bottom: 0;
	line-height: 1;
	transition: all 2s ease-in-out;
}

#attention p.next {
	font-size: 28px;
	margin-bottom: 25px;
}

#attention p.vs {
	font-size: 18px;
	margin-bottom: 15px;
}

#attention p.team-a {
	margin-bottom: 15px;
}