.main-container{
	background-color: #364658;
	width: 400px;
	height: 370px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	padding: 30px 25px 5px 20px;
	border-style: solid;
	border-radius: 20px;
}

.display{
	background-color: powderblue;
	position: relative;
	text-align: right;
	width: 380px;
	height: 40px;
	font-size: 25px;
	padding-top: 18px;
	padding-right: 20px;
	padding-bottom: 10px;
	border-style: solid;
}

.btn-group{
	width:100%;
	height: 250px;
	display: grid;
	grid-template-columns: repeat(5, auto);
	grid-template-rows: repeat(4, auto);
	gap: 20px 20px;
	padding-top: 20px;
}

#del{
	grid-column: 4/5;
}

#clear{
	grid-column: 5/6;
}

.row-1{
	grid-row: 1/2;
}

.row-2{
	grid-row: 2/3;
}

.row-3{
	grid-row: 3/4;
}

.row-4{
	grid-row: 4/5;
}

#sign{
	grid-column: 3/4;
}

#sqrt{
	grid-column: 4/5;
}

.btn-group button{
	font-size: 18px;
	width: 65px;
	border-radius:10px;
	border-style: solid;
	border-color: black;
	border-width: 2px;
}

.num-button, #decimal-point
{
	background-color:lightgrey;
}

#del, #clear{
	background-color: rgb(216, 114, 114);
	color: white;
}

#decimal-point{
	font-weight: 900;
}

.bin-operator, .un-operator, #equals{
	font-weight: bolder;
	color: white;
	background-color: steelblue;
}

.num-button:hover, #decimal-point:hover
{
	color: white;
	background-color: orange;
}

.bin-operator:hover, .un-operator:hover, #equals:hover{
	background-color: turquoise;
	color: white;
}

#del:hover, #clear:hover{
	background-color: red;
	color: white;
}