@import url("https://fonts.googleapis.com/css?family=Major+Mono+Display");:root{--mercury-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/mercury2.jpg);--mercury-tilt:rotate(0.034deg);--mercury-day:1407.6;--mercury-color:#999;--venus-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/venus2.jpg);--venus-tilt:rotate(177.3deg);--venus-day:5832.5;--venus-color:#e8cda2;--earth-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/earth.jpg);--earth-tilt:rotate(23.26deg);--earth-day:23.9;--earth-color:#b3caff;--mars-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/mars.jpg);--mars-tilt:rotate(25.2deg);--mars-day:24.6;--mars-color:#c07158;--jupiter-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/jupiter.jpg);--jupiter-tilt:rotate(3.1deg);--jupiter-day:9.9;--jupiter-color:#c9b5a4;--saturn-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/saturn.jpg);--saturn-tilt:rotate(26.7deg);--saturn-day:10.7;--saturn-color:#f0e2c4;--uranus-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/uranus2.jpg);--uranus-tilt:rotate(97.8deg);--uranus-day:17.2;--uranus-color:#b8d8e1;--neptune-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/neptune.jpg);--neptune-tilt:rotate(28.3deg);--neptune-day:16.1;--neptune-color:#5e73bb;--pluto-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/pluto.jpg);--pluto-tilt:rotate(122.5deg);--pluto-day:153.3;--pluto-color:#c3b6aa;--sun-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/sun.jpg);--sun-tilt:rotate(0deg);--sun-day:600;--sun-color:#cc9f4c}@keyframes planetRotate{0%{background-position:0}to{background-position:-200%}}body{background:#000;font-family:Major Mono Display,sans-serif;height:100%;width:100vw;display:block;overflow-x:hidden;text-transform:lowercase}a,body{color:#fff}footer,header{text-align:center}footer{font-size:60%;margin-top:40px}main{width:100vw;display:grid;grid-template-columns:repeat(auto-fill,190px);grid-template-rows:repeat(auto-fill,400px);grid-gap:40px;justify-items:center;justify-content:center;overflow-x:hidden;text-transform:lowercase}.card,main{align-items:center}.card{display:flex;flex-direction:column;position:relative}.card--mercury .planet__atmosphere{box-shadow:inset 10px 0 12px -2px hsla(0,0%,100%,.2),inset -70px 0 50px 0 #000,-5px 0 10px -4px var(--mercury-color)}.card--mercury .planet__surface{background-image:var(--mercury-image);transform:var(--mercury-tilt) scale(1.2);animation:planetRotate calc(var(--mercury-day)*0.1s) linear infinite}.card--mercury .card__planet:before{transform:var(--mercury-tilt) scale(1.2);border-color:var(--mercury-color);color:var(--mercury-color)}.card--mercury .tilt__icon{transform:var(--mercury-tilt);color:var(--mercury-color)}.card--venus .planet__atmosphere{box-shadow:inset 10px 0 12px -2px hsla(0,0%,100%,.2),inset -70px 0 50px 0 #000,-5px 0 10px -4px var(--venus-color)}.card--venus .planet__surface{background-image:var(--venus-image);transform:var(--venus-tilt) scale(1.2);animation:planetRotate calc(var(--venus-day)*0.1s) linear infinite}.card--venus .card__planet:before{transform:var(--venus-tilt) scale(1.2);border-color:var(--venus-color);color:var(--venus-color)}.card--venus .tilt__icon{transform:var(--venus-tilt);color:var(--venus-color)}.card--earth .planet__atmosphere{box-shadow:inset 10px 0 12px -2px hsla(0,0%,100%,.2),inset -70px 0 50px 0 #000,-5px 0 10px -4px var(--earth-color)}.card--earth .planet__surface{background-image:var(--earth-image);transform:var(--earth-tilt) scale(1.2);animation:planetRotate calc(var(--earth-day)*0.1s) linear infinite}.card--earth .card__planet:before{transform:var(--earth-tilt) scale(1.2);border-color:var(--earth-color);color:var(--earth-color)}.card--earth .tilt__icon{transform:var(--earth-tilt);color:var(--earth-color)}.card--mars .planet__atmosphere{box-shadow:inset 10px 0 12px -2px hsla(0,0%,100%,.2),inset -70px 0 50px 0 #000,-5px 0 10px -4px var(--mars-color)}.card--mars .planet__surface{background-image:var(--mars-image);transform:var(--mars-tilt) scale(1.2);animation:planetRotate calc(var(--mars-day)*0.1s) linear infinite}.card--mars .card__planet:before{transform:var(--mars-tilt) scale(1.2);border-color:var(--mars-color);color:var(--mars-color)}.card--mars .tilt__icon{transform:var(--mars-tilt);color:var(--mars-color)}.card--jupiter .planet__atmosphere{box-shadow:inset 10px 0 12px -2px hsla(0,0%,100%,.2),inset -70px 0 50px 0 #000,-5px 0 10px -4px var(--jupiter-color)}.card--jupiter .planet__surface{background-image:var(--jupiter-image);transform:var(--jupiter-tilt) scale(1.2);animation:planetRotate calc(var(--jupiter-day)*0.1s) linear infinite}.card--jupiter .card__planet:before{transform:var(--jupiter-tilt) scale(1.2);border-color:var(--jupiter-color);color:var(--jupiter-color)}.card--jupiter .tilt__icon{transform:var(--jupiter-tilt);color:var(--jupiter-color)}.card--saturn .planet__atmosphere{box-shadow:inset 10px 0 12px -2px hsla(0,0%,100%,.2),inset -70px 0 50px 0 #000,-5px 0 10px -4px var(--saturn-color)}.card--saturn .planet__surface{background-image:var(--saturn-image);transform:var(--saturn-tilt) scale(1.2);animation:planetRotate calc(var(--saturn-day)*0.1s) linear infinite}.card--saturn .card__planet:before{transform:var(--saturn-tilt) scale(1.2);border-color:var(--saturn-color);color:var(--saturn-color)}.card--saturn .tilt__icon{transform:var(--saturn-tilt);color:var(--saturn-color)}.card--uranus .planet__atmosphere{box-shadow:inset 10px 0 12px -2px hsla(0,0%,100%,.2),inset -70px 0 50px 0 #000,-5px 0 10px -4px var(--uranus-color)}.card--uranus .planet__surface{background-image:var(--uranus-image);transform:var(--uranus-tilt) scale(1.2);animation:planetRotate calc(var(--uranus-day)*0.1s) linear infinite}.card--uranus .card__planet:before{transform:var(--uranus-tilt) scale(1.2);border-color:var(--uranus-color);color:var(--uranus-color)}.card--uranus .tilt__icon{transform:var(--uranus-tilt);color:var(--uranus-color)}.card--neptune .planet__atmosphere{box-shadow:inset 10px 0 12px -2px hsla(0,0%,100%,.2),inset -70px 0 50px 0 #000,-5px 0 10px -4px var(--neptune-color)}.card--neptune .planet__surface{background-image:var(--neptune-image);transform:var(--neptune-tilt) scale(1.2);animation:planetRotate calc(var(--neptune-day)*0.1s) linear infinite}.card--neptune .card__planet:before{transform:var(--neptune-tilt) scale(1.2);border-color:var(--neptune-color);color:var(--neptune-color)}.card--neptune .tilt__icon{transform:var(--neptune-tilt);color:var(--neptune-color)}.card--pluto .planet__atmosphere{box-shadow:inset 10px 0 12px -2px hsla(0,0%,100%,.2),inset -70px 0 50px 0 #000,-5px 0 10px -4px var(--pluto-color)}.card--pluto .planet__surface{background-image:var(--pluto-image);transform:var(--pluto-tilt) scale(1.2);animation:planetRotate calc(var(--pluto-day)*0.1s) linear infinite}.card--pluto .card__planet:before{transform:var(--pluto-tilt) scale(1.2);border-color:var(--pluto-color);color:var(--pluto-color)}.card--pluto .tilt__icon{transform:var(--pluto-tilt);color:var(--pluto-color)}.card--sun .planet__atmosphere{box-shadow:inset 10px 0 12px -2px hsla(0,0%,100%,.2),inset -70px 0 50px 0 #000,-5px 0 10px -4px var(--sun-color)}.card--sun .planet__surface{background-image:var(--sun-image);transform:var(--sun-tilt) scale(1.2);animation:planetRotate calc(var(--sun-day)*0.1s) linear infinite}.card--sun .card__planet:before{transform:var(--sun-tilt) scale(1.2);border-color:var(--sun-color);color:var(--sun-color)}.card--sun .tilt__icon{transform:var(--sun-tilt);color:var(--sun-color)}.card__planet:before{content:"";position:absolute;height:190px;z-index:-2;left:50%;top:0;border-left:1px dashed hsla(0,0%,100%,.25)}.planet__atmosphere{height:190px;width:190px;position:relative;background:radial-gradient(circle at 30% 50%,hsla(0,0%,100%,.3) 0,hsla(0,0%,100%,0) 65%);border-radius:100px;overflow:hidden}.planet__surface{position:absolute;height:100%;width:100%;z-index:-1;background-size:cover}.card--sun .planet__atmosphere{box-shadow:0 0 10px 0 var(--sun-color),0 0 1000px -2px var(--sun-color)}.card__info{width:100%}.info__title{text-align:center;font-size:28px}.info__form{display:flex;flex-direction:column;justify-content:space-between}.info__item{display:flex;align-items:flex-end;margin-bottom:5px;font-size:14px}.info__item .tilt__icon{margin:0 5px}.info__label{font-size:11px}.info__line{flex:1;margin:0 5px;border-bottom:1px dashed hsla(0,0%,100%,.3)}
/*# sourceMappingURL=style.d0017c9f.css.map */