@font-face {
	font-family: "tahoma";
	src: url("fonts/windows-xp-tahoma.otf.woff2") format("woff2");
}

body {
	background-image: url('img/bliss.jpg');
	background-size: cover;
	font-family: "tahoma";
	font-size: 20px;
}

#main-window {
	width: 400px;
	height: 350px;
}

#title-bar {
	width: 400px;
	height: 35px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	color: white;
	text-shadow: 1px 1px 1px black;
	/*background-color: blue;*/
	background-image: linear-gradient( #0469EC, #77CCFF, #0469EC, #0469EC, #0469EC, #0569FF, #0569FF, #0569FF );
	box-shadow: inset 0px 0px 4px 1px #002195;
}

#title-bar, #window-icon-and-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

	#title-bar img {
		width: 24px;
		height: 24px;
		margin: 4px;
	}

#window-control-buttons {
	margin: 4px 8px;
}
/*#window-control-buttons > input[type=button]*/
.control-button {
	width: 24px;
	height: 24px;
	border: solid 1px;
	border-radius: 4px;
	padding: 0px 0px 2px 0px;
	font-size: 16px;
	font-weight: 700;
	transform: rotateY(180deg);
	background-image: linear-gradient(to bottom left, #55A1FF, #0025B5);
	box-shadow: inset -3px 1px 3px 0px #77A1F5;
	color: white;
}

	.control-button:hover {
		background-image: linear-gradient(to bottom left, #75C1FF, #2045D5);
		box-shadow: inset -3px 1px 3px 0px #77A1F5;
	}

	.control-button:active {
		background-image: linear-gradient(to bottom left, #55A1CF, #0025B5);
		box-shadow: inset -3px 1px 3px 0px #5781F5;
	}

	.control-button:disabled {
		background-image: linear-gradient(to bottom left, #55A1FF, #0025B5);
		box-shadow: inset -3px 1px 3px 0px #5581F5;
		color: lightgrey;
	}

#close-button {
	background-image: linear-gradient(to bottom left, #C97475, #FF3010);
	box-shadow: inset -3px 1px 3px 0px #C49A9B;
}

	#close-button:hover {
		background-image: linear-gradient(to bottom left, #D98855, #FF3020);
		box-shadow: inset 0px 0px 3px 3px #C49A9B;
	}

	#close-button:active {
		background-image: linear-gradient(to bottom left, #D95455, #FF3020);
		box-shadow: inset 0px 0px 3px 3px #B48A8B;
	}

/*------------------------------------------------------------------------------------*/
#client-rect {
	background-color: rgb(235,233,216);
	width: 400px;
	height: 312px;
	display: flex;
}
/*------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------*/
/*Borders*/

#border-left, #border-right {
	width: 5px;
	height: 312px;
	background-color: blue;
}

#border-left {
	background-image: linear-gradient(to right, #0022BBFF, #0055FFFF, #0022BBFF);
}

#border-bottom {
	width: 400px;
	height: 5px;
	background-color: blue;
}

#border-right, #border-bottom {
	background-color: darkblue;
	background-image: linear-gradient(to right, #001177CC, #0055BBFF, #001177CC);
}

/*------------------------------------------------------------------------------------*/
#work-area {
	width: 390px;
}
/*------------------------------------------------------------------------------------*/
/*Menu-bar*/
#menu-bar {
	border-bottom: solid 2px white;
}

	#menu-bar button {
		font-family: "tahoma";
		font-size: 20px;
		color: black;
		background-color: rgb(235,233,216);
		border: none;
	}

		#menu-bar button:hover {
			box-shadow: 1px 1px 1px 0px grey;
		}

		#menu-bar button:active {
			box-shadow: inset 1px 1px 1px 0px grey;
		}
/*------------------------------------------------------------------------------------*/
/*Display*/
#display {
	font-family: "tahoma";
	font-size: 30px;
	width: 92.5%;
	margin: 3px 10px 10px 10px;
	text-align: right;
	align-self: center;
	border-radius: 0px;
	border: solid 2px #8899A3;
}
/*------------------------------------------------------------------------------------*/
.buttons {
	font-family: "tahoma";
	font-size: 30px;
	display: grid;
	/*grid-template-rows: 50px 200px;
	grid-template-columns: 50px 200px;*/
	display: flex;
	justify-content: left;
}

	.buttons button {
		font-family: "tahoma";
		font-size: 23px;
		border: solid 2px #0f3c5a;
		border-radius: 4px;
		box-shadow: inset 0px -3px 4px 1px lightgrey;
		/*box-shadow: 0px 1px 1px 0px white;*/
		color: darkblue;
		width: 50px;
		height: 40px;
		/*margin:5px;*/
	}
	.buttons button:hover{
		background-color:lightgray;
		box-shadow:inset 0px 0px 2px 1px #FFAA00;
	}
	.buttons button:active{
		background-color:gray;
		box-shadow:inset 0px 0px 2px 1px #FFAA00;
	}
	

.memory-buttons {
	display: grid;
	grid-template-columns: 50px; /*1 столбик шириной 50рх*/
	grid-template-rows: 40px 40px 40px 40px 40px; /*5 строк высотой 40px*/
	/*grid-template-rows: auto auto auto auto auto;*/ /*5 строк высотой 40px*/
	grid-gap: 10px;
	margin: 0px 15px;
}

	.memory-buttons > button, .operational-buttons button {
		color: red;
		/*box-shadow: 0px 0px 2px 0px black;*/
	}

.wide-buttons {
	margin: 0px 10px;
}

	.wide-buttons button {
		color: red;
		width: 93px;
	}

#square {
	width: 32px;
	height: 32px;
	margin: 5px;
	/*box-shadow:inset 2px 2px 0px 0px grey;*/
	border: inset 2px;
}

/*------------------------------------------------------------------------------------*/
.digits-and-operations{
	display:flex;

}
.digit-buttons {
	display: grid;
	grid-template-rows: 40px 40px 40px 40px;
	grid-template-columns: 50px 50px 50px;
	grid-gap: 10px;
	margin: 10px 9px;
}

.operational-buttons {
	display:grid;
	grid-template-rows: 40px 40px 40px 40px;
	grid-template-columns: 50px 50px;
	grid-gap:10px;
	margin:10px 0px;
}
/*------------------------------------------------------------------------------------*/