@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');

* {
	margin: 0;
	padding: 0;
	border: none;
	underline: none;
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	}

body {
	width: 100%;
	height: 100%;
	background: #e3e8eb;

	transition: background .6s ease;
	}

body.dark {
	background: #000;
	}

#calculator {
	width: 100%;
	height: 100%;
	color: #3c494c;

	transition: color .6s ease;
	}

#calculator.dark, #calculator.dark #input {
	color: #aaa;
	}

#input {
	width: 70%;
	min-height: 100%;
	position: absolute;
	color: #3c494c;
	background: none;
	resize: none;
	outline: none;
	box-sizing: border-box;
	padding-right: 40px;
	padding-bottom: 40px;
	padding-left: 8%;
	top: 0; left: 0;

	transition: color .6s ease;
	}

#output {
	width: 30%;
	height: 100%;
	position: fixed;
	padding-right: 20px;
	padding-left: 20px;
	top: 0; right: 0;
	}

#input, #output {
//	font-family: "Source Sans Pro";
//	font-size: 17px;
	font-family: "Silka";
	font-size: 20px;
	color: #103b46;
	line-height: 180%;
	box-sizing: border-box;
	padding-top: 8%;
	}

#line {
	width: 1px;
	height: 100%;
	position: fixed;
	background: #bfccd3;
	top: 0; left: 70%;

	transition: background .6s ease;
	}

#calculator.dark #line {
	background: #555;
	}

.result {
//	background: #0cf;
	box-sizing: border-box;
	border-radius: 99px;
	display: table;
	padding: 4px 14px;
	margin: -8px 0;
	}

.result:hover {
	background: #0cf;
	}

#logo {
	width: 70px;
	height: 13px;
	position: fixed;
	background: url(../img/toast-logo.svg);
	background-size: cover;
	background-repeat: no-repeat;
	right: 50px; bottom: 50px;
	}