*{
	margin:0;
	padding:0;
	border: 0;
	box-sizing:border-box;
}

body{
  background:#333;
  background:linear-gradient(#333,#666);
	height:100vh;
	display:flex;
	align-items:center;
	flex-direction:column;
	justify-content: flex-start;
	overflow: auto;
}

h1{
	font:2.25em sans-serif;
	margin-bottom:10px;
  color:white;
}

.wrapper{
  box-shadow:0px 0px 20px 1px #000;
	padding:1em;
  background:linear-gradient(to bottom,hsl(10,60%,45%),hsl(10,60%,35%));
}

.wrapper:hover{
/*   margin-bottom:2px; */
  box-shadow:2px 2px 45px -1px black;
  transition:all 0.175s linear;
}

.mainform{
	margin-bottom:20px;
}

p{
	font: 2em sans-serif;
	margin-bottom: 5px;
	border-bottom: 1px solid #fff;
}

.mainform input{
	font: 1em sans-serif;
	color:#fff;
  opacity:0.7;
  background:#333;
  background:rgba(0,0,0,0);
}

button{
	width:100%;
	font:1.5em sans-serif;
	align-text:center;
	margin: 5px 0px;
	box-shadow: 2px 2px 5px black;
  background:hsl(190,70%,50%);
  color:#333;
}

.display{
	
}

.display p,
.mainform p{
  color:#dee;
}

.display p:nth-child(4){
	font: bold 2em sans-serif;
}

.display p:nth-child(5){
	font: bold 2em sans-serif;
}


#article {
	all: revert;
	padding: 5% 10% 1%;
	background-color: white;
	font-size:x-small;
}