/* Global
---------------------------------*/
:root {
	--main-border-radius: 8px;
	--btn-color: #252629;

	--color-white: #ffffff;

	--blue-tint: #1939f6;
	--black-tint: #191b1e;
	
	--white-tint: #eff1f5;
}

body {
	font-family: 'Share Tech Mono', monospace;
	font-size: 24px;
}
.white {
	background-color: var(--white-tint);
	color: var(--color-white);
}


/* Calculator Section
---------------------------------*/
#section-calculator {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#calculator-container {
	width: 298px;
	height: 540px;
	background-color: var(--black-tint);
	border-radius: var(--main-border-radius);
}

#screen-container {
	width: 100%;
	height: 38%;
	display: flex;
	flex-direction: column;
}
#result {
	width: calc(100% - 5px);
	height: 50%;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	color: var(--blue-tint);
}
#calculation {
	width: calc(100% - 15px);
	height: 30%;
	overflow-x: auto;
	white-space: nowrap;
	display: inline-block;
	margin: auto;
	text-align: right;
}

#numbers-container {
	width: 100%;
	height: 62%;
}

#operations-container {
	position: absolute;
	height: 250px;
	width: 50px;
	margin-top: -75px;
	margin-left: 325px;
	display: flex;
	flex-direction: row;
}

.row {
	width: 100%;
	height: 25%;	
	display: flex;
	flex-direction: row;
}
.column {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	border: 0.5px;
}

.btn {
	cursor: pointer;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.operation {
	background-color: var(--white-tint);
	color: var(--blue-tint);
	border-right: 0.5px solid var(--black-tint);
	border-left: 0.5px solid var(--black-tint);
}
.number {
	background-color: var(--btn-color);
	border: 0.5px solid var(--black-tint);
}
.clear {
	font-size: 18px;
	background-color: var(--btn-color);
	color: var(--color-white);
}
.backspace {
	font-size: 18px;
	border-bottom: 0.5px solid var(--black-tint);
}

.project-button-div {
	display: inline-block;
  	color: var(--black-tint);
  	font-size: 12px;
	margin-top: 15px;
	padding: 2px 6px 6px 5px;
}
.project-button-div img {
	width: 15px;
	height: 15px;
  	transform: translate(13%, 23%);
}

.top-left {
	border-top-left-radius: var(--main-border-radius);
}
.top-right {
	border-top-right-radius: var(--main-border-radius);
}

.bottom-left {
	border-bottom-left-radius: var(--main-border-radius);
}
.bottom-right {
	border-bottom-right-radius: var(--main-border-radius);
}

[v-cloak] { display: none; }