@charset "UTF-8";
/* CSS Document */

header{
}
main{
    text-align: center;
}
h2{
padding: 50px 0;
}
button{
	font-size:1em;
	margin-right:10px;
	color:#E9ECEB;
	padding:10px 25px;
	background:#000;
	border-radius:20px;
	border:none;
    display:inline-block;
	cursor:pointer;
}
button:hover{
	background:#9FAFAA;
}
#soap{
	width:840px;
	margin:50px auto;
}
#soap .list{
    display: flex;
	flex-wrap:wrap;
}
#soap .list li{
    padding: 30px;
}
aside{
	text-align:center;
	margin-top:100px;
}
aside p a{
	background-color:#333;
	text-decoration:none;
	padding:5px 13px;
	border-radius:10px;
	color:#fff;
}
footer{
	margin-top:100px;
}

@media screen and (max-width:640px){
#soap{
	width:100%
}
#soap .list li{
	width:40%;
	height:auto;
}
#soap .list li{
	padding:10px;
	margin:auto;
}
button{
	margin-bottom:10px;
}
}