html{
}
body{
    background-color: #6E3638;
    padding:0;
    margin: 0;
    border:0;
    color: white;
    font-family: 'Josefin Sans', sans-serif;
    transition: 3s;
    transition-timing-function: ease-in-out;
    overflow-x: hidden;

}


p{
    font-weight:300;
    text-align: center;
    font-size: 30vw;
    color: white;
    line-height: 2vw;
    padding: 0;
    margin: 0;
}
b{
    font-weight: 700;

}
i{
    font-size: 20px;
    line-height: 2vw;
}
h1{
    font-weight:700;
    color: white;
    font-size:2.5vw;
}
@media(max-width: 600px){
    p{
        font-size: 4vw;
        line-height: 7vw;
    }
    h1{
        font-size: 5vw;
    }
}
@media(min-width: 600px) and (max-width: 850px){
    p{
        font-size: 3vw;
        line-height: 5vw;
    }
    h1{
        font-size: 4vw;
    }
}
@media(min-width: 850px) and (max-width: 1200px){
    p{
        font-size: 2vw;
        line-height: 3vw;
    }
}
@media(min-width: 1200px){
    p{
        font-size: 30px;
        line-height: 40px;
    }
    h1{
        font-size:40px;
    }
}
#siteContainer{
    width:100%;
    position: relative;
}
@media(max-aspect-ratio: 35/100){
#siteContainer{
    min-height:100vh;
}
}
#background{
    width: 100%;
    height:120vw;
    min-height: 100vh;
    background-image:url("assets/startile.png");
    background-attachment: fixed;
    position:absolute;
    z-index: -8;
    background-size: 600px 600px;
}
.changeWithContent{
    transition: all 3s;
    transition-timing-function: ease-in-out;
    transform-origin: top left;
}
.textChangeWithContent{
    transition-delay:5s;
}

@media only screen and (max-width: 600px){
    #background{
        background-size: 300px 300px;
    }
}
@media only screen and (min-width:60px) and (max-width: 850px){
    #background{
        height:250vw;
    }
}
@media only screen and (min-width:850px) and (max-width: 1200px){
    #background{
        height:180vw;
    }
}

/*************************************************** HEADER **********************************/

#headerContainer{
    width: 100%;
    height: 50vw;
    z-index:-1;

}
#headerBox{
    width: 100%;
    height: 99%;
    position: relative;
    display:block;
    margin:auto;
    opacity:1;
    transition-duration:4s;
    transform: none;
    transition-timing-function: ease-in-out;
}
#headerBox:hover{
    transition: 1s;
    transition-timing-function: ease-in-out;
}


@media only screen and (max-width: 1200px){
    #headerContainer{
        height: 90vw;
        overflow-x: hidden;
        overflow-y: visible;
    }
    #headerBox{
        width: 180vw;
        transform: translate(-40vw);
        object-fit: cover;
        overflow-y: hidden;
    }

}
.headerImage{
    width: 90%;
    display:block;
    margin:auto;
    left:5%;
    position: absolute;
    transition: all 3s;
    transition-timing-function: ease-in-out;
}
#indexHeaderImage{
    opacity:1;
}
#aboutHeaderImage{
    opacity:0;
}
#contactHeaderImage{
    opacity:0;
}
#theBearHeaderImage{
    opacity:0;
}
#theStargathererHeaderImage{
    opacity:0;
}

#logo{
    width: 13.3%;
    position: absolute;
    left: 42%;
    top: 35%;
}

/*************************************************** CONTENT **********************************/

#contentBox{
    width: 1200px;
    height: 775px;
    display:block;
    margin:auto;
    position: relative;
}
#contentBoxWrapper{
    opacity:1;
    transition-duration: 3s;
    transition-delay: 1s;
    transform:scale(1);
    transform-origin: top center;

}
@media only screen and (max-width: 600px){
    #contentBox{
        width:100%;
        height: 150vw;
    }
}
@media only screen and (min-width: 600px) and (max-width: 850px){
    #contentBox{
        width:100%;
        height: 133vw;
    }
}
@media only screen and (min-width: 850px) and (max-width: 1200px){
    #contentBox{
        width:90vw;
        height: 58.1vw;
    }
}


