.svg-wrapper {
	position: relative;
	font-size: calc(500px / 800);
}
.svg-wrapper svg {
	display: block;
}
.space {
	position: absolute;
	top: 229.5em; left: 228em;
	height: 345em; width: 201em; 
	transform: translate(-50%, -50%) rotate(6.5deg);
    border-radius: 50%;
    background:
     radial-gradient(ellipse 40% 36%, rgba(34, 99, 163, 0.2), rgba(17, 74, 131, 0.39) 35%, rgba(5, 55, 106, 0.77) 77%, rgba(0, 46, 93, 0.66)),
     linear-gradient(87deg, #2263a3, #003061);
    overflow: hidden;
}
.space svg, #gift {
	position: absolute;
}
.space>span {
	position: absolute;
	width: 3em;
	height: 3em;
	margin: -1.5em;
	background: radial-gradient(closest-side, #FFFDF3, #cef 40%, rgba(200,228,255,.5) 41%, rgba(255,255,255,0));
	border-radius: 55%;
}
#planets {
	width: 100%; height: 100%;
	animation: rotation 10s linear infinite;
}
#planet1 {
	left: 127em; top: 42em;
	animation: rotation 10s linear infinite reverse, shake 9s ease-in-out alternate infinite;
}
#planet2 {
	left: 64em; top: 225em;
	animation: rotation 10s linear infinite reverse, shake 11s ease-in-out alternate infinite;
}
#planet3 {
	left: -20em; top: 96em;
	animation: rotation 10s linear infinite reverse, shake 7s ease-in-out alternate infinite;
}
#gift{
	left:185em; top: 185em;
	animation: g-vert 14s infinite;
}
#gift>*{
	animation: g-hor 7s infinite alternate ease-in-out;
	filter: drop-shadow(0 0 15em rgba(34, 99, 163, 0.2));
}
#gift>*>*{
	animation: swing 1.9s infinite alternate ease-in-out, shake 2.7s ease-in-out alternate infinite;
}

@keyframes rotation {
	from {transform: rotateZ(0);}
	to {transform: rotateZ(1turn);}
}
@keyframes shake {
	from {transform-origin: 30% 50%;}
	to {transform-origin: 70% 50%;}
}
@keyframes g-hor {
	to {
		transform: translate(170em, 22em) scale(1.1);
		filter: drop-shadow(0 0 15em rgba(5, 55, 106, .9));
	}
}
@keyframes g-vert {
	0% {transform: none; animation-timing-function: ease-out;}
	30% {transform: translate(3em, -24em); animation-timing-function: ease-in-out;}
	70% {transform: translate(-3em, 24em); animation-timing-function: ease-in;}
	100% {transform: none}
}
@keyframes swing {
	from {transform: rotate(-7deg);}
	to {transform: rotate(0deg);}
}
.picture{
	position: relative;
}
.portal{
	position: absolute;
	left: 1px;
}
.vector{
	position: relative;
	z-index: 2;
}
.vector img{
	width: 524px;
}
.svg {
	width: 800px;
	height: 600px;
}
@media screen and (max-width: 640px) {
	.svg-wrapper {
		position: relative;
		font-size: calc(400px / 800);
	}
	.vector img {
    	width: 424px;
	}
}
@media screen and (max-width: 420px) {
	.svg-wrapper {
		font-size: calc(300px / 800);
	}
	.vector img {
    	width: 314px;
	}
}