* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}



/* CSS VARIABLES */
:root {
	/* colors */
	--background-color: #dee2e6;
	--color-dark: #191919;
	--color-light: #e9ecef;
	--color-operators: #00bbf9;
	--color-equal: #ff7b00;

	/* font family */
	--fontfamily:'Oxygen', sans-serif; 
	
	/* font sizes */
	--fontsize-display-top: 1.5rem;
	--fontsize-display-bottom: 2.5rem;
	--fontsize-btns: 1.5625rem;

	/* font weight */
	--fontweight-light: 300;
	--fontweight-regular: 400;

	/* shadows */
	--operators-shadows: 0 0 5px #00bbf9, 0 0 180px #00bbf9;
	--equal-shadows: 0 0 5px #ff7b00, 0 0 180px #ff7b00;
}



/* BODY */
body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background: var(--background-color);
	font-family: var(--fontfamily);
}


/* CALCULATOR CONTAINER */
.calculator {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: var(--color-dark);
	border-radius: 30px;
	box-shadow: 5px 10px 5px gray;
}


/* CALCULATOR DISPLAY CONTAINER */
.calculator__displays {
	width: 85%;
	margin-bottom: 1.25rem;
	border-radius: 1.25rem;
	background: #191919;
	box-shadow: inset 5px 5px 10px #151515,inset -5px -5px 10px #1d1d1d;

}

/* calculator displays */
.calculator__display {
	height: 50%;
	color: var(--color-light);
	font-weight: var(--fontweight-regular);
	text-align: right;
	padding: 5px;
}



/* CALCULATOR BTNS CONTAINER */
.calculator__btns {
	/* background:blue; */
	width: 85%;
	height: 21.875rem;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* grid-template-columns: repeat(4, minmax(70px,1fr)); */
	grid-template-rows: repeat(5, 1fr);
	grid-column-gap: 15px;
	grid-row-gap: 15px;
	justify-content: center;
}

/* calculator btns */
button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	border: none;
	border-radius: 10px;
	color: var(--color-light);
	font-size: var(--fontsize-btns);
	font-weight: var(--fontweight-regular);
	background: linear-gradient(145deg, #171717, #1b1b1b);
	box-shadow:  5px 5px 13px #0f0f0f,-5px -5px 13px #242424;
}

button:active {
	border-radius: 10px;
	background: #191919;
	box-shadow: inset 5px 5px 10px #151515,inset -5px -5px 10px #1d1d1d;
	color: #adb5bd;
}

.calculator__btn--1 { grid-area: 1 / 1 / 2 / 3; }

.calculator__btn--2 { grid-area: 1 / 3 / 2 / 4; }

.calculator__btn--3 { 
	grid-area: 1 / 4 / 2 / 5;
	color: var(--color-operators);
	text-shadow: var(--operators-shadows);
}

.calculator__btn--3:active { 
	color: var(--color-operators);
	text-shadow: none;
}

.calculator__btn--4 { grid-area: 2 / 1 / 3 / 2; }

.calculator__btn--5 { grid-area: 2 / 2 / 3 / 3; }

.calculator__btn--6 { grid-area: 2 / 3 / 3 / 4; }

.calculator__btn--7 { 
	grid-area: 2 / 4 / 3 / 5;
	color: var(--color-operators);
	text-shadow: var(--operators-shadows); 
}

.calculator__btn--7:active {
	color: var(--color-operators);
	text-shadow: none;
}

.calculator__btn--8 { grid-area: 3 / 1 / 4 / 2; }

.calculator__btn--9 { grid-area: 3 / 2 / 4 / 3; }

.calculator__btn--10 { grid-area: 3 / 3 / 4 / 4; }

.calculator__btn--11 { 
	grid-area: 3 / 4 / 4 / 5;
	color: var(--color-operators);
	text-shadow: var(--operators-shadows); 
}

.calculator__btn--11:active {
	color: var(--color-operators);
	text-shadow: none;
}


.calculator__btn--12 { grid-area: 4 / 1 / 5 / 2; }

.calculator__btn--13 { grid-area: 4 / 2 / 5 / 3; }

.calculator__btn--14 { grid-area: 4 / 3 / 5 / 4; }

.calculator__btn--15 { 
	grid-area: 4 / 4 / 5 / 5;
	color: var(--color-operators);
	text-shadow: var(--operators-shadows);
 }

.calculator__btn--15:active { 
	color: var(--color-operators);
	text-shadow: none;
}


.calculator__btn--16 { grid-area: 5 / 1 / 6 / 3; }

.calculator__btn--17 { grid-area: 5 / 3 / 6 / 4; }

.calculator__btn--18 { 
	grid-area: 5 / 4 / 6 / 5;
	color: #ff7b00;
	text-shadow: var(--equal-shadows)
}

.calculator__btn--18:active {
	color: var(--color-equal);
	text-shadow: none;
}

 /* RESPONSIVE WEB DESIGN - MOBILE FIRST*/
 /* min width 200px */
@media screen and (min-width: 200px) {
	.calculator {
		width: 12.5rem;
		height: 22.5rem;
	}

	.calculator__displays {
		height: 5rem;
	}
	
	.calculator__display--top {
		font-size: var(--fontsize-display-top);
	}
	
	.calculator__display--bottom {
		font-size: var(--fontsize-display-bottom);
	}

	.calculator__btns {
		height: 12.5rem;
	}
}

/* min width 320px */
@media screen and (min-width: 320px) {
	.calculator {
		width: 17.5rem;
		height: 27.5rem;
	}

	.calculator__displays {
		height: 6.25rem;
	}

	.calculator__btns {
		height: 15.5rem;
	}
}

/* min width 768px */
@media screen and (min-width: 768px) {
	.calculator {
		width: 18.75rem;
		height: 28.75rem;
	}

	.calculator__displays {
		height: 7rem;
	}

	.calculator__btns {
		height: 16.5rem;
	}
}

/* min width 1200px */
@media screen and (min-width: 1200px) {
	.calculator {
		width: 21.875rem;
		height: 31.875rem;
	}

	.calculator__displays {
		height: 7.25rem;
	}
	
	.calculator__btns {
		height: 18.5rem;
	}
}

/* min width 1600px */
@media screen and (min-width: 1600px) {
	.calculator__display--top { 
		font-size: 1.9rem;
	}
	
	.calculator__display--bottom { 
		font-size: var(--fontsize-display-bottom);
	}
}