/*************************************************** ABOUT **********************************/

#aboutBox{
    width:25.2%;
    height: 36.5%;
    top: 9.9%;
    left: 0.4%;
    position: absolute;

}

@media only screen and (max-width: 850px){
    #aboutBox{
        width:36.1%;
        height: 25.4%;
        top: 0.2%;
        left: 6.9%;
    }
}

#aboutTitle{
    width: 32.1%;
    position: absolute;
    top:0%;
    left: 58.6%;
}

#aboutPlanet{
    width: 100%;
    top: 11.6%;
    position: absolute;

}
.aboutContent{
    transform-origin: top left;
    transition-delay: 0s;
    transition-duration:0.5s;
    opacity: 0;
    visibility: hidden;
}
.aboutContentWrapper{
    transform:scale(0);
    width:100%;
    height: 100%;
    transition-delay:2s;
}
#aboutWorldTitle{
    left:33.9%;
    top: 14.9%;
    position: absolute;
    opacity:0;
}
#aboutWorldText{
    width:82.8%;
    top: 30%;
    left: 10%;
    position: absolute;
}
#aboutWorldTextp{

}
#ourMissionBox{
    position: absolute;
    width: 1%;
    height:1%;
    top: 60.1%;
    left: 40.3%;
}
#ourMissionTextp{
    display:none;
}
#ourMissionPlanet{
    width: 1%;
    top: 0;
    left:49.9%;
    position: absolute;
    animation: 8s floatUpRight ease-in-out infinite;
    opacity:0;
    transition: 2s;
}
#ourMissionTitle{
    position: absolute;
    left:26.3%;
    top:15.2%;
    opacity:0;
}
#ourMissionText{
    position: absolute;
    width: 80.4%;
    left:0;
    top: 37.2%;
    opacity:0;
}

/*************************************************** CONTACT **********************************/


#contactBox{
    width: 15.1%;
    height: 22.3%;
    top: 49.9%;
    left: 21.8%;
    position: absolute;

}

@media only screen and (max-width: 850px){
    #contactBox{
        width:21.7%;
        height: 15.6%;
        top: 0;
        left: 70%;

    }
}

#contactTitle{
    width: 51.9%;
    position: absolute;
    top:0;
    left: 0;
}
#contactPlanet{
    width: 80.1%;
    top: 17.9%;
    left: 20.4%;
    position: absolute;

}
.contactContent{
    transition-delay:0s;
    transition-duration:0.5s;
}
.contactContentWrapper{
    transform: scale(0);
    width:100%;
    height: 100%;
    transition-delay:2s;
}
#contactText{
    position: absolute;
    width: 71.6%;
    top: 42%;
    left: 20%;
    opacity:0;
}
#mailBox{
    position:relative;
    height: 3vw;
    margin-left:20%;
    margin-top: 5%;
}

#mailIcon{
    width:5%;
    position: absolute;
    left:0;
    top:40%;
}
#mailText{
    position:absolute;
    left:10%;
    top:20%;
}
@media only screen and (max-width: 850px){
    #mailBox{
        width:20%;
        position: absolute;
    }
    #mailText{
        display:none;
    }
    #mailIcon{
        width:100%;
        top:0;
    }
}
#instagramBox{
    position: relative;
    height:3vw;
    margin-left:30%;
}
#instagramIcon{
    width:5%;
    position: absolute;
    left:0;
    top:40%;
}
#instagramText{
    position:absolute;
    left:10%;
    top:20%;
}
@media only screen and (min-width: 850px) and (max-width: 1200px){
    #instagramText{

    }
}
@media only screen and (max-width: 850px){
    #instagramBox{
        width: 20%;
        margin-left:50%;
        position: absolute;

    }
    #instagramText{
        display:none;
    }
    #instagramIcon{
        width:100%;
    }
}
/*************************************************** THE BEAR **********************************/

