@font-face {
  font-family: 'font';
  src: url('font.ttf')  format('truetype'), /* Safari, Android, iOS */
}

*{
	padding: 0; margin: 0;
	font-family: 'font', 'Helvetica', sans-serif, 'Arial';
	font-weight: bold;
}

body{
	background: #383838;
	color: white;
}

.container{
	position: absolute; width: 100%;
	top: 50%; transform: translateY(-50%);
	display: flex; flex-direction: column;
    justify-content: center; align-items: center;
}
 

.title{ 
	display: block; 
	margin-bottom: 20px; 
	font-weight: bold; font-size: 40px; 
}

form{
	position: relative;
	width: 280px; height: 280px;
	padding: 10px;
	border-radius: 10px;
	background: #000;
	box-shadow:  20px 20px 60px #191919,
	             -20px -20px 60px #575757;
}

input, select, button, textarea{
	border-radius: 5px;
	padding: 5px; margin-bottom: 9px;
	display: block;
}
select{ display: inline-block; }

textarea{ margin-top: 5px; width: 210px; height: 150px; background-color: #DDDDDD; color: black; font-weight: normal;
	border: none;
	position: relative; left: 50%; transform: translateX(-50%);
}

label{ margin-bottom: 3px; }

button{ margin-top: 12px; width: 100%; font-weight: bold; border: 2px white solid; }

.result{ width: 300px;
	border-radius: 10px;
	background: #383838;
	box-shadow:  20px 20px 60px #191919,
	             -20px -20px 60px #575757;
}