html { --brown: #522b13; --darkBrown: #4b2007; --cream: #f4d5a4; --darkCream: #e8b97f; --lightOrange: #e89d38; --darkLightOrange: #bf702d; --darkOrange: #c54620; --darkDarkOrange: #a53518; --engineYellow: #efb23d; --engineOrange: #e68431; --lightTrail: #f7e9b9; --darkTrail: #f3de8d; --starColour: #f4ae45; --cloudColour: #282521; --satelliteLight: #544c3f; --satelliteDark: #3e372c; --satelliteAccent: #2d2722; --satelliteLightAccent: #7c7160; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { min-height: 100vh; margin: 0; font-size: 62.5%; padding: 2em; background: #141414; position: relative; display: flex; flex-direction: column; justify-content: center; } .scene { background: #1c1611; overflow: hidden; position: relative; width: 80em; height: 60em; margin: auto; } .big-rocket-ting { height: 33em; width: 8em; background: linear-gradient(transparent 6.9em, var(--darkOrange) 7em); margin: 0 auto; position: relative; border-top-left-radius: 7em 9em; border-top-right-radius: 7em 9em; margin-top: 5em; z-index: 3; &::before, &::after { content: ''; display: block; position: absolute; left: 0; right: 0; } &::before { bottom: 0; top: 6.9em; background: linear-gradient(to right, var(--darkOrange) 50%, var(--darkDarkOrange) 50%); } &::after { background: linear-gradient(to right, #db8f58 50%, #c04e26 50%); height: 0.2em; z-index: 1; top: 7.4em; } &__nose { border-radius: 80% 0.2em 55% 50% / 55% 0.2em 80% 50%; transform: translateX(-50%) scaleY(1.2) rotate(-45deg); width: 110.5%; position: absolute; top: 2em; left: 50%; background: linear-gradient(-135deg, var(--brown) 2.4em, var(--darkOrange) 2.5em); &::before { content: ''; padding-bottom: 100%; display: block; } &::after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 80% 0.2em 55% 50% / 55% 0.2em 80% 50%; background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.19) 50%); } } } .space-shuttle { height: 26em; width: 6em; margin: 0 auto; position: absolute; bottom: -1em; left: 0; right: 0; z-index: 2; &::before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-top-left-radius: 2.8em 10em; border-top-right-radius: 2.8em 10em; background: linear-gradient(to right, var(--cream) 50%, var(--darkCream) 50%); z-index: 1; } &__bottom { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to right, var(--lightOrange) 50%, var(--darkLightOrange) 50%); height: 5.6em; z-index: 1; } &__engine { position: absolute; top: 100%; left: 0.5em; height: 1em; &::before { content: ''; display: block; height: 0; width: 1em; height: 0.4em; background: var(--engineOrange); } &::after { position: absolute; content: ''; display: block; height: 0; width: 1.2em; border-bottom: 0.6em solid var(--engineYellow); border-left: 0.1em solid transparent; border-right: 0.1em solid transparent; left: 50%; transform: translateX(-50%); } &--right { right: 0.5em; left: auto; } } &__tail { height: 8.5em; width: 0.8em; margin: 0 auto; position: relative; &::before { content: ''; position: absolute; top: 1.9em; /* 1.9 to fix small gap in FF */ left: 0; right: 0; bottom: 1.2em; background: linear-gradient(to right, var(--cream) 50%, var(--lightOrange) 50%); } &__top { position: relative; &::before, &::after { content: ''; display: block; width: 0; height: 0; border-style: solid; position: absolute; top: 0; } &::before { border-width: 0 0 2em 0.4em; border-color: transparent transparent var(--cream) transparent; left: 0; } &::after { border-width: 2em 0 0 0.4em; border-color: transparent transparent transparent var(--lightOrange); right: 0; } } &__bottom { position: absolute; bottom: 0; left: 0; right: 0; &::before, &::after { content: ''; display: block; width: 0; height: 0; border-style: solid; position: absolute; bottom: 0; } &::before { border-width: 0 0.4em 1.2em 0; border-color: transparent var(--cream) transparent transparent; left: 0; } &::after { border-width: 1.2em 0.4em 0 0; border-color: var(--lightOrange) transparent transparent transparent; right: 0; } } } &__wings { position: absolute; display: inline-flex; height: 19em; overflow: hidden; z-index: 0; left: 50%; transform: translateX(-50%); top: 6em; padding: 0 1em; color: var(--lightOrange); &__inner { filter: url(#goo); position: relative; } &__1 { width: 8em; height: 18em; background: currentColor; border-radius: 50%; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; } &__2 { width: 20em; height: 20em; background: currentColor; border-radius: 50%; margin-top: 9.5em; } &--2 { transform: translateX(-50%) scale(0.92) translateY(0.85em); color: #e66f2c; &::before, &::after { content: ''; display: block; width: 3.4em; height: 0.5em; background: #eed0a1; position: absolute; z-index: 1; bottom: 0.6em; } &::before { left: 0.9em; } &::after { right: 0.9em; } .space-shuttle__wings__1 { width: 7.5em; } } } &__line { position: absolute; left: 0; right: 0; background: linear-gradient(to right, #dfbe88 50%, #ca9d6b 50%); height: 0.1em; z-index: 1; &--1 { top: 8.5em; } &--2 { top: 15em; } } &__windows { position: absolute; top: 2em; left: 50%; z-index: 1; left: 0; right: 0; &::before, &::after { content: ''; display: block; width: 0.5em; height: 0.7em; position: absolute; top: 0.2em; z-index: 2; background: var(--darkBrown); } &::before { left: 1.5em; transform: rotate(-20deg); } &::after { right: 1.5em; transform: rotate(20deg); } &__middle { width: 2em; height: 1em; overflow: hidden; position: relative; margin: 0 auto; &::before { content: ''; display: block; width: 7em; height: 7em; border-radius: 50%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); border: 0.7em solid var(--darkBrown); } &__line { &::before, &::after { content: ''; display: block; width: 0.4em; height: 2em; position: absolute; top: 0; } &::before { background: var(--cream); transform: rotate(-20deg); left: 0; } &::after { background: var(--darkCream); transform: rotate(20deg); right: 0; } } } } } .side-booster { height: 30em; width: 3.4em; position: absolute; bottom: -3em; z-index: 1; display: flex; flex-direction: column-reverse; &::before, &::after { content: ''; display: block; position: absolute; bottom: 1.2em; left: 0; right: 0; } &::before { top: 3em; background: linear-gradient(to right, var(--cream) 50%, var(--darkCream) 50%); } &::after { height: 3em; background: linear-gradient(to right, var(--brown) 50%, var(--darkBrown) 50%); } &__nose { position: absolute; top: 1em; left: 50%; transform: translateX(-50%) scaleY(1.2) rotate(-45deg); width: 3.8em; border-radius: 80% 0.1em 55% 50% / 55% 0.1em 80% 50%; background: linear-gradient(135deg, var(--cream) 50%, #e8b97f 50%); &::before { content: ''; display: block; padding-bottom: 100%; } } &__stripe { background: linear-gradient(to right, var(--brown) 50%, var(--darkBrown) 50%); height: 0.8em; display: block; position: absolute; left: 0; right: 0; &--1 { top: 4.5em; } &--2 { top: 11.5em; } &--3 { top: 14em; } } &__engine { left: 0; right: 0; &::before { content: ''; display: block; height: 0; width: 2.6em; border-bottom: 0.5em solid var(--engineOrange); border-left: 0.2em solid transparent; border-right: 0.2em solid transparent; margin: 0 auto; } &::after { content: ''; display: block; height: 0; width: 3.8em; border-bottom: 0.7em solid var(--engineYellow); border-left: 0.3em solid transparent; border-right: 0.3em solid transparent; margin: 0 0 0 -0.2em; } } &__trail { position: absolute; top: 100%; left: 0; right: 0; background: var(--lightTrail); height: 5em; &::before { content: ''; display: block; position: absolute; top: 3em; border-style: solid; border-color: transparent transparent var(--lightTrail) transparent; } &::after { content: ''; display: block; position: absolute; top: 100%; width: 5em; height: 5em; background: var(--lightTrail); border-radius: 50%; margin-left: -0.8em; } } &__trail-dark { position: absolute; top: 100%; left: 0; right: 0; &::before { content: ''; display: block; position: absolute; top: 16em; // left: 0; background: var(--darkTrail); height: 7em; width: 7em; border-radius: 50%; } } &--left { right: 100%; .side-booster { &__trail { &::before { right: -2em; border-width: 0 2em 18em 17em; } &::after { box-shadow: // Above outline of trail 0 -1em 0 var(--lightTrail), // Left outline of trail -2em 1em 0 var(--lightTrail), -4em 4em 0 var(--lightTrail), -7em 5em 0 var(--lightTrail), -8em 8em 0 var(--lightTrail), -11em 9em 0 var(--lightTrail), -14em 11em 0 var(--lightTrail), -17em 12em 0 var(--lightTrail), // Right outline of trail 2em 3em 0 var(--lightTrail), 3em 6em 0 var(--lightTrail), 3.5em 8em 0 var(--lightTrail), 4em 11em 0 var(--lightTrail) } } &__trail-dark { &::before { left: 0; box-shadow: -5em 1em 0 var(--darkTrail), -8em 2em 0 var(--darkTrail); } } } } &--right { left: 100%; .side-booster { &__trail { &::before { left: -2em; border-width: 0 17em 18em 2em; } &::after { box-shadow: // Above outline of trail 0 -1em 0 var(--lightTrail), // Right outline of trail 2em 1em 0 var(--lightTrail), 4em 4em 0 var(--lightTrail), 7em 5em 0 var(--lightTrail), 8em 8em 0 var(--lightTrail), 11em 9em 0 var(--lightTrail), 14em 11em 0 var(--lightTrail), 17em 12em 0 var(--lightTrail), // Left outline of trail -2em 3em 0 var(--lightTrail), -3em 6em 0 var(--lightTrail), -3.5em 8em 0 var(--lightTrail), -4em 11em 0 var(--lightTrail) } } &__trail-dark { &::before { right: 2em; box-shadow: 4em 1em 0 var(--darkTrail), 4em -3em 0 var(--darkTrail), 8em 1em 0 var(--darkTrail), 12em 2em 0 var(--darkTrail); } } } } } .planet { background: red; border-radius: 50%; position: absolute; &__crater { --craterOpacity: 0.4; position: absolute; border-radius: 50%; background: rgba(0,0,0,var(--craterOpacity)); width: var(--dimensions); height: var(--dimensions); &--not-round { background: radial-gradient( circle at 90% 30%, rgba(0,0,0,0) calc(var(--dimensions) / 5), rgba(0,0,0,0.4) calc(var(--dimensions) / 5) ); } } &--1 { width: 9.4em; height: 9.4em; top: 3em; left: 3em; background: linear-gradient(to right, #626450 50%, #494a3c 50%); .planet__crater { &--1 { --dimensions: 1.6em; top: 1em; left: 2.4em; transform: rotate(165deg); } &--2 { --dimensions: 1.4em; top: 3.6em; left: 2.6em; } &--3 { --dimensions: 1.8em; top: 6.4em; left: 2.4em; } &--4 { --dimensions: 0.6em; top: 3.2em; left: 1em; } &--5 { --dimensions: 0.6em; top: 5.4em; left: 0.8em; } &--6 { --dimensions: 1em; top: 1em; right: 3em; } &--7 { --dimensions: 0.8em; top: 3em; right: 1em; } &--8 { --dimensions: 1.8em; top: 4em; right: 2em; transform: rotate(75deg); } &--9 { --dimensions: 0.8em; top: 7em; right: 2.4em; } } } &--2 { background: linear-gradient(to right, #8c7a62 50%, #736451 50%); height: 3.2em; width: 3.2em; top: 3em; left: 15.4em; .planet__crater { &--1 { --dimensions: 0.4em; top: 0.6em; left: 0.8em; } &--2 { --dimensions: 0.6em; top: 1.4em; left: 0.8em; } &--3 { --dimensions: 0.4em; top: 1.6em; left: 0.6em; } &--4 { --dimensions: 0.4em; top: 2.4em; left: 1em; } &--5 { --dimensions: 0.8em; top: 1em; left: 2em; } &--6 { --dimensions: 0.4em; top: 2em; left: 2em; } } } &--3 { background: linear-gradient(to right, #995823 50%, #804317 50%); height: 5em; width: 5em; top: 4em; right: 6em; .planet__crater { --craterOpacity: 0.2; &--1 { --dimensions: 1.2em; top: 2em; left: 0.8em; } &--2 { --dimensions: 0.6em; top: 1.8em; right: 0.8em; } &--3 { --dimensions: 0.8em; top: 3.2em; right: 1em; } } } &--4 { background: linear-gradient(to right, #433c31 50%, #332f2a 50%); width: 1.6em; height: 1.6em; right: 4em; top: 1.6em; } } .mountain { position: absolute; width: 18em; height: 12em; background: linear-gradient(to right, #69705b 50%, #5d6a5e 50%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); z-index: 1; &::before { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; height: 3em; background: linear-gradient(to right, #fff 50%, #ededed 50%); } &--1 { left: -1em; bottom: -3em; } &--2 { left: 7em; bottom: 0; } &--3 { right: 10em; bottom: 0; z-index: 1; } &--4 { right: -1em; bottom: -4em; } } .earth { height: 10em; position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; background: linear-gradient(to bottom, #b7bfaa 3.5em, #ced8c1 3.5em); } .space { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient( to bottom, #1b1510 20em, #27211a 20em, #27211a 36em, #3f3a2e 36em, ); &__line { width: var(--dimensions); height: var(--dimensions); border: 0.3em dotted #4a4743; border-radius: 50%; position: absolute; &--1 { --dimensions: 70em; bottom: -24em; left: -45em; } &--2 { --dimensions: 250em; top: 30em; right: -50em; } &--3 { --dimensions: 80em; top: 30em; right: -40em; } &--4 { --dimensions: 350em; top: -30em; left: -12em; } } } .sputnik { position: absolute; width: 4em; height: 4em; border-radius: 50%; left: 8em; top: 25.4em; background: linear-gradient(to right, var(--satelliteLight) 50%, var(--satelliteDark) 50%); &::before { content: ''; display: block; width: 0.6em; height: 0.6em; background: #d6c5a8; position: absolute; top: 0.6em; left: 0.8em; border-radius: 50%; } &__aerial { display: block; width: 8.8em; background: #514a40; height: 0.2em; position: absolute; box-shadow: 0 1px 0 rgba(0,0,0,0.3); &--1 { top: 50%; transform: translateY(-50%); right: 2em; } &--2 { top: 0; right: 2em; transform-origin: right center; transform: rotate(15deg); } &--3 { bottom: 0; right: 2em; transform-origin: right center; transform: rotate(-15deg); } } } .satellite { position: absolute; top: 20em; right: 1.6em; display: flex; align-items: center; &__middle { width: 6.4em; height: 6.4em; border-radius: 50%; background: linear-gradient(to right, var(--satelliteLight) 50%, var(--satelliteDark) 50%); box-shadow: 0 0.3em 0 var(--satelliteLightAccent); margin: 0 1em; position: relative; &::before { content: ''; display: block; width: 4.6em; height: 4.6em; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0.7em solid var(--satelliteAccent); } &::after { content: ''; display: block; width: 0.4em; height: 1em; background: var(--satelliteLight); margin: 0 auto; position: absolute; top: 100%; left: 0; right: 0; } &__panel-connector { display: block; position: relative; &::before, &::after { content: ''; display: block; height: 0.4em; width: 1.4em; background: var(--satelliteLight); transform-origin: right center; position: absolute; right: 0; top: 0; } &::before { transform: rotate(-40deg); } &::after { transform: rotate(40deg); } &--1 { position: absolute; top: 50%; right: 100%; transform: translateY(-50%); } &--2 { position: absolute; top: 50%; left: 100%; transform: translateY(-50%) scaleX(-1); } } } &__panels { height: 3.6em; width: 6.6em; background: #564e41; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr 1em; position: relative; box-shadow: 0 0.3em 0 var(--satelliteLightAccent); z-index: 1; &::before, &::after { content: ''; display: block; background: var(--satelliteAccent); position: absolute; } &::before { height: 0.2em; width: 100%; bottom: 0.9em; box-shadow: 0 -1.3em 0 var(--satelliteAccent); } &::after { width: 0.2em; height: 100%; left: 2.1em; box-shadow: 2.2em 0 0 var(--satelliteAccent); } &--1 { .satellite__panel { &--1 { grid-column: 3; } &--2 { grid-column: 2; } } } &--2 { .satellite__panel { &--1 { grid-column: 2; } &--2 { grid-column: 2; } &--3 { grid-column: 3; } &--4 { grid-column: 1; } } } } &__panel { background: var(--satelliteDark); } &__dish { width: 2.4em; height: 2.4em; border-radius: 50%; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: var(--satelliteLightAccent); margin-top: 1em; box-shadow: 0 -0.1em 0 #a59780; &::after { content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; width: 0.5em; height: 0.5em; background: var(--satelliteAccent); } &__line { display: block; width: 0.2em; height: 1em; background: var(--satelliteAccent); position: absolute; left: 0; right: 0; margin: 0 auto; &--1 { top: 50%; transform: translateY(-100%); } &--2 { top: 50%; transform-origin: top center; transform: rotate(45deg); } &--3 { top: 50%; transform-origin: top center; transform: rotate(-45deg); } } } } .star { position: absolute; clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); width: 1.4em; height: 1.4em; background: var(--starColour); &--1 { left: 4em; top: 14em; } &--2 { left: 12em; top: 18em; } &--3 { left: 18em; top: 11em; } &--4 { left: 26em; top: 13em; } &--5 { top: 4em; left: 22em; } &--6 { top: 6em; left: 32em; } &--7 { top: 2em; left: 55em; } &--8 { top: 4em; left: 62em; } &--9 { top: 12em; left: 66em; } &--10 { left: 58em; top: 14em; } &--11 { top: 28em; left: 60em; } &--12 { left: 44em; top: 0.5em; } } .star-group { position: absolute; top: 0; left: 0; bottom: 0; right: 0; filter: drop-shadow(10em -4em var(--starColour)) drop-shadow(10em 0em var(--starColour)) drop-shadow(40em 0em var(--starColour)) drop-shadow(10em 10em var(--starColour)) drop-shadow(-30em 0 var(--starColour)) drop-shadow(0em -30em var(--starColour)); &::before, &::after { content: ''; display: block; border-radius: 50%; background: var(--starColour); width: 0.4em; height: 0.4em; position: absolute; } &::before { top: 16em; left: 20em; } &::after { top: 10em; left: 16em; } } .cloud { position: absolute; width: 10em; height: 10em; background: var(--cloudColour); bottom: 10em; border-radius: 50%; &::before{ content: ''; background: var(--cloudColour); border-radius: 50%; display: block; width: 5em; height: 5em; position: absolute; } &--1 { left: 2em; bottom: 9em; box-shadow: -8em -3em 0 var(--cloudColour), -8em 3em 0 var(--cloudColour), 8em 2em 0 var(--cloudColour); &::before { left: 17em; bottom: -1em; } } &--2 { right: -7em; bottom: 18em; box-shadow: -7em 6em 0 var(--cloudColour), -19em 11em 0 var(--cloudColour), // filling in gaps -4em 9em 0 var(--cloudColour), -12em 12em 0 var(--cloudColour); &::before { width: 8em; height: 8em; right: 15em; bottom: -4em; box-shadow: -12em 9em 0 var(--cloudColour); } } }

!