#theBearBox{
    width: 30.3%;
    height: 61.5%;
    top: 33.4%;
    left: 62.3%;
    position: absolute;
}

@media only screen and (max-width: 850px){
    #theBearBox{
        width:43.5%;
        height: 42.8%;
        top: 54.6%;
        left: 47.7%;
    }
}
.theBearContent{
    opacity:0;
    transition-delay:0s;
    transition-duration:1s;
}
.theBearContentWrapper{
    width:100%;
    height:100%;
    transform: scale(0);
    transition-delay:2s;
}
#theBearTitle{
    width: 29.5%;
    position: absolute;
    top:30.8%;
    left: 0;
}
#theBearPlanet{
    width: 88.4%;
    top:32.5%;
    left:10%;
    position: absolute;
}
#theBearCharacterSitting{
    position: absolute;
    width: 58.1%;
    right:0;
    top:0;
    opacity:1;
    transition-duration: 2s;
    transition-delay:2s;
}
#theBearCharacterFloating{
    position: absolute;
    width: 65.8%;
    top: 43.4%;
    left:0;
}
#theBearText{
    position: absolute;
    width: 31.2%;
    top: 45.8%;
    left: 61.4%;
}

#bearGif{
    position: absolute;
    width: 38.6%;
    top:7.5%;
    left:46.5%;
}
#bearGifImage{
    width: 100%
}

#additionalBearContent{
    display: none;
}
/*************************************************** THE STARGATHERER **********************************/

#theStargathererBox{
    width: 21%;
    height: 23.5%;
    top: 2.5%;
    left: 79.4%;
    position: absolute;

}
#theStargathererBox:hover{
    animation: none;
}
.theStargathererContent{
    opacity:0;
    transition-duration:1s;
    transition-delay:0s;
}
.theStargathererContentWrapper{
    transform:scale(0);
    width:100%;
    height: 100%;
    transition-delay:2s;
}
@media only screen and (max-width: 850px){
    #theStargathererBox{
        width:30.3%;
        height: 16.4%;
        top: 59.6%;
        left: 6.9%;
    }
}
#theStargathererTitle{
    width: 55%;
    position: absolute;
    top:10%;
    left: 12%;
}
#theStargathererPlanet{
    width: 54.5%;
    bottom:0;
    left:18.6%;
    position: absolute;
}
#theStargathererCharacter{
    position: absolute;
    width: 43.5%;
    right: 0;
    top: 19.7%;
    z-index:2;
}
#theStargathererText{
    position:absolute;
    width:37.6%;
    top:40%;
    left:25%;
}
#theStargathererExtraBox{
    position: absolute;
    width: 56.2%;
    height: 47.2%;
    top:46.9%;
    left:38.1%;
}
#theStargathererExtraPlanet{
    position: absolute;
    width: 100%;
    top:0;
    left:0;
    z-index: -1;
}
.theStargathererPicDetail{
    position: absolute;
    width: 38.9%;
    top:11%;
    left:46.3%;
    transition: 1s;
    transition-timing-function: ease-in-out;
}
.theStargathererPicFull{
    position: absolute;
    width: 66.3%;
    top:45.7%;
    left:16.9%;
}
/*************************************************** WELCOME TEXT **********************************/

#welcomeTextWrapper{
    position: absolute;
    width: 41.7%;
    height: 27.9%;
    top: 14.2%;
    left: 32%;
    transform:scale(1);
    transition-delay:0s;
}
#welcomeText{
    width:100%;
    height:100%;
    opacity:1;
}
@media only screen and (max-width: 600px){
    #welcomeTextWrapper{
        top: 30%;
        left: 20%;
        width: 60%;

    }
}
@media only screen and (min-width: 600px) and (max-width: 850px){
    #welcomeTextWrapper{
        top: 35%;
        left: 20%;
        width: 60%;

    }
}


/*************************************************** FOOTER **********************************/

