@font-face{
    font-family: 'monospaces';
    src : url('../CascadiaCode.ttf');
}
*{
    font-family: monospaces,Noto Sans SC;
    transition: all .3s ease-in-out;
}
body{
	margin: 0;
}
header{
	height: 2vh;
}
h1{
	--colr: #323232;
	text-align: center;
	height: 9%;
	margin-top: 1%;
	z-index: -1;
	color: var(--colr);
	text-shadow: 0px 0px 2px var(--colr);
	filter: saturate(80%) opacity(90%);
}
#main{
	--cola: #888;
	--inwi: 292px;
	height: 80vh;
	width: 77vw;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-direction: column;
}

#inpt{
	height: 120%;
	width: var(--inwi);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
#inpt input{
	height: 100%;
	width: 100%;
	border: var(--cola) solid 0px;
	border-radius: inherit;	
	background: #f0f0f0;
	text-indent: 13.5px;
	color: #424242;
	font-size: 19px;
	font-family: monospaces;
	z-index: 1;
}
#inpt input::-webkit-input-placeholder{
    color: #888;
}
#inpt input:hover{
    background-color: var(--cola);
	color: #fafafa!important;
}
#inpt input:focus{
	outline: none;
	border: var(--cola) solid 2px;
	background: #fafafa!important;
	color: #323232!important;
}
#inpt input:hover::-webkit-input-placeholder{
    color: #fafafa;
}

#prvw{
	height: 86%;
	width: var(--inwi);
	display: flex;
	justify-content: center;
	align-items: center;
}
#colr{
	height: 80%;
	width: 260px;
	margin: auto;
	border-radius: 24px;
	background: #888;
	box-shadow: 0px 0px 8px var(--cola);
	overflow: hidden;
}
#colr div{
	height: calc(100%/3);
	width: 100%;
}
#chex{
	--colr: #fff0;
	background: var(--colr);
}
#crgb{
	--colr: #fff0;
	background: var(--colr);
}
#chsl{
	--colr: #fff0;
	background: var(--colr);
}

.rput{
	height: 46px;
	width: 260px;
	margin: auto;
	border-radius: 24px;
	background: #acacac;
	box-shadow: 0px 0px 8px #acacac;
	white-space: nowrap;
	overflow: hidden;
}
.rput:hover{   
	box-shadow: 0px 0px 10px var(--cola);
}

.erro{
	background: #c35!important;
	box-shadow: 0px 0px 8px #c35;
}
.erro:hover{   
	box-shadow: 0px 0px 12px #c35;
}
.erro input{
	background: #c35!important;
	color: #fafafa!important;
}
.erro input::-webkit-input-placeholder{
    color: #fafafa!important;
}
.erro input:hover{
	background: #ea5a7a!important;
	color: #fafafa!important;
}
.erro input:focus{
	width: 94%!important;
	border: #c35 solid 2px!important;
}

@media only screen and (min-width: 728px){
	header{
	    height: 8.5vh;
    }
	#main{
		max-height: 320px;
		max-width: 636px;
		bottom: 32px;
		flex-direction: row;
	}
	#inpt{
	    height: 100%;
    }
	#prvw{
	    height: 108%;
	    width: 45%;
    }
    #colr{
    	height: 88.5%;
    	max-width: 250px;
    }
}
@media (prefers-color-scheme: dark){
    body{
        background-color: hsla(192,33.7%,2.2%,0.9);
    }
    h1{
        --colr: #acacac;
        font-weight: 500;
    }
	#inpt input{
		background: #acacac;
		color: #323232;
	}
	#inpt input::-webkit-input-placeholder{
		color: #666;
	}
	#inpt input:hover{
		background-color: var(--cola);
		color: #fafafa!important;
	}
	#inpt input:focus{
		background: #fafafa!important;
		color: #323232!important;
	}
}