You are on page 1of 47

@font-face {

font-family: 'Open Sans';


src: url('../client/fonts/open_sans/Regular/OpenSans-Regular.eot');
src: url('../client/fonts/open_sans/Regular/OpenSans-Regular.eot?#iefix')
format('embedded-opentype'),
url('../client/fonts/open_sans/Regular/OpenSans-Regular.woff') format('woff'),
url('../client/fonts/open_sans/Regular/OpenSans-Regular.ttf')
format('truetype'),
url('../client/fonts/open_sans/Regular/OpenSans-Regular.svg#FontName')
format('svg');
font-style: normal;
font-weight: normal;
}

* {
box-sizing: border-box;
}

body, div, p, ul {
margin: 0;
padding: 0;
}

/*****************/

a {
text-decoration: none;
color: #fff;
}

.page-404 {
width: 100vw;
height: 100vh;
overflow: hidden;
font-size: 12px;
background: url(../images/404/background.jpg) center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Open Sans', Arial;
letter-spacing: 0.2px;
color: #fff;
position: relative;
}

.header .nav {
padding: 13px 20px 0 20px;
}

.header .nav .logo {


display: inline-block;
min-width: 205px;
position: relative;
float: left;
}

.header .nav .header-social {


display: inline-block;
float: right;
}

.header .nav .header-social p {


color: #fefeff;
font-family: "Open Sans", Arial;
font-size: 20px;
font-weight: 300;
line-height: 24px;
}

.header .nav .logo a:last-child {


position: absolute;
right: 0;
margin-top: 5px;
}

.header-social {
position: relative;
min-width: 185px;
}

.header-social span:first-child {
position: absolute;
left: 0;
top: 50%;
}

.header-social span:first-child a {
color: #fefeff;
font-family: "Open Sans", Arial;
font-size: 20px;
font-weight: 300;
line-height: 24px;
}

.header-social span a {
transition: 300ms ease-in-out all;
}

.header-social span:last-child {
position: absolute;
right: 0;
}

.header-social span:last-child a {
display: inline-block;
width: 24px;
height: 24px;
text-align: center;
padding: 3px 0 0;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
}

.header-social .facebook {
background: url(../images/404/facebook.png) no-repeat top center;
}
.header-social .facebook:hover {
background: url(../images/404/facebook.png) no-repeat 0 -29px;
}

.header-social .linkedin {
background: url(../images/404/linkedin.png) no-repeat top center;
}

.header-social .linkedin:hover {
background: url(../images/404/linkedin.png) no-repeat 0 -29px;
}

.footer {
position: absolute;
bottom: 0;
min-height: 55px;
background-color: #fff;
width: 100%;
padding: 10px 22px 10px 12px;
z-index: 3;
}

.footer-logo img {
display: inline-block;
width: 150px;
padding-right: 10px;
border-right: 1px solid #a7a9ac;
}

.footer-left > div {


float: left;
}

.footer-left ul {
margin: 12px 7px 0 10px;
}

.footer-left ul li {
display: inline-block;
vertical-align: top;
line-height: 0;
}

.footer-left ul li a {
display: inline-block;
padding-right: 7px;
line-height: 0;
position: relative;
}

.footer-left ul li a:after {
content: '';
width: 2px;
height: 2px;
position: absolute;
right: 0;
top: 50%;
margin-top: -1px;
background-color: #bcbec0;
}

.footer-left ul li:last-child a:after {


display: none;
}

.footer-right {
float: right;
}

.footer-right p {
padding-right: 54px;
color: #2b303b;
font-size: 14px;
font-weight: 400;
text-align: right;
position: relative;
}

.footer-right p:after {
content: '';
width: 38px;
height: 38px;
position: absolute;
right: 0;
top: 0;
background: url(../images/404/ayn.png) no-repeat center;
}

.footer-right p span {
display: block;
color: #a3a4a9;
font-size: 10px;
font-weight: 300;
}

@media (max-width: 900px) {


.circle--inner {
height: 200px;
}
.four {
font-size: 200px;
}
.four--0 {
top: 0;
left: 170px;
z-index: 3;
}
.four--2 {
top: 0;
left: 320px;
z-index: 3;
}
.page-not-found {
bottom: 125px;
}
.sorry {
bottom: 85px;
}
.button.btn-back {
bottom: -30px;
}
}

@media (max-width: 820px) {


.sorry {
bottom: 30px;
font-size: 17px!important;
}
}

@media (max-height: 760px) {


.astronaut {
top: -210px!important;
left: -100px!important;
}
.astronaut img {
max-height: 450px!important;
}
}

@media (max-height: 635px) {


.center {
min-height: 300px!important;
}
.four {
left: 40px!important;
font-size: 200px!important;
line-height: 200px!important;
}
.page-not-found {
font-size: 25px!important;
}
.sorry {
font-size: 15px!important;
}
.button.btn-back {
font-size: 15px!important;
}
.astronaut {
top: -200px!important;
left: -95px!important;
}
.astronaut img {
max-height: 490px!important;
}
.four--0 {
top: 0!important;
left: 180px!important;
z-index: 3;
}
.four--2 {
top: 0!important;
left: 315px!important;
z-index: 3;
}
.page-not-found {
bottom: 110px!important;
}
.sorry {
bottom: 80px!important;
}
.button.btn-back {
bottom: 20px!important;
line-height: 15px!important;
}
}

