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

html, body {
height: 100%;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #c4dfff;
	background: linear-gradient(120deg, rgb(187, 215, 249) 0%, rgba(255, 212, 225, 0.75) 100%);
}

.calculator-container {
    border: 1px solid #f5f6f7;
	width: 400px;
	height: 600px;
	padding: 7px 15px 5px;
	background-color: #F0F1F5;
	border-radius: 20px;
	box-shadow: 10px 10px 40px rgba(90, 89, 89, 0.2);
	
}

.calculator-container.hidden {
    display: none;
}

.reopen {
	background: linear-gradient(to bottom, rgba(224, 191, 251, 0.7), rgba(187, 150, 224, 0.6));
	border: none;
	border-radius: 30px;
	box-shadow: 8px 10px 25px rgba(185, 146, 224, 0.3);
	color: rgba(255, 252, 252, 0.95);
	font-family: "Sour Gummy", sans-serif;
	font-size: 36px;
	font-weight: 500;
	font-style: italic;
	padding: 20px 40px 25px;
	cursor: pointer;
	text-shadow: 2px 2px 6px rgba(185, 139, 216, 0.6);
	backdrop-filter: blur(4px);
	transition: all 0.3s ease;
}

.reopen > span {
	font-style: normal;
	margin-right: 15px;
}

.reopen:hover {
	transform: scale(0.85);
	background: linear-gradient(to bottom, rgba(228, 206, 248, 0.8), rgba(197, 167, 228, 0.6));
	box-shadow: 10px 12px 25px rgba(182, 135, 221, 0.4);
}

.calculator-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.calculator-button {
	display: flex;
  	gap: 6px;
	margin-bottom: 10px;
}

.control-button {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: none;
	font-size: 14px;
	font-weight: bold;
	color: #2a2929;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	line-height: 1;
}

.red-button {
	background-color: #FD5643;
}

.yellow-button {
	background-color: #FFBD2E;
}

.green-button {
	background-color: #2AC749;
}

.gray-button {
	background-color: #C0C0C0;
}

.smaller {
	position: relative;
	top: -1px; 
}

.copyright {
	color: #a09f9f;
	font-size: 12px;
}

.display {
	height: 120px;
	color: #323232;
	padding: 12px;
	font-size: 58px;
	display: flex;
	justify-content: right;
	align-items: center;
	overflow: hidden;
	margin-bottom: 5px;
}
.buttons {
	height: 430px;
	color: black;
	padding: 0px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.button {
	width: 23.3%; 
	height: 18%;
	font-size: 28px;
	border-radius: 50px;
	border: none;
	background-color: white;
	cursor: pointer;
}

.button:nth-child(1),
.button:nth-child(2),
.button:nth-child(3) {
	background-color: #dcdcde;
	color: #454242;
}

.button:nth-child(4n) {
	background-color: #bebec1;
	color: #272727;
}

.button:nth-child(8) {
	padding-top: 15px;
}

.button:nth-child(19) {
	background-color: #fb8181;
	color: #3b3b3b;
}

.button:hover {
	background-color: #d7e9fc;
}

.button:active {
	background-color: #7bb1f4;
	box-shadow: 7px 7px 20px #7b96ad;
}

.zero {
	width: 48.5%;
	border-radius: 35px;
	font-size: 28px;
}

.dot-text {
	position: relative; 
	top: -7px;
}