@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@800&family=Roboto&display=swap');
:root {
	--bg-color: #efefef;
	--title-bg-color: #266867;
	--title-color: white;
	--content-bg-color: #282a30;
	--content-text-color: #fefefe;
}
body {
	background-color: var(--bg-color);
	margin: 0;
	padding: 0;
    	font-family: "Roboto", "Arial","sans-serif";
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
li:first-of-type {
	margin: 0;
}
li {
	margin-top: 2rem;
}
label {
	display: block;
	font-size: 8pt;
}
input {
	display: block;
	width: 100%;
	padding: 0.8rem;
	border: none;
        font-family: "Roboto", "Arial","sans-serif";
	box-sizing: border-box;

}
h1 {
	font-family: Poppins;
	font-weight: 800;
	margin: 0;
}
.wrapper {
	margin-top: 3rem;
    padding: 1rem;
    display: flex;
    justify-content: center;
    filter: drop-shadow(0 0 0.5rem grey);
}
.content  {
	width: 40rem;
}
.title {
	color: var(--title-color);
	background-color: var(--title-bg-color);
	padding: 0.8rem;
	margin: 0;
	text-align: center;
	border-radius: 0.7rem 0.7rem 0 0;
}
.form {
	background-color: var(--content-bg-color);
	color: var(--content-text-color);
	padding: 1.5rem;
	border-radius: 0 0 0.7rem 0.7rem;
}
button {
	border: none;
	padding: 2rem;
	margin-top: 0;
}