@media (max-width: 768px) {


.footer-right {
float: none;
clear: both;
}
.header-social {
min-width: 145px;
}
.header-social span:first-child a {
font-size: 15px;
}
.page-not-found {
font-size: 25px;
}
.sorry {
font-size: 15px;
}
.button.btn-back {
font-size: 15px;
}
.astronaut {
top: -200px;
left: -95px;
}
.astronaut img {
max-height: 490px;
}
}

@media (max-width: 440px) {


.header .nav .logo {
min-width: 100px;
}
.header .nav .logo a:last-child {
display: none;
}
.four {
font-size: 200px;
}
.page-not-found {
bottom: 135px;
}
}

/**************/

.center {
position: relative;
top: 50%;
left: 50%;
min-height: 400px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: -webkit-transform 0.5s;
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
z-index: 1;
}
@media screen and (max-height: 600px) {
.center {
-webkit-transform: translate(-50%, -50%) scale(0.75);
transform: translate(-50%, -50%) scale(0.75);
}
}
@media screen and (max-width: 400px) {
.center {
-webkit-transform: translate(-50%, -50%) scale(0.6);
transform: translate(-50%, -50%) scale(0.6);
}
}
.star {
position: absolute;
z-index: 1;
}
.star:nth-child(1) {
top: 46vh;
left: 73vw;
}
.star:nth-child(1):before,
.star:nth-child(1):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.star:nth-child(1):before {
top: 2px;
left: -2px;
width: 12px;
height: 4px;
}
.star:nth-child(1):after {
top: -2px;
left: 2px;
width: 4px;
height: 12px;
}
.star:nth-child(2) {
top: 75vh;
left: 85vw;
}
.star:nth-child(2):before,
.star:nth-child(2):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -2s;
animation-delay: -2s;
}
.star:nth-child(2):before {
top: 0.5px;
left: -0.5px;
width: 3px;
height: 1px;
}
.star:nth-child(2):after {
top: -0.5px;
left: 0.5px;
width: 1px;
height: 3px;
}
.star:nth-child(3) {
top: 70vh;
left: 29vw;
}
.star:nth-child(3):before,
.star:nth-child(3):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -3s;
animation-delay: -3s;
}
.star:nth-child(3):before {
top: 1px;
left: -1px;
width: 6px;
height: 2px;
}
.star:nth-child(3):after {
top: -1px;
left: 1px;
width: 2px;
height: 6px;
}
.star:nth-child(4) {
top: 86vh;
left: 79vw;
}
.star:nth-child(4):before,
.star:nth-child(4):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -4s;
animation-delay: -4s;
}
.star:nth-child(4):before {
top: 2px;
left: -2px;
width: 12px;
height: 4px;
}
.star:nth-child(4):after {
top: -2px;
left: 2px;
width: 4px;
height: 12px;
}
.star:nth-child(5) {
top: 50vh;
left: 9vw;
}
.star:nth-child(5):before,
.star:nth-child(5):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -5s;
animation-delay: -5s;
}
.star:nth-child(5):before {
top: 0.5px;
left: -0.5px;
width: 3px;
height: 1px;
}
.star:nth-child(5):after {
top: -0.5px;
left: 0.5px;
width: 1px;
height: 3px;
}
.star:nth-child(6) {
top: 10vh;
left: 8vw;
}
.star:nth-child(6):before,
.star:nth-child(6):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -6s;
animation-delay: -6s;
}
.star:nth-child(6):before {
top: 0.5px;
left: -0.5px;
width: 3px;
height: 1px;
}
.star:nth-child(6):after {
top: -0.5px;
left: 0.5px;
width: 1px;
height: 3px;
}
.star:nth-child(7) {
top: 22vh;
left: 9vw;
}
.star:nth-child(7):before,
.star:nth-child(7):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -7s;
animation-delay: -7s;
}
.star:nth-child(7):before {
top: 1px;
left: -1px;
width: 6px;
height: 2px;
}
.star:nth-child(7):after {
top: -1px;
left: 1px;
width: 2px;
height: 6px;
}
.star:nth-child(8) {
top: 17vh;
left: 49vw;
}
.star:nth-child(8):before,
.star:nth-child(8):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -8s;
animation-delay: -8s;
}
.star:nth-child(8):before {
top: 2px;
left: -2px;
width: 12px;
height: 4px;
}
.star:nth-child(8):after {
top: -2px;
left: 2px;
width: 4px;
height: 12px;
}
.star:nth-child(9) {
top: 42vh;
left: 26vw;
}
.star:nth-child(9):before,
.star:nth-child(9):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -9s;
animation-delay: -9s;
}
.star:nth-child(9):before {
top: 2px;
left: -2px;
width: 12px;
height: 4px;
}
.star:nth-child(9):after {
top: -2px;
left: 2px;
width: 4px;
height: 12px;
}
.star:nth-child(10) {
top: 93vh;
left: 97vw;
}
.star:nth-child(10):before,
.star:nth-child(10):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -10s;
animation-delay: -10s;
}
.star:nth-child(10):before {
top: 1.5px;
left: -1.5px;
width: 9px;
height: 3px;
}
.star:nth-child(10):after {
top: -1.5px;
left: 1.5px;
width: 3px;
height: 9px;
}
.star:nth-child(11) {
top: 98vh;
left: 87vw;
}
.star:nth-child(11):before,
.star:nth-child(11):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -11s;
animation-delay: -11s;
}
.star:nth-child(11):before {
top: 1px;
left: -1px;
width: 6px;
height: 2px;
}
.star:nth-child(11):after {
top: -1px;
left: 1px;
width: 2px;
height: 6px;
}
.star:nth-child(12) {
top: 43vh;
left: 40vw;
}
.star:nth-child(12):before,
.star:nth-child(12):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -12s;
animation-delay: -12s;
}
.star:nth-child(12):before {
top: 1.5px;
left: -1.5px;
width: 9px;
height: 3px;
}
.star:nth-child(12):after {
top: -1.5px;
left: 1.5px;
width: 3px;
height: 9px;
}
.star:nth-child(13) {
top: 6vh;
left: 68vw;
}
.star:nth-child(13):before,
.star:nth-child(13):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -13s;
animation-delay: -13s;
}
.star:nth-child(13):before {
top: 0.5px;
left: -0.5px;
width: 3px;
height: 1px;
}
.star:nth-child(13):after {
top: -0.5px;
left: 0.5px;
width: 1px;
height: 3px;
}
.star:nth-child(14) {
top: 67vh;
left: 58vw;
}
.star:nth-child(14):before,
.star:nth-child(14):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -14s;
animation-delay: -14s;
}
.star:nth-child(14):before {
top: 1.5px;
left: -1.5px;
width: 9px;
height: 3px;
}
.star:nth-child(14):after {
top: -1.5px;
left: 1.5px;
width: 3px;
height: 9px;
}
.star:nth-child(15) {
top: 23vh;
left: 44vw;
}
.star:nth-child(15):before,
.star:nth-child(15):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -15s;
animation-delay: -15s;
}
.star:nth-child(15):before {
top: 0.5px;
left: -0.5px;
width: 3px;
height: 1px;
}
.star:nth-child(15):after {
top: -0.5px;
left: 0.5px;
width: 1px;
height: 3px;
}
.star:nth-child(16) {
top: 5vh;
left: 40vw;
}
.star:nth-child(16):before,
.star:nth-child(16):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -16s;
animation-delay: -16s;
}
.star:nth-child(16):before {
top: 0.5px;
left: -0.5px;
width: 3px;
height: 1px;
}
.star:nth-child(16):after {
top: -0.5px;
left: 0.5px;
width: 1px;
height: 3px;
}
.star:nth-child(17) {
top: 69vh;
left: 60vw;
}
.star:nth-child(17):before,
.star:nth-child(17):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -17s;
animation-delay: -17s;
}
.star:nth-child(17):before {
top: 1.5px;
left: -1.5px;
width: 9px;
height: 3px;
}
.star:nth-child(17):after {
top: -1.5px;
left: 1.5px;
width: 3px;
height: 9px;
}
.star:nth-child(18) {
top: 37vh;
left: 28vw;
}
.star:nth-child(18):before,
.star:nth-child(18):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -18s;
animation-delay: -18s;
}
.star:nth-child(18):before {
top: 1.5px;
left: -1.5px;
width: 9px;
height: 3px;
}
.star:nth-child(18):after {
top: -1.5px;
left: 1.5px;
width: 3px;
height: 9px;
}
.star:nth-child(19) {
top: 78vh;
left: 28vw;
}
.star:nth-child(19):before,
.star:nth-child(19):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -19s;
animation-delay: -19s;
}
.star:nth-child(19):before {
top: 0.5px;
left: -0.5px;
width: 3px;
height: 1px;
}
.star:nth-child(19):after {
top: -0.5px;
left: 0.5px;
width: 1px;
height: 3px;
}
.star:nth-child(20) {
top: 54vh;
left: 78vw;
}
.star:nth-child(20):before,
.star:nth-child(20):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -20s;
animation-delay: -20s;
}
.star:nth-child(20):before {
top: 1.5px;
left: -1.5px;
width: 9px;
height: 3px;
}
.star:nth-child(20):after {
top: -1.5px;
left: 1.5px;
width: 3px;
height: 9px;
}
.star:nth-child(21) {
top: 31vh;
left: 13vw;
}
.star:nth-child(21):before,
.star:nth-child(21):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -21s;
animation-delay: -21s;
}
.star:nth-child(21):before {
top: 0.5px;
left: -0.5px;
width: 3px;
height: 1px;
}
.star:nth-child(21):after {
top: -0.5px;
left: 0.5px;
width: 1px;
height: 3px;
}
.star:nth-child(22) {
top: 30vh;
left: 80vw;
}
.star:nth-child(22):before,
.star:nth-child(22):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -22s;
animation-delay: -22s;
}
.star:nth-child(22):before {
top: 0.5px;
left: -0.5px;
width: 3px;
height: 1px;
}
.star:nth-child(22):after {
top: -0.5px;
left: 0.5px;
width: 1px;
height: 3px;
}
.star:nth-child(23) {
top: 87vh;
left: 62vw;
}
.star:nth-child(23):before,
.star:nth-child(23):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -23s;
animation-delay: -23s;
}
.star:nth-child(23):before {
top: 1px;
left: -1px;
width: 6px;
height: 2px;
}
.star:nth-child(23):after {
top: -1px;
left: 1px;
width: 2px;
height: 6px;
}
.star:nth-child(24) {
top: 25vh;
left: 53vw;
}
.star:nth-child(24):before,
.star:nth-child(24):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -24s;
animation-delay: -24s;
}
.star:nth-child(24):before {
top: 2px;
left: -2px;
width: 12px;
height: 4px;
}
.star:nth-child(24):after {
top: -2px;
left: 2px;
width: 4px;
height: 12px;
}
.star:nth-child(25) {
top: 96vh;
left: 50vw;
}
.star:nth-child(25):before,
.star:nth-child(25):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -25s;
animation-delay: -25s;
}
.star:nth-child(25):before {
top: 1.5px;
left: -1.5px;
width: 9px;
height: 3px;
}
.star:nth-child(25):after {
top: -1.5px;
left: 1.5px;
width: 3px;
height: 9px;
}
.star:nth-child(26) {
top: 92vh;
left: 80vw;
}
.star:nth-child(26):before,
.star:nth-child(26):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -26s;
animation-delay: -26s;
}
.star:nth-child(26):before {
top: 2px;
left: -2px;
width: 12px;
height: 4px;
}
.star:nth-child(26):after {
top: -2px;
left: 2px;
width: 4px;
height: 12px;
}
.star:nth-child(27) {
top: 6vh;
left: 79vw;
}
.star:nth-child(27):before,
.star:nth-child(27):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -27s;
animation-delay: -27s;
}
.star:nth-child(27):before {
top: 2px;
left: -2px;
width: 12px;
height: 4px;
}
.star:nth-child(27):after {
top: -2px;
left: 2px;
width: 4px;
height: 12px;
}
.star:nth-child(28) {
top: 66vh;
left: 99vw;
}
.star:nth-child(28):before,
.star:nth-child(28):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -28s;
animation-delay: -28s;
}
.star:nth-child(28):before {
top: 1.5px;
left: -1.5px;
width: 9px;
height: 3px;
}
.star:nth-child(28):after {
top: -1.5px;
left: 1.5px;
width: 3px;
height: 9px;
}
.star:nth-child(29) {
top: 97vh;
left: 91vw;
}
.star:nth-child(29):before,
.star:nth-child(29):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -29s;
animation-delay: -29s;
}
.star:nth-child(29):before {
top: 0.5px;
left: -0.5px;
width: 3px;
height: 1px;
}
.star:nth-child(29):after {
top: -0.5px;
left: 0.5px;
width: 1px;
height: 3px;
}
.star:nth-child(30) {
top: 17vh;
left: 62vw;
}
.star:nth-child(30):before,
.star:nth-child(30):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -30s;
animation-delay: -30s;
}
.star:nth-child(30):before {
top: 0.5px;
left: -0.5px;
width: 3px;
height: 1px;
}
.star:nth-child(30):after {
top: -0.5px;
left: 0.5px;
width: 1px;
height: 3px;
}
.star:nth-child(31) {
top: 44vh;
left: 66vw;
}
.star:nth-child(31):before,
.star:nth-child(31):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -31s;
animation-delay: -31s;
}
.star:nth-child(31):before {
top: 1px;
left: -1px;
width: 6px;
height: 2px;
}
.star:nth-child(31):after {
top: -1px;
left: 1px;
width: 2px;
height: 6px;
}
.star:nth-child(32) {
top: 94vh;
left: 79vw;
}
.star:nth-child(32):before,
.star:nth-child(32):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -32s;
animation-delay: -32s;
}
.star:nth-child(32):before {
top: 2px;
left: -2px;
width: 12px;
height: 4px;
}
.star:nth-child(32):after {
top: -2px;
left: 2px;
width: 4px;
height: 12px;
}
.star:nth-child(33) {
top: 76vh;
left: 30vw;
}
.star:nth-child(33):before,
.star:nth-child(33):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -33s;
animation-delay: -33s;
}
.star:nth-child(33):before {
top: 2px;
left: -2px;
width: 12px;
height: 4px;
}
.star:nth-child(33):after {
top: -2px;
left: 2px;
width: 4px;
height: 12px;
}
.star:nth-child(34) {
top: 48vh;
left: 96vw;
}
.star:nth-child(34):before,
.star:nth-child(34):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -34s;
animation-delay: -34s;
}
.star:nth-child(34):before {
top: 0.5px;
left: -0.5px;
width: 3px;
height: 1px;
}
.star:nth-child(34):after {
top: -0.5px;
left: 0.5px;
width: 1px;
height: 3px;
}
.star:nth-child(35) {
top: 77vh;
left: 95vw;
}
.star:nth-child(35):before,
.star:nth-child(35):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -35s;
animation-delay: -35s;
}
.star:nth-child(35):before {
top: 1.5px;
left: -1.5px;
width: 9px;
height: 3px;
}
.star:nth-child(35):after {
top: -1.5px;
left: 1.5px;
width: 3px;
height: 9px;
}
.star:nth-child(36) {
top: 4vh;
left: 57vw;
}
.star:nth-child(36):before,
.star:nth-child(36):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -36s;
animation-delay: -36s;
}
.star:nth-child(36):before {
top: 1px;
left: -1px;
width: 6px;
height: 2px;
}
.star:nth-child(36):after {
top: -1px;
left: 1px;
width: 2px;
height: 6px;
}
.star:nth-child(37) {
top: 61vh;
left: 32vw;
}
.star:nth-child(37):before,
.star:nth-child(37):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -37s;
animation-delay: -37s;
}
.star:nth-child(37):before {
top: 0.5px;
left: -0.5px;
width: 3px;
height: 1px;
}
.star:nth-child(37):after {
top: -0.5px;
left: 0.5px;
width: 1px;
height: 3px;
}
.star:nth-child(38) {
top: 17vh;
left: 7vw;
}
.star:nth-child(38):before,
.star:nth-child(38):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -38s;
animation-delay: -38s;
}
.star:nth-child(38):before {
top: 2px;
left: -2px;
width: 12px;
height: 4px;
}
.star:nth-child(38):after {
top: -2px;
left: 2px;
width: 4px;
height: 12px;
}
.star:nth-child(39) {
top: 4vh;
left: 42vw;
}
.star:nth-child(39):before,
.star:nth-child(39):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -39s;
animation-delay: -39s;
}
.star:nth-child(39):before {
top: 2px;
left: -2px;
width: 12px;
height: 4px;
}
.star:nth-child(39):after {
top: -2px;
left: 2px;
width: 4px;
height: 12px;
}
.star:nth-child(40) {
top: 84vh;
left: 51vw;
}
.star:nth-child(40):before,
.star:nth-child(40):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -40s;
animation-delay: -40s;
}
.star:nth-child(40):before {
top: 0.5px;
left: -0.5px;
width: 3px;
height: 1px;
}
.star:nth-child(40):after {
top: -0.5px;
left: 0.5px;
width: 1px;
height: 3px;
}
.star:nth-child(41) {
top: 72vh;
left: 38vw;
}
.star:nth-child(41):before,
.star:nth-child(41):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -41s;
animation-delay: -41s;
}
.star:nth-child(41):before {
top: 2px;
left: -2px;
width: 12px;
height: 4px;
}
.star:nth-child(41):after {
top: -2px;
left: 2px;
width: 4px;
height: 12px;
}
.star:nth-child(42) {
top: 21vh;
left: 41vw;
}
.star:nth-child(42):before,
.star:nth-child(42):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -42s;
animation-delay: -42s;
}
.star:nth-child(42):before {
top: 2px;
left: -2px;
width: 12px;
height: 4px;
}
.star:nth-child(42):after {
top: -2px;
left: 2px;
width: 4px;
height: 12px;
}
.star:nth-child(43) {
top: 67vh;
left: 87vw;
}
.star:nth-child(43):before,
.star:nth-child(43):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -43s;
animation-delay: -43s;
}
.star:nth-child(43):before {
top: 1.5px;
left: -1.5px;
width: 9px;
height: 3px;
}
.star:nth-child(43):after {
top: -1.5px;
left: 1.5px;
width: 3px;
height: 9px;
}
.star:nth-child(44) {
top: 19vh;
left: 92vw;
}
.star:nth-child(44):before,
.star:nth-child(44):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -44s;
animation-delay: -44s;
}
.star:nth-child(44):before {
top: 1.5px;
left: -1.5px;
width: 9px;
height: 3px;
}
.star:nth-child(44):after {
top: -1.5px;
left: 1.5px;
width: 3px;
height: 9px;
}
.star:nth-child(45) {
top: 90vh;
left: 61vw;
}
.star:nth-child(45):before,
.star:nth-child(45):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -45s;
animation-delay: -45s;
}
.star:nth-child(45):before {
top: 1px;
left: -1px;
width: 6px;
height: 2px;
}
.star:nth-child(45):after {
top: -1px;
left: 1px;
width: 2px;
height: 6px;
}
.star:nth-child(46) {
top: 54vh;
left: 9vw;
}
.star:nth-child(46):before,
.star:nth-child(46):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -46s;
animation-delay: -46s;
}
.star:nth-child(46):before {
top: 0.5px;
left: -0.5px;
width: 3px;
height: 1px;
}
.star:nth-child(46):after {
top: -0.5px;
left: 0.5px;
width: 1px;
height: 3px;
}
.star:nth-child(47) {
top: 42vh;
left: 86vw;
}
.star:nth-child(47):before,
.star:nth-child(47):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -47s;
animation-delay: -47s;
}
.star:nth-child(47):before {
top: 1px;
left: -1px;
width: 6px;
height: 2px;
}
.star:nth-child(47):after {
top: -1px;
left: 1px;
width: 2px;
height: 6px;
}
.star:nth-child(48) {
top: 75vh;
left: 42vw;
}
.star:nth-child(48):before,
.star:nth-child(48):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -48s;
animation-delay: -48s;
}
.star:nth-child(48):before {
top: 0.5px;
left: -0.5px;
width: 3px;
height: 1px;
}
.star:nth-child(48):after {
top: -0.5px;
left: 0.5px;
width: 1px;
height: 3px;
}
.star:nth-child(49) {
top: 29vh;
left: 59vw;
}
.star:nth-child(49):before,
.star:nth-child(49):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -49s;
animation-delay: -49s;
}
.star:nth-child(49):before {
top: 1.5px;
left: -1.5px;
width: 9px;
height: 3px;
}
.star:nth-child(49):after {
top: -1.5px;
left: 1.5px;
width: 3px;
height: 9px;
}
.star:nth-child(50) {
top: 22vh;
left: 11vw;
}
.star:nth-child(50):before,
.star:nth-child(50):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -50s;
animation-delay: -50s;
}
.star:nth-child(50):before {
top: 1px;
left: -1px;
width: 6px;
height: 2px;
}
.star:nth-child(50):after {
top: -1px;
left: 1px;
width: 2px;
height: 6px;
}
.star:nth-child(51) {
top: 37vh;
left: 40vw;
}
.star:nth-child(51):before,
.star:nth-child(51):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -51s;
animation-delay: -51s;
}
.star:nth-child(51):before {
top: 1.5px;
left: -1.5px;
width: 9px;
height: 3px;
}
.star:nth-child(51):after {
top: -1.5px;
left: 1.5px;
width: 3px;
height: 9px;
}
.star:nth-child(52) {
top: 99vh;
left: 92vw;
}
.star:nth-child(52):before,
.star:nth-child(52):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -52s;
animation-delay: -52s;
}
.star:nth-child(52):before {
top: 1px;
left: -1px;
width: 6px;
height: 2px;
}
.star:nth-child(52):after {
top: -1px;
left: 1px;
width: 2px;
height: 6px;
}
.star:nth-child(53) {
top: 62vh;
left: 73vw;
}
.star:nth-child(53):before,
.star:nth-child(53):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -53s;
animation-delay: -53s;
}
.star:nth-child(53):before {
top: 0.5px;
left: -0.5px;
width: 3px;
height: 1px;
}
.star:nth-child(53):after {
top: -0.5px;
left: 0.5px;
width: 1px;
height: 3px;
}
.star:nth-child(54) {
top: 86vh;
left: 89vw;
}
.star:nth-child(54):before,
.star:nth-child(54):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -54s;
animation-delay: -54s;
}
.star:nth-child(54):before {
top: 1px;
left: -1px;
width: 6px;
height: 2px;
}
.star:nth-child(54):after {
top: -1px;
left: 1px;
width: 2px;
height: 6px;
}
.star:nth-child(55) {
top: 78vh;
left: 30vw;
}
.star:nth-child(55):before,
.star:nth-child(55):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -55s;
animation-delay: -55s;
}
.star:nth-child(55):before {
top: 0.5px;
left: -0.5px;
width: 3px;
height: 1px;
}
.star:nth-child(55):after {
top: -0.5px;
left: 0.5px;
width: 1px;
height: 3px;
}
.star:nth-child(56) {
top: 29vh;
left: 74vw;
}
.star:nth-child(56):before,
.star:nth-child(56):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -56s;
animation-delay: -56s;
}
.star:nth-child(56):before {
top: 1px;
left: -1px;
width: 6px;
height: 2px;
}
.star:nth-child(56):after {
top: -1px;
left: 1px;
width: 2px;
height: 6px;
}
.star:nth-child(57) {
top: 90vh;
left: 53vw;
}
.star:nth-child(57):before,
.star:nth-child(57):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -57s;
animation-delay: -57s;
}
.star:nth-child(57):before {
top: 1.5px;
left: -1.5px;
width: 9px;
height: 3px;
}
.star:nth-child(57):after {
top: -1.5px;
left: 1.5px;
width: 3px;
height: 9px;
}
.star:nth-child(58) {
top: 92vh;
left: 88vw;
}
.star:nth-child(58):before,
.star:nth-child(58):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -58s;
animation-delay: -58s;
}
.star:nth-child(58):before {
top: 1.5px;
left: -1.5px;
width: 9px;
height: 3px;
}
.star:nth-child(58):after {
top: -1.5px;
left: 1.5px;
width: 3px;
height: 9px;
}
.star:nth-child(59) {
top: 50vh;
left: 63vw;
}
.star:nth-child(59):before,
.star:nth-child(59):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -59s;
animation-delay: -59s;
}
.star:nth-child(59):before {
top: 1px;
left: -1px;
width: 6px;
height: 2px;
}
.star:nth-child(59):after {
top: -1px;
left: 1px;
width: 2px;
height: 6px;
}
.star:nth-child(60) {
top: 30vh;
left: 19vw;
}
.star:nth-child(60):before,
.star:nth-child(60):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -60s;
animation-delay: -60s;
}
.star:nth-child(60):before {
top: 2px;
left: -2px;
width: 12px;
height: 4px;
}
.star:nth-child(60):after {
top: -2px;
left: 2px;
width: 4px;
height: 12px;
}
.star:nth-child(61) {
top: 27vh;
left: 16vw;
}
.star:nth-child(61):before,
.star:nth-child(61):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -61s;
animation-delay: -61s;
}
.star:nth-child(61):before {
top: 1px;
left: -1px;
width: 6px;
height: 2px;
}
.star:nth-child(61):after {
top: -1px;
left: 1px;
width: 2px;
height: 6px;
}
.star:nth-child(62) {
top: 34vh;
left: 75vw;
}
.star:nth-child(62):before,
.star:nth-child(62):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -62s;
animation-delay: -62s;
}
.star:nth-child(62):before {
top: 0.5px;
left: -0.5px;
width: 3px;
height: 1px;
}
.star:nth-child(62):after {
top: -0.5px;
left: 0.5px;
width: 1px;
height: 3px;
}
.star:nth-child(63) {
top: 97vh;
left: 2vw;
}
.star:nth-child(63):before,
.star:nth-child(63):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -63s;
animation-delay: -63s;
}
.star:nth-child(63):before {
top: 1px;
left: -1px;
width: 6px;
height: 2px;
}
.star:nth-child(63):after {
top: -1px;
left: 1px;
width: 2px;
height: 6px;
}
.star:nth-child(64) {
top: 50vh;
left: 94vw;
}
.star:nth-child(64):before,
.star:nth-child(64):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -64s;
animation-delay: -64s;
}
.star:nth-child(64):before {
top: 1.5px;
left: -1.5px;
width: 9px;
height: 3px;
}
.star:nth-child(64):after {
top: -1.5px;
left: 1.5px;
width: 3px;
height: 9px;
}
.star:nth-child(65) {
top: 55vh;
left: 48vw;
}
.star:nth-child(65):before,
.star:nth-child(65):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -65s;
animation-delay: -65s;
}
.star:nth-child(65):before {
top: 1.5px;
left: -1.5px;
width: 9px;
height: 3px;
}
.star:nth-child(65):after {
top: -1.5px;
left: 1.5px;
width: 3px;
height: 9px;
}
.star:nth-child(66) {
top: 49vh;
left: 1vw;
}
.star:nth-child(66):before,
.star:nth-child(66):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -66s;
animation-delay: -66s;
}
.star:nth-child(66):before {
top: 1.5px;
left: -1.5px;
width: 9px;
height: 3px;
}
.star:nth-child(66):after {
top: -1.5px;
left: 1.5px;
width: 3px;
height: 9px;
}
.star:nth-child(67) {
top: 26vh;
left: 92vw;
}
.star:nth-child(67):before,
.star:nth-child(67):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -67s;
animation-delay: -67s;
}
.star:nth-child(67):before {
top: 1.5px;
left: -1.5px;
width: 9px;
height: 3px;
}
.star:nth-child(67):after {
top: -1.5px;
left: 1.5px;
width: 3px;
height: 9px;
}
.star:nth-child(68) {
top: 31vh;
left: 58vw;
}
.star:nth-child(68):before,
.star:nth-child(68):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -68s;
animation-delay: -68s;
}
.star:nth-child(68):before {
top: 1px;
left: -1px;
width: 6px;
height: 2px;
}
.star:nth-child(68):after {
top: -1px;
left: 1px;
width: 2px;
height: 6px;
}
.star:nth-child(69) {
top: 43vh;
left: 20vw;
}
.star:nth-child(69):before,
.star:nth-child(69):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -69s;
animation-delay: -69s;
}
.star:nth-child(69):before {
top: 2px;
left: -2px;
width: 12px;
height: 4px;
}
.star:nth-child(69):after {
top: -2px;
left: 2px;
width: 4px;
height: 12px;
}
.star:nth-child(70) {
top: 50vh;
left: 56vw;
}
.star:nth-child(70):before,
.star:nth-child(70):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -70s;
animation-delay: -70s;
}
.star:nth-child(70):before {
top: 2px;
left: -2px;
width: 12px;
height: 4px;
}
.star:nth-child(70):after {
top: -2px;
left: 2px;
width: 4px;
height: 12px;
}
.star:nth-child(71) {
top: 39vh;
left: 15vw;
}
.star:nth-child(71):before,
.star:nth-child(71):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -71s;
animation-delay: -71s;
}
.star:nth-child(71):before {
top: 1.5px;
left: -1.5px;
width: 9px;
height: 3px;
}
.star:nth-child(71):after {
top: -1.5px;
left: 1.5px;
width: 3px;
height: 9px;
}
.star:nth-child(72) {
top: 32vh;
left: 4vw;
}
.star:nth-child(72):before,
.star:nth-child(72):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -72s;
animation-delay: -72s;
}
.star:nth-child(72):before {
top: 1.5px;
left: -1.5px;
width: 9px;
height: 3px;
}
.star:nth-child(72):after {
top: -1.5px;
left: 1.5px;
width: 3px;
height: 9px;
}
.star:nth-child(73) {
top: 11vh;
left: 91vw;
}
.star:nth-child(73):before,
.star:nth-child(73):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -73s;
animation-delay: -73s;
}
.star:nth-child(73):before {
top: 1.5px;
left: -1.5px;
width: 9px;
height: 3px;
}
.star:nth-child(73):after {
top: -1.5px;
left: 1.5px;
width: 3px;
height: 9px;
}
.star:nth-child(74) {
top: 43vh;
left: 27vw;
}
.star:nth-child(74):before,
.star:nth-child(74):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -74s;
animation-delay: -74s;
}
.star:nth-child(74):before {
top: 1px;
left: -1px;
width: 6px;
height: 2px;
}
.star:nth-child(74):after {
top: -1px;
left: 1px;
width: 2px;
height: 6px;
}
.star:nth-child(75) {
top: 5vh;
left: 68vw;
}
.star:nth-child(75):before,
.star:nth-child(75):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -75s;
animation-delay: -75s;
}
.star:nth-child(75):before {
top: 1.5px;
left: -1.5px;
width: 9px;
height: 3px;
}
.star:nth-child(75):after {
top: -1.5px;
left: 1.5px;
width: 3px;
height: 9px;
}
.star:nth-child(76) {
top: 71vh;
left: 49vw;
}
.star:nth-child(76):before,
.star:nth-child(76):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -76s;
animation-delay: -76s;
}
.star:nth-child(76):before {
top: 0.5px;
left: -0.5px;
width: 3px;
height: 1px;
}
.star:nth-child(76):after {
top: -0.5px;
left: 0.5px;
width: 1px;
height: 3px;
}
.star:nth-child(77) {
top: 55vh;
left: 49vw;
}
.star:nth-child(77):before,
.star:nth-child(77):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -77s;
animation-delay: -77s;
}
.star:nth-child(77):before {
top: 1.5px;
left: -1.5px;
width: 9px;
height: 3px;
}
.star:nth-child(77):after {
top: -1.5px;
left: 1.5px;
width: 3px;
height: 9px;
}
.star:nth-child(78) {
top: 39vh;
left: 67vw;
}
.star:nth-child(78):before,
.star:nth-child(78):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -78s;
animation-delay: -78s;
}
.star:nth-child(78):before {
top: 1px;
left: -1px;
width: 6px;
height: 2px;
}
.star:nth-child(78):after {
top: -1px;
left: 1px;
width: 2px;
height: 6px;
}
.star:nth-child(79) {
top: 13vh;
left: 73vw;
}
.star:nth-child(79):before,
.star:nth-child(79):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -79s;
animation-delay: -79s;
}
.star:nth-child(79):before {
top: 0.5px;
left: -0.5px;
width: 3px;
height: 1px;
}
.star:nth-child(79):after {
top: -0.5px;
left: 0.5px;
width: 1px;
height: 3px;
}
.star:nth-child(80) {
top: 11vh;
left: 76vw;
}
.star:nth-child(80):before,
.star:nth-child(80):after {
position: absolute;
content: '';
background-color: #fff;
border-radius: 10px;
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-delay: -80s;
animation-delay: -80s;
}
.star:nth-child(80):before {
top: 1px;
left: -1px;
width: 6px;
height: 2px;
}
.star:nth-child(80):after {
top: -1px;
left: 1px;
width: 2px;
height: 6px;
}
.circle {
position: absolute;
top: 30%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.circle--outer {
width: 550px;
height: auto;
}
.circle--inner {
width: 460px;
height: 260px;
}
.four {
position: absolute;
font-size: 260px;
font-weight: 700;
line-height: 312.5px;
font-weight: lighter;
color: #545e7f;
text-shadow: 0 3px 7px rgba(0, 0, 0, 0.35);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* -webkit-text-shadow: 2px 2px 2px #A1AAC8, 1px 0 0 transparent, 0 0 0
transparent;
-moz-text-shadow: 2px 2px 2px #A1AAC8, 1px 0 0 transparent, 0 0 0 transparent;
-o-text-shadow: 2px 2px 2px #A1AAC8, 1px 0 0 transparent, 0 0 0 transparent;
-ms-text-shadow: 2px 2px 2px #A1AAC8, 1px 0 0 transparent, 0 0 0 transparent; */
text-shadow: 2px 2px 2px #A1AAC8, 1px 0 0 transparent, 0 0 0 transparent;
}
.four--0 {
top: 0;
left: 155px;
z-index: 3;
}
.four--1 {
top: 0;
left: 5px;
z-index: 1;
}
.four--2 {
top: 0;
left: 303px;
z-index: 3;
}
.astronaut {
position: absolute;
top: -320px;
left: -125px;
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}

.astronaut img {
max-height: 670px;
}

.oh {
-webkit-transition: all 0.1s linear;
transition: all 0.1s linear;
-webkit-animation: floating 4s linear infinite;
animation: floating 4s linear infinite;
z-index: 2;
}
.planet {
background-color: #ff4980;
box-shadow: inset -6px -10px 0px 1px #cc3b6b, 0px 2px 10px rgba(0,0,0,0.4);
width: 155px;
height: 155px;
}
.craters .crater {
position: absolute;
border-radius: 50%;
background-color: #c93667;
}
.craters .crater--1 {
width: 35px;
height: 35px;
top: 30px;
left: 25px;
}
.craters .crater--2 {
width: 23px;
height: 23px;
top: 20px;
left: 93px;
}
.craters .crater--3 {
width: 17px;
height: 17px;
top: 77px;
left: 17px;
}
.craters .crater--4 {
width: 10px;
height: 10px;
top: 90px;
left: 80px;
}
.craters .crater--5 {
width: 25px;
height: 25px;
top: 115px;
left: 50px;
}
.craters .crater--6 {
width: 13px;
height: 13px;
top: 118px;
left: 105px;
}
.button.btn-back {
position: absolute;
bottom: -30px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding: 10px 50px;
border: 1px solid #426c97;
background-color: #ffffff;
border-radius: 3px;
color: #426c97;
font-size: 20px;
font-weight: 700;
line-height: 28.91px;
text-transform: uppercase;
cursor: pointer;
z-index: 999;
}
.button:active {
-webkit-transform: translateX(-50%) scale(0.95);
transform: translateX(-50%) scale(0.95);
}
.page-not-found {
position: absolute;
bottom: 100px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
font-size: 35px;
font-weight: 400;
line-height: 41.67px;
min-width: 100%;
text-align: center;
}
.sorry {
position: absolute;
bottom: 50px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
font-size: 23px;
font-weight: 300;
text-align: center;
min-width: 100%;
text-align: center;
}
@-webkit-keyframes blink {
0%, 100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
50% {
-webkit-transform: scale(0.4);
transform: scale(0.4);
opacity: 0.5;
}
}
@keyframes blink {
0%, 100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
50% {
-webkit-transform: scale(0.4);
transform: scale(0.4);
opacity: 0.5;
}
}
@-webkit-keyframes floating {
0%, 100% {
-webkit-transform: translate(-1px, -3px) rotate(-2deg);
transform: translate(-1px, -3px) rotate(-2deg);
}
20% {
-webkit-transform: translate(0px, 1px) rotate(0deg);
transform: translate(0px, 1px) rotate(0deg);
}
40% {
-webkit-transform: translate(1px, 1px) rotate(2deg);
transform: translate(1px, 1px) rotate(2deg);
}
60% {
-webkit-transform: translate(2px, -3px) rotate(-1deg);
transform: translate(2px, -3px) rotate(-1deg);
}
80% {
-webkit-transform: translate(1px, -2px) rotate(2deg);
transform: translate(1px, -2px) rotate(2deg);
}
}
@keyframes floating {
0%, 100% {
-webkit-transform: translate(-1px, -3px) rotate(-2deg);
transform: translate(-1px, -3px) rotate(-2deg);
}
20% {
-webkit-transform: translate(0px, 1px) rotate(0deg);
transform: translate(0px, 1px) rotate(0deg);
}
40% {
-webkit-transform: translate(1px, 1px) rotate(2deg);
transform: translate(1px, 1px) rotate(2deg);
}
60% {
-webkit-transform: translate(2px, -3px) rotate(-1deg);
transform: translate(2px, -3px) rotate(-1deg);
}
80% {
-webkit-transform: translate(1px, -2px) rotate(2deg);
transform: translate(1px, -2px) rotate(2deg);
}
}

You might also like