html, body {
	min-height:100%;
}

body {
	background-image:url('./gradient.png');
	background-repeat:no-repeat;
	background-size:100% 100%;
	padding-top:2em;
	padding-bottom:2em;
	text-align:center;
}

@media (min-width: 50em) {
     .hello1, .hello2, .hello3 {
    	width: 30%;
    	display:inline-block;
    	margin-right:0.5em;
    	margin-left:0.5em;
    	min-height:552px;
    }
    h1 {
    	margin-top:270px;
    }
    .store, .hello2classic {
        width: 94%;
        margin:0 auto 2em auto;
    }

    .store h1, .hello2classic h1 {
        margin-top: 30px;
    }
}

 @media (max-width:50em) {
     .hello1, .hello2, .hello3, .store, .hello2classic {
    	width: 80%;
    	margin-left:auto;
    	margin-right:auto;
    }
    h1 {
    	margin-top:2em;
    	margin-bottom:2em;
    }
}
.hello1, .hello2, .hello3, .hello2classic, .store {
	margin-bottom:1em;
	border-radius:8px;
	color:white;
	border:1px solid black;
}

.store, .hello2classic {
    min-height: 99px;
}

h1 {
	background:url("./fade.png");
}

a {
	text-decoration:none;
}

.hello1 {
	background-image:url('./1/peng back.png');
}
.hello2 {
	background-image:url('./2/backdrop.png');
}
.hello2classic {
    background-image:url('./2/2map.png');
    background-position: center;
}
.hello3 {
	background-image:url('./3/bg.png');
}
.store {
    background-image:url('./store/img/bg.png');
}

.hello1:hover{
	background-image: url('./fade.png'), url('./1/peng back.png');
}
.hello2:hover {
	background-image: url('./fade.png'), url('./2/backdrop.png');
}
.hello2classic:hover {
	background-image: url('./fade.png'), url('./2/2map.png');
}
.hello3:hover {
	background-image: url('./fade.png'), url('./3/bg.png');
}
.store:hover {
    background-image: url('./fade.png'), url('./store/img/bg.png');
}