* {box-sizing:border-box; padding:0; margin:0;}
img {max-width:100%; height:auto;}
h1 {font-size:26px; font-family:'Arial', verdana, sans-serif; margin-bottom:20px;}
.show-for-sr {position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; overflow:hidden !important; clip:rect(0, 0, 0, 0) !important; white-space:nowrap !important; border:0 !important;}

body {padding:120px 10vw; position:relative; height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; overflow:hidden;}
body::before, body::after {content:''; position:absolute; left:0; height:90px; width:100%; background-repeat:no-repeat;}
body::before {top:0; background-image:url(../img/bg_up.svg); background-position:left 30% bottom -100px;}
body::after {bottom:0; background-image:url(../img/bg_down.svg); background-position:left 30% top -80px;}

main {display:flex; flex-flow:row-reverse;}
main .img {position:relative; display:flex;}
main .img .blob {position:absolute; z-index:-1;	animation:blobbing 30s infinite linear; left:5%; top:25%;}
main .img .robot {}
main .img .plateau {display:flex; flex-direction:column; align-items:center;}
main .img .cloud {margin-bottom:25px; animation:levitate 10s infinite ease-in-out;}

main .content {padding-left:5vw; padding-top:10vh;}


/* Animations */
@keyframes blobbing {
	0% {transform:translate(-50%, -50%) rotate(0) scale(1);}
	25% {transform:translate(-50%, -50%) rotate(90deg) scale(1.05);}
	50% {transform:translate(-50%, -50%) rotate(180deg) scale(1);}
	75% {transform:translate(-50%, -50%) rotate(270deg) scale(1.05);}
	100% {transform:translate(-50%, -50%) rotate(360deg) scale(1);}
}

@keyframes levitate {
	0% {transform:translateY(0);}
	50% {transform:translateY(-10px);}
	100% {transform:translateY(0);}
}

/* Responsive */
@media only screen and (max-width:1200px) {
	h1 {font-size:24px;}
	main {flex-flow:column-reverse;}
	main .content {padding-left:0; padding-top:2.5vh; text-align:center;}
}
@media only screen and (max-width:800px) {
	h1 {font-size:20px;}
	main .img {position:fixed; width:430px; top:50%; left:50%; transform:translate(-50%, -50%) scale(1.5); opacity:0.1; z-index:-1;}
	main .content {padding:0;}
}