* {box-sizing: border-box;margin:0;padding:0}
html,body{width:100%;height:100%}
body{font-family:Helvetica}

a{text-decoration:none;transition:0.3s}
a, button{cursor:pointer}

header{position:relative;display:flex;width:100%;height:15vw;justify-content:center;align-items:center}
header a{display:flex;width:12vw;height:12vw;border-radius: 8px;border: none;box-shadow: 2px 2px 6px #ccc;overflow:hidden;margin:1vw}
header button{width:100%;height:100%;justify-content: center;align-content: center}
header button:hover p{opacity:1}
header a:hover{transform:scale(1.1);transition:0.3s}
header a:active{outline:none}

header p{opacity:0;display:flex;color:#555;font-size:3vw}

.image1, .image2, .image3, .image4{background-size: cover;background-repeat: no-repeat;animation:animMainBackground 0.5s 1 }
.image1 {background-image: url(../img/29259730358_2d49d10fc8_k.jpg)}
.image2 {background-image: url(../img/1548161240_5aa545293c_o.jpg)}
.image3 {background-image: url(../img/meiss.jpg)}
.image4 {background-image: url(../img/chgo.jpg)}

@keyframes animMainBackground{
	0%{opacity:0}
	100%{opacity:1}
}

#links{position:relative;display:flex;flex-wrap:wrap;justify-content:center;}
#links > *{margin:0 2px;}

main {position: absolute;width: 100vw;height: 100vh}
.container {display: flex;position: relative;top: 40vh;width: 68vw;margin: auto;justify-content: space-between}
button {display: flex;position: relative;width: 12em;height: 12em;transition: all 0.6s;border-radius: 8px;border: none;box-shadow: 2px 2px 6px #ccc}
button:hover {background-image: none;background-color: #eee}
button:focus {outline: none}
button:active {top: 2px;left: 1px}

@media screen and (max-width:540px){
	.container{flex-wrap:wrap;top:20vh;width:100vw;justify-content:center;}
	header a{width:40vw;height:40vw;}
}