*{
	padding: 0;
	margin: 0;
	box-sizing: 0;
	letter-spacing: .5px;
	line-height: 1.5;
	transition: .5s;
}

*:focus{
	outline: none;
}

:root{
	--bgcolor: #2D6AFF;
	--color: #333;
	--borad: .5rem;
	--light: #2D6AFF77;
	--fsize: 1.05rem;
	--state_color: #2737E8;
}

html{
	color: var(--color);
	position: relative;
	background: #eee;
	font-family: Ubuntu, sans-serif;
	height: 100%;
}

body{
	font-size: var(--fsize);
	position: relative;
	height: 100%;
	font-family: Ubuntu, sans-serif;
}

button{
	border: 0;
	background: var(--bgcolor);
	color: #EEE;
	padding: .5rem;
	border-radius: var(--borad);
	font-size: 1rem;
	cursor: pointer;
}

header{
	background: var(--bgcolor);
	color: #EEE;
	display: flex;
	align-items: center
}

header button{
	display: block;
	font-size: 1.75rem;
	margin-right: .5rem
}

#loading{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #eee;
	z-index: 7;
}

#img_con{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	flex-direction: column;
}

#img_con img{
	display: block;
	width: 5rem;
	height: 5rem;
	border-radius: .5rem;
}

#navbg{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
	backdrop-filter: blur(.125em);
}

nav{
	position: fixed;
	background: #EEE;
	width: 15rem;
	z-index: 5;
	box-shadow: 2px 2px 2px #777;
	bottom: 0;
	top: 0;
	left: -20rem;
	padding: .5rem;
	transition: .25s;
	color: #222;
}

nav ul{
	height: 100%;
}

nav li{
	color: var(--bgcolor)
}

nav li button{
	background: transparent;
	color: var(--bgcolor);
	display: block;
	padding: .75rem;
	transition: .25s;
	width: 100%;
	text-align: left;
}

nav li button:hover, nav li button:focus{
	background: var(--bgcolor);
	color: #EEE;
}

li label{
	display: flex;
	padding: .75rem;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}

li label:hover{
	background: var(--bgcolor);
	color: #EEE;
}

li input{
	display: none;
}

.slider{
	display: inline-block;
	width: 50px;
	height: 20px;
	background: #ccc;
	position: relative;
	border-radius: 26px
}

.slider::before{
	position: absolute;
	height: 25px;
	width: 25px;
	border-radius: 50%;
	background: #aaa;
	content: "";
	top: -2.5px;
	box-shadow: 0 0 2px 1px #777;
	transition: .5s;
}

input:checked + .slider::before{
	transform: translateX(25px);
	background: var(--bgcolor);
}

input:checked + .slider{
	background: var(--light)
}

#nav_footer{
	position: fixed;
	bottom: 1rem;
	left: 3.75rem;
	font-size: 1.2rem
}

.menu{
	max-height: 0;
	overflow-y: hidden;
	display: flex;
}

.option:focus + .menu{
	max-height: 10rem
}

.menu a{
	font-size: 2.5rem;
	color: #333;
	text-decoration: none;
	display: block;
	margin: 0 .5rem
}

#info{
	padding: 1rem;
	background: var(--color);
	color: #EEE;
	border-radius: var(--borad);
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
}

#info label *{
	display: block;
}

#info label{
	background: #333;
	display: flex;
	width: 100%;
	padding: .25rem;
	align-self: center
}

#pop-up{
	width: 20rem;
	padding: .75rem;
	border-radius: var(--borad);
	position: fixed;
	margin: .25rem;
	left: -25rem;
	background: #333;
	transition: .75s;
	font-weight: bold;
	color: #ddd;
}

form{
	padding: .5rem;
	margin: 1rem auto
}

form #field{
	width: 75%;
	margin: auto;
	padding: .5rem;
	display: flex;
	
}

#field input{
	background: transparent;
	border: 1.5px solid var(--bgcolor);
	padding: .5rem;
	width: 80%;
	height: 2rem;
	font-size: 1.25rem;
	border-radius: .5rem 0 0 .5rem;
	user-select: none
}

input:focus{
	box-shadow: 0 0 0px 4px var(--light);
}

#txt-id{
	display: block;
	transform: scale(0,0);
	position: absolute
}

button:focus{
	box-shadow: 0 0 0px 4px var(--light);
	background: var(--state_color);
}

#field #togglePasswordBtn{
	width: 4rem;
	font-size: 1.25rem;
	border-radius: 0 .5rem .5rem 0
}

#checkPwdBtn{
	width: 15rem;
	font-size: 1.2rem;
	display: block;
	margin: 1rem auto;
}


#closeInfoBtn{
	width: 5rem;
	padding: .75rem;
	float: right;
	border-radius: var(--borad);
}

.validated{
	color: #0CA215;
	font-weight: bold;
}

.unvalidated{
	color: #C40000;
	font-weight: bold;
	font-style: italic;
}

#result{
	padding: 2rem;
	display: none;
}

#copyBtnContainer{
	display: flex;
	justify-content: flex-end;
	padding: .5rem
}

/*
password generator
animation
loader
*/