.center {
  height: 500px;
  position: relative;
}

.centert {
font-family: 'Roboto', sans-serif;
  font-size: 96px;
  margin: 0;
  position: absolute;
  top: 100%;
  left: 50%;
  text-align:center;
  transform: translate(-50%, -50%);
}

.c {
margin-top: auto;
}

.centerr {
font-family: 'Roboto', sans-serif;
  font-size: 96px;
  color: #fff;
  margin: 0;
  position: relative;
  text-align:center;
}

.door {
	width: 22em;
	height: 25em;
	background-image: url("closed.jpg");
	background-repeat: no-repeat;
	background-clip: border-box;
	display: block;
	margin-top: 10em;
	margin-left: auto;
	margin-right: auto;
	border-radius: 1em;
}
.door:hover {
	background-image: url("open.jpg");
}

body {
	width: 100wh;
	height: 80vh;
	color: #0a309f;
	/* background: linear-gradient(-45deg, #000, #ff0000, #ffed00, #0343d4)*/ 
	background: linear-gradient(#0a309f 9%, #d59780 10%, #5a7edc 11%, #5a7edc 89%,#d59780 90%, #0a309f 91%);
	background-position: 50% 50%;
	animation: Gradient 5s ease infinite;
}

@keyframes Gradient {
	0% {
		background-size: 100% 102%;
	}
	50% {
		background-size: 100% 100%;
	}
	100% {
		background-size: 100% 102%;
	}
}

@media only screen and (max-width: 1200px) {
.door {
	margin-top: 20em;
}

body {
        width: 100wh;
        height: 80vh;
        /* background: linear-gradient(-45deg, #000, #ff0000, #ffed00, #0343d4)*/
        background: linear-gradient(#0a309f 9%, #d59780 10%, #5a7edc 11%, #5a7edc 89%,#d59780 90%, #0a309f 91%);
	background-position: 50% 50%;
        animation: Gradient 5s ease infinite;
}

@keyframes Gradient {
        0% {
                background-size: 100% 102%;
        }
        50% {
                background-size: 100% 100%;
        }
        100% {
                background-size: 100% 102%;
        }
}

}