@import url('https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap');
body{
    position: relative;
    font-family: 'RocknRoll One', cursive;
    padding:0;
    margin:0;
}

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

a:visited{
    text-decoration: none;
}

#worldWrapper{
    position:relative;
    max-width:100%;
    width:150vh;
    padding:0;
    margin-left:auto;
    margin-right:auto;
    
}

div{
    position: relative;
    text-align: center;
    padding-bottom: .2rem;
    margin-left: auto;
    margin-right: auto;
}

#topMenu{
    position:fixed;
    top:0;
    width:100vw;
    min-height:4rem;
    max-height:8rem;
    background:rgba(255,255,255,0.4);
    z-index:900;
    
}

#topMenu .left{
    position:absolute;
    font-size:2rem;
    text-align: left;
    
    color:#484848;
    white-space: nowrap;
    left:5vw;
    top:50%;
    transform:translateY(-50%);
}

#topMenu .right{
    position:absolute;
    right:5vw;
    top:50%;
    transform:translateY(-50%);
}



#topMenu ul{
    position:absolute;
    display:flex;
    flex-wrap: nowrap;
    list-style-type: none;
    right:0;
    top:50%;
    transform:translateY(-50%);
    margin:0;
    box-sizing: content-box;
}

@media screen and (max-width: 800px){
    #topMenu{
        min-height:8rem;
        background:rgba(255,255,255,0.4);
        z-index:900;
    }
    #topMenu .left{
        text-align: center;
        left:50%;
        top:35%;
        transform:translate(-50%, -50%);
    }
    #topMenu .right{
        right:0;
        left:50%;
        top:50%;
        transform:translate(-50%, -50%);
        margin-top:2rem;
    }

    #topMenu ul{
        width:100%;
        left:0%;
        top:50%;
        transform:translate(-50%, -50%);
    }
}


#topMenu li{
    position:relative;
    box-sizing: content-box;
    margin-left:.2rem;
    margin-right:.2rem;
    white-space: nowrap;
}

#topMenu a{
    background-color:transparent;
    background-image:linear-gradient(
        180deg
        , transparent 70%
        , white 70%
        , white 80%
        , transparent 80%
    );
    
    padding-top:1rem;
    padding-bottom:1rem;
    padding-left:.3rem;
    padding-right:.3rem;
    margin-left:.2rem;
    margin-right:.2rem;
    border-radius:1rem;
    transition: 
        background-color .2s ease-in-out
        , border-radius .4s ease-in-out;
    
}

#topMenu  a:hover{
    background-color:white;
    border-radius:0rem;
}


.title{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    white-space: nowrap;
}

.guideArrow, .guideArrowOverwrap{
    position:fixed;
    width   :7vw;
    height  :7vw;
    right:3vw;
    bottom:3vw;
    /* background-color: rgba(255,0,0,0.2); */
    z-index: 700;
    opacity:0;
}

.guideArrowOverwrap{
    z-index:800;
}
.guideArrow div{
    position:absolute;
    height:8%;
    width:60%;
    background:black;
}
.guideArrow div:nth-child(1){
    transform-origin:bottom right;
    left:50%;
    top:40%;
    transform:
    translateX(-100%)
    rotate(45deg)
        ;
}
.guideArrow div:nth-child(2){
    transform-origin:bottom left;
    right:50%;
    top:40%;
    transform:
    translateX(100%)
    rotate(315deg)
        ;
}
.guideArrow div:nth-child(3){
    transform-origin:bottom right;
    left:50%;
    top:80%;
    transform:
    translateX(-100%) 
    rotate(45deg)
        ;
}
.guideArrow div:nth-child(4){
    
    transform-origin:bottom left;
    right:50%;
    top:80%;
    transform:
    translateX(100%)
    rotate(315deg)
        ;
}

#CurrentTargetLine{
    position:absolute;
    height:1vh;
    width:80vw;
    background:rgba(255,0,0,0.5);
    z-index:9999;
    opacity:0;
    
}

.elementTitle{
    font-size:2rem;
    margin-bottom:1rem;
}