*{
	padding: 0;
	margin: 0;
	font-family: 'Montserrat Alternates';
}
body{
	background-color: #80ED99;
}
.flex-col{
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.weight-600{
	font-weight: 600;
}
.noti{
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}
.message{
	padding: 18px;
	top: -57px;
	position: absolute;
	font-size: 30px;
	transition: 0.5s;
	color: #38A3A5;
}
.welcome{
	position: fixed;
	top: 57px;
	z-index: 5;
	background-color: #f8f8f8;
	height: 250px;
	padding: 10px 200px 10px 200px; margin: 0 auto;
	font-size: 20px;
	box-shadow: 0 5px 15px #00000030;
	color: #57CC99;
}
button{
	border: none;
	outline: none;
	background-color: transparent;
	margin: 10px 0 0 0;
	font-size: 30px;
	color: #57CC99;
	transition: 0.3s;
}
.header{
	user-select: none;
	padding: 10px 50px 10px 50px;
	background-color: #22577A;
	font-size: 30px; font-weight: 500;
	color: #fff;
	position: sticky; top: 0;
	z-index: 2;
	transition: 0.5s;
}
.container{
	padding: 0px;
	box-sizing: border-box;
	display: flex;
	background-color: #80ED99;
}
.container h2{
	color: #fff;
	margin-bottom: 10px;
	font-size: 30px;
}
.container button:hover{
	transform: translateY(-3px);
}
.subcontainer{
	margin: 65px 0 105px 0;
	width: calc(100% - 300px);
	display: flex;
	justify-content: center;
}
.subcontainer button{
	background-color: #57CC99;
	color: #fff;
	padding: 5px;
	width: 150px;
}
.select{
	height: 350px;
	text-align: center;
}
.select button{
	margin: 0 5px 0 5px;
}
.playground{
	padding: 15px;
	width: 420px; height: 420px;
	background-color: #57CC99;
	display: flex; flex-wrap: wrap;
	justify-content: space-around;
	border-radius: 10px 10px 10px 0;
	box-shadow: 0 5px 15px #00000030;
}
.playground *{
	font-size: 25px;
	box-sizing: border-box;
	width: calc(11.111111111111% - 2px);
	margin: 1px;
	border: none; outline: none;
	border-radius: 0px;
	padding: 5px;
	text-align: center;
	color: #22577A;
}
#a3, #b3, #c3, #d3, #e3, #f3, #g3, #h3, #i3, #a6, #b6, #c6, #d6, #e6, #f6, #g6, #h6, #i6, #a9, #b9, #c9, #d9, #e9, #f9, #g9, #h9, #i9{
	border-right: 2px solid #57CC99;
}
#a1, #b1, #c1, #d1, #e1, #f1, #g1, #h1, #i1, #a4, #b4, #c4, #d4, #e4, #f4, #g4, #h4, #i4, #a7, #b7, #c7, #d7, #e7, #f7, #g7, #h7, #i7{
	border-left: 2px solid #57CC99;
}
#c1, #c2, #c3, #c4, #c5, #c6, #c7, #c8, #c9, #f1, #f2, #f3, #f4, #f5, #f6, #f7, #f8, #f9, #i1, #i2, #i3, #i4, #i5, #i6, #i7, #i8, #i9{
	border-bottom: 2px solid #57CC99;
}
#a1, #a2, #a3, #a4, #a5, #a6, #a7, #a8, #a9, #d1, #d2, #d3, #d4, #d5, #d6, #d7, #d8, #d9, #g1, #g2, #g3, #g4, #g5, #g6, #g7, #g8, #g9{
	border-top: 2px solid #57CC99;
}

.four *{
	width: calc(25% - 2px);
}
#j12, #k12, #l12, #m12, #j14, #k14, #l14, #m14{
	border-right: 2px solid #57CC99;
}
#j11, #k11, #l11, #m11, #j13, #k13, #l13, #m13{
	border-left: 2px solid #57CC99;
}
#k11, #k12, #k13, #k14, #m11, #m12, #m13, #m14{
	border-bottom: 2px solid #57CC99;
}
#j11, #j12, #j13, #j14, #l11, #l12, #l13, #l14{
	border-top: 2px solid #57CC99;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}
input[type=number] {
    -moz-appearance:textfield;
}
.info{
	position: sticky;
	top: 57px;
	background-color: #38A3A5;
	height: max-content; width: 300px;
	box-sizing: border-box;
	padding: 10px;
	font-size: 19px;
}
.info button{
	background-color: #22577A;
	padding: 10px;
	width: 170px;
	color: #fff;
	transition: 0.5s;
	margin: 10px 0 0 0;
	font-size: 19px;
}
.info button:hover{
	background-color: #366b82;
}
.ftr{
	background-color: #22577A;
	padding: 40px 35px 40px 35px;
	font-size: 19px;
	color: #fff;
	display: flex;
	justify-content: space-around;
}
.name{
	font-size: 30px;
	font-weight: 500;
}
.ftr a{
	text-decoration: none;
	color: #fff;
	border-left: 1px solid #fff;
	padding-left: 10px;
}
.name a{
	border-left: none;
	padding-left: 0;
}
.links{
	margin-top: 10px;
	margin-bottom: 20px;
	line-height: 25px;
	margin-left: 10px;
}

.orig{
	background-color: dimgrey;
	color: whitesmoke;
}

.highlight{
	background-color: lightblue;
	color:  black;
}

@media (max-width: 700px){
	.welcome{
		padding: 10px;
	}
	.message{
		font-size: 25px;
	}
	.header{
		text-align: center;
	}
	.container{
		flex-wrap: wrap;
	}
	.subcontainer{
		width: 100%;
		margin-bottom: 73px;
		margin-top: 60px;
		flex-wrap: wrap;
	}
	.playground{
		width: 93%; height: unset;
		padding: 5px;
	}
	.four{
		width: 85%; height: 350px;
		padding: 10px;
	}
	.info{
		position: static;
		right: unset;
		top: unset;
		width: 100%;
		padding: 15px 35px 15px 35px;
	}
	.container button:hover{
		background-color: #366b82;
		transform: translateY(0px);
	}
	.ftr{
		flex-wrap: wrap;
	}
	.name{
		text-align: center;
		margin-bottom: 30px;
	}
	.ftr *{
		width: 100%;
		cursor: default;
	}
}