@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Rubik:wght@300..900&display=swap');

* {
	margin: 0;
	padding: 0;
}
body {
	background: #0c122a;
	width: auto;
	height: 100%;
}
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p
 {
  margin:0;
  padding:0;
  border:0
}
a, a:visited {
	color: #6d6c6c;
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a img {
	border: 0;
}
.main-section {
    position: relative;
    background-position: center center;
    transform-origin: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.main-section::before{
    background-image: url('../img/noise.gif');
    content: '';
    background-size: 110px;
    opacity: calc(12 / 100);
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000000;
    pointer-events: none;
}

.error-content {
    position: absolute;
    box-sizing: border-box;
    display: table;
    z-index: 3;
    left: 20px;
    top: 133px;
    zoom: 1.565;
    width: 766px;
    pointer-events: none;
    opacity:0.2;
}
.error-content img{
    width: 100%;
    height: auto;
}
.astronaut-img {
    position: absolute;
    box-sizing: border-box;
    display: table;
    z-index: 4;
    left: 749px;
    top: 52px;
    zoom: 1.565;
    box-sizing: border-box;
    display: table;
    z-index: 4;
    -webkit-transform: rotate(346deg);
    -moz-transform: rotate(346deg);
    transform: rotate(346deg);
}
.astronaut-img img {
    width: 370px;
    height: 525px;
    pointer-events: none;
    background-position: center center;
}
.parallax .img-1 {
	top: 482px;
	left: 601px;
}
.parallax .img-1 img{
    width: 80px;
    height: 30px;
}
.parallax .img-2 {
	top: 274px;
	right: 47px;
}
.parallax .img-3{
    top: 20px;
    right: 500px;
}
.parallax .img-4{
    top: 20px;
    right: 120px;
}
.parallax .img-5 {
	top: 398px;
	right: 367px;
}
.parallax .img-6 {
	top: 229px;
	right: 464px;
}
.parallax .img-7 {
	top: 430px;
	right: 70px;
	
}     
.parallax .img-7 img{
    width: 30px;
	transform: rotate(180deg);
}
.parallax .img-8 {
	top: 607px;
	right: 87px;
}
.parallax .img-9 {
	top: 522px;
	right: 488px;
}
.parallax .img-9 img{
    width: 28px;
	transform: rotate(40deg);
}
.back-button{
    position:absolute;
    z-index: 17;
    top: calc(50vh - 275px + 490px);
    left: 0;
    right: 0;
    text-align: center;
    margin: 0 auto;
   
}
.back-button a{
    max-width: 378px;
    width: 100%;
    height: 60px; 
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
	color: #1b1c1e;
	font-size: 15px;
    font-family: "Rubik", sans-serif;
	line-height: 1.3;
	font-weight: 400;
	border-radius: 30px;
	background-color: #ab88d9;
	border-color: transparent;
	border-style: solid;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    zoom: 1.565;
}
.back-button a:hover{
    background-color: #5fc58e;
    background-image: none;
}
@media (min-width: 1601px) and (max-width: 1700px) {
    .error-content,
    .astronaut-img,
    .back-button a {
        zoom: 1.4;
    }
}
@media (min-width: 1440px) and (max-width: 1600px) {
    .astronaut-img {
        zoom: 1.325;
    }
    .error-content {
        top: 155px;
        zoom: 1.325;
    }
    .back-button a{
        zoom: 1.325;
    }
}
/*--------------------------------------------------------------
    laptop device
---------------------------------------------------------------*/
@media screen and (max-width: 1440px){
    .error-content {
        left: 47px;
        top: 133px;
        width: 766px;
        zoom: 1.124;
    }
    .astronaut-img{
        left: 749px;
        top: 69px;
        zoom: 1.124;
    }
    .astronaut-img img {
        width: 370px;
        height: 525px;
        zoom: 1.124;
    }
    .back-button{
        top: 460px;
        max-width: 378px;
        height: 60px;
       
    }
    .back-button a{
        zoom: 1.124;
    }
    .parallax .img-1 {
        top: 445px;
        left: 601px;
    }
    .parallax .img-9 {
        top: 468px;
        right: 488px;
    }
}


@media screen and (max-width: 1280px){
    .error-content img {
        max-width: 580px;
        width: 100%;
    }
    .astronaut-img {
        left: 667px;
        top: 69px;
    }
    .astronaut-img img {
        width: 290px;
        height: auto;
        zoom: 1.124;
    }
    .back-button a {
        max-width: 322px;
        height: 55px;
    }
    .img-9 {
        top: 411px;
        right: 450px;
    }
}
@media screen and (max-width: 1080px){
    .astronaut-img {
        left: 574px;
        top: 69px;
    }
    .parallax .img-1 {
        top: 482px;
        left: 652px;
    }
    .parallax .img-2 {
        top: 143px;
        right: 7px;
    }
    .parallax .img-3 {
        top: 123px;
        right: 340px;
    }
    .parallax .img-4 {
        top: 17px;
        right: 71px;
    }
    .parallax .img-4 img{
        width: 70px;
    }
    .parallax .img-6 {
        top: 254px;
        right: 215px;
    }
    .parallax .img-7 {
        top: 501px;
        right: 93px;
    }
    .parallax .img-9 {
        top: 498px;
        right: 378px;
    }
}
/*--------------------------------------------------------------
    tablet device
---------------------------------------------------------------*/
@media screen and (max-width: 991px){
    .error-content {
        top: 450px;
        width: 100%;
        zoom: 1.112;
        left: auto;
        right: auto;
        padding: 0 45px;
        text-align: center;
    }
    .error-content img {
        max-width: 750px;
    }
    .astronaut-img {
        left: 266px;
        top: 69px;
    }
    .back-button {
        top: 800px;
    }
    .back-button a {
        max-width: 400px;
        height: 55px;
    }
    .parallax .img-1 {
        top: 500px;
        left: 124px;
    }
    .parallax .img-2 {
        top: 209px;
        right: 160px;
    }
    .parallax .img-3 {
        top: 64px;
        right: 588px;
    }
    .parallax .img-4 {
        top: 38px;
        right: 177px;
    }
    .parallax .img-5 {
        top: 321px;
        right: auto;
        left: 272px;
    }
    .parallax .img-6 {
        top: 367px;
        right: 205px;
    }
}

@media screen and (max-width: 767px){
    .back-button,
    .error-content{
        padding: 0 24px;
    }
    .astronaut-img{
        left: auto!important;
        right: auto;
        margin: 0 auto!important;
        width: 100%;
    }
    .astronaut-img img{
        left: auto!important;
        right: auto;
        margin: 0 auto!important;
    }
    .back-button {
        top: 750px;
    }
}
/*--------------------------------------------------------------
    mobile device
---------------------------------------------------------------*/
@media screen and (max-width: 570px){
    .astronaut-img img {
        width: 240px;
    }
    .error-content {
        top: 414px;
    }
    .back-button {
        top: 646px;
    }
    .back-button a{
        height: 50px;
    }
    .parallax .img-1 {
        top: 555px;
        left: 176px;
    }
    .parallax .img-2 {
        top: 201px;
        right: 55px;
    }
    .parallax .img-3 {
        top: 64px;
        right: auto;
        left: 81px;
    }
    .parallax .img-4 {
        top: 71px;
        right: 71px;
    }
    .parallax .img-4 img{
        width: 40px;
        height: 40px;
        transform: rotate(120deg);
    }
    .parallax .img-5 {
        top: 321px;
        right: auto;
        left: 105px;
    }
    .parallax .img-6 {
        top: 442px;
        right: 244px;
    }
    .parallax .img-7 {
        top: 366px;
        right: 75px;
    }
    .parallax .img-8 {
        top: 582px;
        right: 87px;
    }
    .parallax .img-8 img{
        width: 30px;
        height: 30px;
    }
    .parallax .img-9 {
        top: 492px;
        right: auto;
        left: 58px;
    }
}
@media screen and (max-width: 490px){
    .back-button {
        top: 605px;
    }
}