*{box-sizing:border-box;margin:0;padding:0;font-size:18px;font-family:Helvetica;color:#333;}

html,body{width:100%;height:100%;}

header{background-color:#ccd;padding:2vh 0;}


.wrapper{display:flex;flex-wrap:wrap;justify-content:center;}

.wrapper>*{margin:16px 0;}

h1, p, #output{width:100%;text-align:center;}

#output{min-height:50px;}

input, button{padding:4px 12px;border-radius:6px;outline:none;border:1px solid #888;text-align:center;margin:4px}


@media screen and (max-width:500px){
	h1{font-size:18px}
}

@media screen and (min-width:501px) and (max-width:1200px){
	h1{font-size:5.6vw}
}

#article {
	text-align: left;
	padding: 5% 10% 5% 10%;
}

#article p {
	text-align: left;

}

a { color:blue}