/* !!! 1. Container !!! */
/* !!! 2. divButtons !!! */
/* !!! 3. Operator buttons !!! */
/* !!! 4. UpRow !!! */
/* !!! 5. divOutput !!! */

/* ---------------------------------------------------------------------- */
/* !!! 1. Container !!! */

* {
	font-family: Arial, sans-serif;
	box-sizing: border-box;
	text-align: center;
	justify-content: space-between;
}

#container {
	width: 60vmin; /* vmin - for the different screens */
	height: auto;
	margin: auto;
	border: 1px solid #aaa;
	border-radius: 2% 2% 0 0;
	transform: translateY(50%); /* center vertically */
}

/* ---------------------------------------------------------------------- */
/* !!! 2. divButtons !!! */

#divButtons {
	border: 1.5vmin solid #ddd; /* vmin - for the different screens */
}

.divRows {
	background-color: #ddd;
	height: 5vmin; /* vmin - for the different screens */
	display: flex;
	flex-flow: row wrap;
}

.buttons {
	background-color: #ddd;
	width: calc(100% / 6);
	border: 1px solid #aaa;
	border-radius: 12%;
}

/* pressed buttons */
.buttons:active {
	transform: scale(0.9);
	box-shadow: 3px 2px 22px 1px #aaa inset;
}

/* ---------------------------------------------------------------------- */
/* !!! 3. Operator buttons !!! */

.operators {
	background-color: #333;
	color: #fff;
}

.operatorsAlso {
	background-color: #ccc;
}

.keyboard {
	color: #777;
}

#equals {
	background-color: #369;
	color: #fff;
	width: calc(100% / 3);
}

/* ---------------------------------------------------------------------- */
/* !!! 4. UpRow !!! */

.divUpRow {
	width: calc(100% / 3);
	display: flex;
	flex-flow: row wrap;
}

.memory, .undoClear {
	flex: 1 1 0;
}

.memory {
	background-color: #bbb;
	color: #369;
}

#undo {
	background-color: pink;
}

#clear {
	background-color: red;
	color: #fff;
}

/* ---------------------------------------------------------------------- */
/* !!! 5. divOutput !!! */

#divOutput {
	color: #555;
	padding: 0 1vmin;
	font-size: 6vmin; /* vmin - for the different screens */
	line-height: 10vmin; /* vmin - for the different screens */
	text-align: right;
	height: 12vmin; /* vmin - for the different screens */
	border: 1.5vmin solid #ddd; /* vmin - for the different screens */
	border-radius: 2%;
}