#footerBoxWrapper{
    opacity:1;
    transition-duration:4s;
    transition-delay:2s;
    transform:scale(1)
}
#footerBox{
    width: 100%;
    height: 45.5vw;
    position:relative;
    z-index:-1;
    opacity:1;
    transform:scale(1);
    transition-duration: 2s;
}

.footerImage{
    width: 100%;
    position: absolute;
    bottom:0;
    transition-duration: 3s;
    transition-delay:0s;
}
@media only screen and (max-width: 850px){

}
@media(max-aspect-ratio: 35/100){
 #footerBox{
     position: absolute;
     bottom:0;
     transition-duration:2s;
 }
}

@keyframes floatUpRight {
    0%{transform: translate(0%,0%)}
    50%{transform: translate(2%,-2%)}
    100%{transform: translate(0%,0%)}
}
@keyframes floatUpLeft {
    0%{transform: translate(0%,0%)}
    50%{transform: translate(-2%,-2%)}
    100%{transform: translate(0%,0%)}
}
@keyframes floatUp {
    0%{transform: translate(0%,0%)}
    50%{transform: translate(0%,-10%)}
    100%{transform: translate(0%,0%)}
}
@keyframes getBiggerAndFloat {
    0%{transform: scale(1)  translate(0%,0%)}
    50%{transform: scale(1.5) translate(-2%,-2%)}
    100%{transform: scale(1) translate(0%,0%)}
}

@keyframes floatUpALittle{
    0%{transform: translate(0%,0%)}
    50%{transform: translate(0%,2%)}
    100%{transform: translate(0%,0%)}
}
.linkedPlanet{
    position: relative;
    width: 100%;
    height: 100%;
    transition: 1s;
    transition-timing-function: ease-in-out;
}
.linkedPlanet:hover{
    transform: scale(1.2);
    transition: 0.5s;
    transition-timing-function: ease-in-out;
    cursor: pointer;
}
.planetWrapper{
    width: 100%;
    height: 100%;
}
@media only screen and (min-width: 850px){
    .floatUpRight{
        animation: 8s floatUpRight ease-in-out infinite;
    }
    .floatUp{
        animation: 8s floatUp ease-in-out infinite;
    }
    .floatUpLeft{
        animation: 8s floatUpLeft ease-in-out infinite;
    }
    .floatUpALittle{
        animation: 8s floatUpALittle ease-in-out infinite;
    }
    .floatUpALittleSlowly{
        animation: 12s floatUpALittle ease-in-out infinite;
    }
}


#indexFooterImage{
    opacity:1;
}
#aboutFooterImage{
    opacity:0;
}
#contactFooterImage{
    opacity:0;
}
#theBearFooterImage{
    opacity:0;
}
#theStargathererFooterImage{
    opacity:0;
}

.impressumsBox{
    font-weight:100;
    position: absolute;
    font-size: 20px;
    bottom:2%;
    right: 5%;
    width: 20%;
    height: 40px;
    text-align: right;
    line-height:30px;
    overflow: hidden;
    z-index:10;
    transition: 0.5s;
}
.impressumsBox:hover{
    cursor: pointer;
}
.impressumsBoxOpen{
    height:120px;
}
#impressumsLink{

}

#impressumText{
    margin-top:5px;
}
@media only screen and (max-width: 600px){
    .impressumsBox{
        font-size: 3vw;
        line-height: 4vw;
        width: 40%;
        height: 4vw;
    }
    .impressumsBoxOpen{
        height:16vw;
    }
}
@media only screen and (min-width: 600px )and (max-width: 1200px){
    .impressumsBox{
        font-size: 2vw;
        line-height: 3vw;
        width: 40%;
        height: 3vw;
    }
    .impressumsBoxOpen{
        height:12vw;
    }
}

.appstoreImage{
    width: 10vw;
    padding-top: 1vw;
}

@media only screen and (max-width: 600px){
    .appstoreImage{

    }
}

@media only screen and (min-width: 600px )and (max-width: 1200px){
    .appstoreImage{
        
    }
}