@layer defaults, classes, aniamtions;

@keyframes fadein {
	from {
		line-height: 5;
		opacity: 0;
	}
	to {
		opacity: 1;
		line-height: 2;
	}
}

@keyframes toBlur {
	from {
		opacity: 0;
		visibility: hidden;
	}
	to {
		opacity: 1;
		visibility: visible;
	}
}

@keyframes toClear {
	from {
		opacity: 1;
		visibility: visible;
	}
	to {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes popIn {
	from {
		transform: translate(0, 100%) scale(.8);
	}
}

@keyframes popOut {
	to {
		transform: translate(0, 100%) scale(.8);
	}
}

@layer defaults {
	* {
		margin: 0;
		padding: 0;
		cursor: default;
		box-sizing: border-box;
	}
	
	html {
		background-color: #f8f6f6;
		display: grid;
		justify-content: center;
	}
	
	body {
		max-width: 50rem;
		padding: 1rem;
		font-family: "Sawarabi Gothic", serif;

		line-height: 2;


		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
		animation-name: fadein;
		animation-duration: 2s;
	}
	
	main {
		margin: 2rem;
		padding: 2rem;
		background-color: white;
	}
	
	h1 {
		font-size: 3rem;
		margin: 2rem;
		color: #363636;
	}
	
	p {
		color: #363636;
		font-size: 1rem;
	}
	
	cite {
		font-style: italic;
		font-weight: bolder;
		margin-right: .5rem;
	}
	
	blockquote {
		max-width: 90%;
		margin: 2rem;
		padding: 1rem;
		border-radius: 1rem;
		border-left: .3rem solid #8f9dd9;
		background-color: white;
	}

	input {
		margin: .5rem;
		width: 10rem;
		height: 2rem;
	}
	
	footer {
		position: fixed;
		left: 1rem;
		bottom: 1rem;
		color: gray;
	}
	
	hr {
		background-color: #c7c7c7;
		margin: 1rem 2rem;
		height: .01rem;
	} 
}

@layer classes {

	.sorry {
		font-size: .6rem;
		color: gray;
	}
	
	.description {
		padding-left: 1rem;
	}
	
	.border {
		border-radius: 1rem;
		border: .1rem #b0b0b0 solid;
	}
	
	.calc {
		text-align: center;
		padding: 1rem;
		border-radius: 1rem;
		border: .1rem solid white;
		box-shadow: 0 0 1rem #aea8a88b;
		width: 8rem;
		background-color: #8f9dd9;
		color: white;
	
		transition-property: transform;
		transition-duration: .5s;
		transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
			&:hover {
				transform: scale(1.1);		
			}
			&:active {
				transform: scale(.9);
			}
	}
	
	.inputs {
		& div {
			margin-bottom: 2rem;
			&.calc {
				margin-bottom: 0;
			}
		}
	}
	
	.outputs {
		width: 40rem;
		padding: 3rem;
		border-radius: 1rem;
		background-color: #f8f6f67e;

		-webkit-backdrop-filter: blur(3rem);
		backdrop-filter: blur(3rem);
		
		z-index: 1;
		box-shadow: 0 0 3rem #c2c2c290;
	}
	
	.dialog {
		position: relative;
		display: grid;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0; left: 0;
		width: 100vw; height: 100vh;

		-webkit-backdrop-filter: blur(3rem);
		backdrop-filter: blur(3rem);
	}
	
	.slider {
		display: flex;
		align-items: center;
		color: gray;
	}
	
	.output {
		font-size: 1.5rem;
		color: #7d7d7d;
	}
	
	.time {
		font-size: 2.5rem;
		font-weight: bolder;
		color: #363636;
	}
	
	.details {
		margin-top: 2rem;
		padding: 1rem;
		border-radius: 1rem;
		background-color: #f8f6f6;
		& p {
			font-size: .75rem;
		}
	}
	
	.warning {
		display: flex;
		border-left: #f9f998 solid .3rem;
		font-size: 1rem;
		border-radius: 1rem;
		background-color: #ffffdb;
		padding: 1rem;
		margin-bottom: 2rem;
		& p:first-child {
			margin-right: 1rem;
		}
	}
	
	.hidden {
		display: none;
	}
}

@layer animations {
	.toBlur {
		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
		animation-duration: .5s;
		animation-name: toBlur;
		animation-fill-mode: both;
	}

	.toClear {
		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
		animation-duration: .5s;
		animation-name: toClear;
		animation-fill-mode: both;
	}

	.popIn {
		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
		animation-duration: 1s;
		animation-name: popIn;
		animation-fill-mode: both;
	}

	.popOut {
		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
		animation-duration: 1s;
		animation-name: popOut;
		animation-fill-mode: both;
	}
}