/* Global Styles */
:root{
	--clr-text: #fff;
	--clr-headings: #fff;
	--clr-header: #555;
	--clr-odd: #666;
	--clr-even: #222;
	--clr-logo: #fff;
	--clr-body: #333;
	--clr-slider: #2196F3;
}

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Poppins', sans-serif;
}

body{
	font-size: 20px;
	background-color: var(--clr-body);
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
}

.container{
	padding: 1rem;
}

/* Navigation syles */
header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--clr-header);
	height: 80px;
}

.logo img{
	width: 200px;
	height: 60px;
	cursor: pointer;
	margin-left: 1rem;
}

nav ul{
	display: flex;
	align-items: center;
	height: 100%;
	list-style: none;
	margin-right: 1rem;
}

ul li{
	padding: 0 1rem;
	height: 100%;
}

ul a{
	color: #fff;
	text-decoration: none;
}

ul a:hover{
	color: #222;
}

.heading{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	width: 100%;
	background-color: #222;
}

.heading h1{
	font-size: 2rem;
	color: var(--clr-text);
}
/* Table styles */
table{
	width: 1920px;
	color: #fff;
	font-size: 1rem;
	border: 1px;
}

caption{
	font-size: 1.5rem;
	align-items: center;
	background-color: #555;
	padding: 0.5rem;
}

thead{
	background-color: #222;
}

th{
	height: 50px;
	font-size: 1rem;
}

.pk-number{
	width: 100px;
}

.pk-normal{
	width: 100px;
}

.pk-shiny{
	width: 100px;
}

.pk-reigon{
	width: 100px;
}

.pk-name{
	width: 150px;
}

.pk-evolve{
	width: 120px;
}

.pk-types{
	width:  150px;
}

.pk-seen{
	width: 100px;
}

.pk-normal-caught{
	width: 100px;
}

.pk-shiny-caught{
	width: 100px;
}

.pk-reigon-caught{
	width: 100px;
}

tr{
	text-align: center;
	height: 70px;
}

.odd{
	background-color: var(--clr-odd);
}

.even{
	background-color: var(--clr-even);
}

td{
	height: 50px;
}

img{
	width: 64px;
	height: 64px;
}

.evo-item{
	width: 32px;
	height: 32px;
}

.type{
	width: 30px;
	height: 30px;
}

.container{
	width: 100%;
	display: flex;
	justify-content: center;
}

/* Slider button */
.switch{
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
}

/* Hide default HTML checkbox and slider styles */
.switch input{
	opacity: 0;
	width: 0;
	height: 0;
}

.slider{
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before{
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: #fff;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .slider{
	background-color: var(--clr-slider);
}

input:focus + .slider{
	box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before{
	-webkit-transfrom: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

.slider.round{
	border-radius: 34px;
}

.slider.round:before{
	border-radius: 50%;
}

.note{
	padding: 1rem;
}

.note p{
	color: var(--clr-text);
}

/* Return to top */
.return-top{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40px;
	margin: 1 0px;
}

.return-top a{
	color: var(--clr-text);
	padding: 2rem;
}

#save-btn{
	width: 100px;
	height: 30px;
	border-radius: 10px;
	border: none;
	background-color: #2196F3;
	color: #fff;
	cursor: pointer;
	font-size: 1rem;
}

#save-btn:hover{
	background-color: #777;
}

/* Footer styles */
footer{
	display: flex;
	justify-content: center;
	text-align: center;
	align-items: center;
	color: #fff;
	background-color: var(--clr-header);
	font-size: 0.9rem;
	height: 60px;
}

/* Pokeball Styles */
.login-screen{
	width: 100%;
}

.login-container{
	background-color: #777;
	width: 100%;
	height: calc(100vh - 140px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.form-container{
	background-color: #444;
	height: 500px;
	width: 400px;
	padding: 20px 0;
	border-radius: 1rem;
}

.login-footer{
	position: fixed;
	bottom: 0;
	display: flex;
	width: 100%;
	justify-content: center;
	text-align: center;
}