@media (pointer: fine) {
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        background: #020514;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.10);
    }

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.30);
    }
}


.tz::-webkit-scrollbar {
  width: 0;
  height: 0;
}

img, a{
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;
    -o-user-drag: none;
}
body{
    font-family: system-ui, sans-serif;
    font-size:1em;
    background:#070707;
    color:#fff;
    /*touch-action:manipulation;*/
    margin: 0;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust:100%;
    -moz-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
}
img{
    margin: 30px 0;
    width: 100%;
}
h1{
    margin-top:60px;
}
p{
    font-size: small;
    line-height: 20px;
    color:#999;
}

input:not([type="checkbox"]):not([type="radio"]){
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}

.modalLocale{
    position: fixed;
    top: 0;
    bottom: 100%;
    left: 0;
    right: 0;
    background: #020514;
    overflow: hidden;
}

.modalInfo{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 200%;
    right: 0;
    z-index: 2;
    background: #020514;
}
.modalGyro{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 200%;
    right: 0;
    background: #020514;
    z-index: 1;
    overflow: hidden;
}
.modalTimeLine{
    background: #000;
    height: 0;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    font-size: small;
    text-transform: capitalize;
    transition: .4s;
    min-width: 240px;
}
.modalSystem {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: hidden;
    background: #070707;
    transition: .4s;
}

.modalInfo>.container{
    height: 100%;
    padding: 0 30px;
    word-break: break-word;
    overflow: auto;
}
@media (min-width: 1200px) {
    .modalInfo>.container{
        padding: 0 50px;
    }
}

.modalSystem.modalLocaleOn, .modalInfo.modalLocaleOn, .modalGyro.modalLocaleOn{
    top: 50%;
    transition: .4s;
}
.modalLocale.modalLocaleOn{
    bottom: 50%;
    transition: .4s;
}
@media screen and (orientation: portrait) {
    .modalSystem.modalLocaleOn, .modalInfo.modalLocaleOn, .modalGyro.modalLocaleOn{
        top: 55.5vw;
    }
    .modalLocale.modalLocaleOn{
        bottom: calc(100% - 55.5vw);
    }
}

.modalSystem.modalInfoOn, .modalSystem.modalGyroOn{
    right: 50%;
    transition: .4s;
}
.modalInfo.modalInfoOn, .modalGyro.modalGyroOn{
    left: 50%;
    transition: .4s;
}
.modalTimeLine.modalInfoOn, .modalTimeLine.modalGyroOn{
    right: 50%;
}

.modalSystem.modalTimeLineOn{
    bottom: 60px;
}


@media (max-width: 1000px) {
    .modalSystem.modalInfoOn, .modalSystem.modalGyroOn{
        right: 0;
    }
    .modalInfo.modalInfoOn, .modalGyro.modalGyroOn{
        left: 0;
    }
    .modalTimeLine.modalInfoOn, .modalTimeLine.modalGyroOn{
        right: 0;
    }
    .modalGyro.modalTimeLineOn{
        bottom: 60px;
    }
    .modalGyro{
        z-index: 0;
    }
}

@media (min-width: 700px) {
    .gps, .close{
        top: 10px!important;
    }
}
.donation{
    outline: 1px #353535 solid;
    margin: 30px 0;
    padding: 10px;
    background: #02040e;
    border-radius: 10px;
}
.loading{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 350px;
    width: 70vw;
    height: fit-content;
    font-size: small;
    text-align: center;
}
.loadingBlock{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    visibility: hidden;
    outline: 1px #444 solid;
}
.loadingBlock>div{
    display: inline-block;
    width: 14px;
    min-width: 2px;
    height: 2px;
}
.mainCanvas, .gyroCanvas, .gyroCanvasText{
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: -100%;
    bottom: 0;
    right: -100%;
    margin: auto;
}

.gyroCanvasText{
    opacity: 0;
}

.controlSystem{
    width: 100%;
    height: 100%;
    position: absolute;
}

.offsetTimeLine{
    position: absolute;
    top: -120px;
    left: 0;
    right: 0;
    height: 110px;
    margin: auto;
    text-align: center;
    pointer-events: none;
}
.time{
    font-size: larger;
    cursor: pointer;
    width: fit-content;
    margin: 0 auto 10px;
    pointer-events: auto;
}




.controlTimeLine{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}


.buttonLocale{
    position: absolute;
    top: 10px;
    left: 10px;
    right: 90px;
    display: flex;
    align-items: center;
    cursor: pointer;
    z-index: 1;
    padding: 15px 10px 15px 40px;
    opacity: .7;
    font-size: small;
    max-width: fit-content;
    border-radius: 15px;
}
.buttonLocale:before{
    content:"";
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-block;
    width: 20px;
    height: 24px;
    margin-right: 10px;
}



.noticeGyro{
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    left: 0;
    z-index: 1;
    font-size: small;
    text-align: center;
    background: #121633b5;
    color: #999;
    width: fit-content;
    height: fit-content;
    padding: 10px;
    border-radius: 10px;
    pointer-events: none;
    margin: auto;
    transition: 2s;
}


.noticeCalibration{
    position: absolute;
    right: 20px;
    bottom: 0;
    top: 0;
    left: 20px;
    z-index: 1;
    font-size: small;
    text-align: center;
    background: #1d1d1d;
    color: #fff;
    height: 300px;
    min-width: 200px;
    max-width: 300px;
    padding-top: 20px;
    border-radius: 10px;
    margin: auto;
}
.noticeCalibration > .animCalibration{
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
}
.noticeCalibration > .hideNotice{
    margin: 20px auto;
    color: #9b9b9b;
}
.noticeCalibration input{
    vertical-align: sub;
    width: 32px;
    height: 16px;
}
.noticeCalibration > .accept{
    background: #fff;
    color: #1d1d1d;
    font-weight: bold;
    width: fit-content;
    margin: auto;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}



.noticeGPS{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    font-size: small;
    text-align: center;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: .4s;
}
.projection{
    position: relative;
    aspect-ratio: 2/1;
    height: 90%;
    margin: auto;
}
.projectionSun{
    position: absolute;
    overflow: visible;
}
.projectionLight{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

.projectionSun>path{
    -webkit-filter: blur(4px);
    filter: blur(4px);
    fill: #000a;
}

.latitudeCurrnet{
    position: absolute;
    top: 40px;
    width: 100%;
    height: 1px;
    background: white;
}
.latitudeCurrnet>div{
    position: absolute;
    font-size: x-small;
    margin: 5px;
}
.durationCurrnet{
    position: absolute;
    bottom:0;
    margin: 20px 30px;
    font-size: small;
    text-shadow: 0 0 5px black;
}
.longitudeCurrnet{
    position: absolute;
    left: 40px;
    width: 1px;
    height: 100%;
    background: white;
}
.longitudeCurrnet>div{
    position: absolute;
    font-size: x-small;
    margin: 5px;
}

.tz{
    aspect-ratio: 18/1;
    min-width: 40vh;
    max-height: 10%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    overflow-x: scroll;
    background: none;
}
.tz>div{
    font-size: xx-small;
    width: 4.1666%;
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

@media screen and (max-width: 600px), screen and (max-height: 600px) {
    .tz>div{
        font-size: .4em;
    }
}

.tz>div:first-of-type, .tz>div:last-of-type{
    width: 2.0833%;
}
.tzCurrnet{
    background: #fff;
    color: #000;
    pointer-events: none;
}




.gps{
    display:none;
    position: absolute;
    top: 10px;
    left: 10px;
    background: #020514c7;
}
.close{
    position: absolute;
    top: 10px;
    right: 10px;
    background: #020514c7;
}
.info{
    position: absolute;
    top: 10px;
    right: 10px;
}
.gyro{
    position: absolute;
    top: 10px;
    right: 55px;
}


.sound{
    display: none;
    position: absolute;
    right: 10px;
    bottom: 0;

}
.rew, .ff, .play, .pause{
    display: inline-block;
}
.rew{
    transform: scaleX(-1);
}
.timeLine{
    display: inline-block;
    position: absolute;
    left: 10px;
    bottom: 0;
}
.timeLineClose{
    transform: scaleY(-1);
}

.button{
    border-radius: 50%;
    margin: auto;
    cursor: pointer;
    z-index: 3;
    opacity: .7;
    padding: 15px;
    width: 15px;
    height: 15px;
    pointer-events: auto;
}
.buttonCurrnet{
    opacity:1;
    pointer-events: none;
}
.buttonInstallPwa{
    display: inline-block;
    border: 2px #e79b3a solid;
    border-radius: 50px;
    width: fit-content;
    padding: 10px;
    font-size: small;
    color: #e79b3a;
    margin: 0 30px 18px 0;
    cursor: pointer;
}
.A2HS{
    margin-right: 30px;
    font-size: small;
    color: #999;
    line-height: 20px;
}

.buttonLocale, .gyro, .info, .timeLine, .sound,
.viewControl .button {
    opacity: .3;
}


:focus{
    outline: none;
}
.button:focus-visible, .buttonLocale:focus-visible{
    opacity: 1;
    background-color: #fff3;
}
.tz>div:focus-visible{
    background: #fffd;
    color: #000a;
}
.buttonInstallPwa:focus-visible{
    background: #a06c29;
    color: #000;
}

@media (hover: hover) {
    .button:hover, .buttonLocale:hover{
        opacity: 1;
    }
    .tz>div:hover{
        background: #fffd;
        color: #000a;
    }
    .buttonInstallPwa:hover{
        background: #c17f2a;
        color: #000;
    }
    a:hover, .time:hover {
        opacity: .8;
    }
}

.button:active, .buttonLocale:active{
    opacity: 1;
    background-color: #fff3;
}
.tz>div:active{
    background: #fff;
    color: #000;
}
.buttonInstallPwa:active{
    background: #e79b3a;
    color: #000;
}

a{
    color: #e79b3a;
}
.lang{
    margin: 20px 30px 20px 0;
    display: inline-block;
    word-break: keep-all;
    font-size: small;
}
.lang>a{
    margin: 5px 10px 5px 0;
    display: inline-block;
}
.onlineInfo, .within30daysInfo{
    font-size: small;
    color: #999;
    line-height: 20px;
}
.flex{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.flag{
    width: 20px;
    height: 14px;
    margin: 2px;
    border-radius: 1px;
    background-repeat: no-repeat;
    background-position: center;
}
.onlineInfo{
    margin-right: 10px;
}

.onlineOnly{
    display: none;
    margin-top: 10px;
}
.crypto{
    font-size: x-small;
    line-height: 20px;
    color: #999;
    width: fit-content;
}
.crypto>div{
    margin-bottom: 10px;
    cursor: pointer;
}
.wallet{
    word-break: break-all;
}


.copyright{
    text-align: center;
    margin-top: 40px;
}

.gravityLine{
    position: absolute;
    top: 0;
    height: 70px;
}





.controlRotor {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}
.layer1 {
    position: absolute;
    width: 100%;
    height: 100%;
    perspective: 800px;
}
.layer2 {
    position: absolute;
    width: 100%;
    height: 100%;
    /*perspective: 800px;*/
}
.rotor1 {
    transform-style: preserve-3d;
    transform: matrix3d(1,0,0,0,0,0,1,0,0,-1,0,0,0,0,800,2);
    position: absolute;
    top: 0;
    left: -50%;
    bottom: 0;
    right: -50%;
}

.rotor2 {
    width: 10vw;
    height: 10vw;
    max-width: 50px;
    max-height: 50px;
    margin: auto;
    position: absolute;
    left: 0;
    bottom: 20vh;
    right: 0;
    transform-style: preserve-3d;
}




.eclipticGyro {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 300px;
    width: 300px;
    /*background-color: #fff5;*/
    transform: rotateX(23deg);
    border-radius: 50%;
    border: 1px #bbb solid;
    transform-style: preserve-3d;
}
.eclipticCenterGyro {
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform-style: preserve-3d;
}

.sunGyro {
    height: 30px;
    width: 30px;
    margin: auto;
    transform: rotateX(90deg) translateZ(164px) translateX(-15px);
    border-radius: 50%;
    background: #fdff95aa;
}
.moonGyro {
    height: 25px;
    width: 25px;
    margin: auto;
    border-radius: 50%;
    background: #bbb;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}
.moonShadowGyro>path{
    fill: #020514bf;
}

.moonOrbitGyro {
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 300px;
    width: 300px;
    transform: rotateX(-90deg) rotateZ(0deg);
    border-radius: 50%;
    /*border: 2px #bbb solid;*/
    /*border-style: dotted;*/
}


.earthGyro {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 78vw;
    width: 78vw;
    max-width: 296px;
    max-height: 296px;
    background-color: #1b1e2bd9;
    transform: translateZ(-5px);
    border-radius: 50%;
    transform-style: preserve-3d;
}



.sunClockGyro {
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.sunClockGyro>div {
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.sunClockGyro>div>div {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: fit-content;
    width: fit-content;
    margin: auto;
    font-size: x-small;
    color: #fff;
    backface-visibility: hidden;
}


.sunClockGyro>.outside>div:nth-of-type(1) {
    transform: rotateZ(0deg) rotateX(90deg) translateZ(170px);
}
.sunClockGyro>.outside>div:nth-of-type(2) {
    transform: rotateZ(15deg) rotateX(90deg) translateZ(170px);
}
.sunClockGyro>.outside>div:nth-of-type(3) {
    transform: rotateZ(30deg) rotateX(90deg) translateZ(170px);
}
.sunClockGyro>.outside>div:nth-of-type(4) {
    transform: rotateZ(45deg) rotateX(90deg) translateZ(170px);
}
.sunClockGyro>.outside>div:nth-of-type(5) {
    transform: rotateZ(60deg) rotateX(90deg) translateZ(170px);
}
.sunClockGyro>.outside>div:nth-of-type(6) {
    transform: rotateZ(75deg) rotateX(90deg) translateZ(170px);
}
.sunClockGyro>.outside>div:nth-of-type(7) {
    transform: rotateZ(90deg) rotateX(90deg) translateZ(170px);
}
.sunClockGyro>.outside>div:nth-of-type(8) {
    transform: rotateZ(105deg) rotateX(90deg) translateZ(170px);
}
.sunClockGyro>.outside>div:nth-of-type(9) {
    transform: rotateZ(120deg) rotateX(90deg) translateZ(170px);
}
.sunClockGyro>.outside>div:nth-of-type(10) {
    transform: rotateZ(135deg) rotateX(90deg) translateZ(170px);
}
.sunClockGyro>.outside>div:nth-of-type(11) {
    transform: rotateZ(150deg) rotateX(90deg) translateZ(170px);
}
.sunClockGyro>.outside>div:nth-of-type(12) {
    transform: rotateZ(165deg) rotateX(90deg) translateZ(170px);
}
.sunClockGyro>.outside>div:nth-of-type(13) {
    transform: rotateZ(180deg) rotateX(90deg) translateZ(170px);
}
.sunClockGyro>.outside>div:nth-of-type(14) {
    transform: rotateZ(195deg) rotateX(90deg) translateZ(170px);
}
.sunClockGyro>.outside>div:nth-of-type(15) {
    transform: rotateZ(210deg) rotateX(90deg) translateZ(170px);
}
.sunClockGyro>.outside>div:nth-of-type(16) {
    transform: rotateZ(225deg) rotateX(90deg) translateZ(170px);
}
.sunClockGyro>.outside>div:nth-of-type(17) {
    transform: rotateZ(240deg) rotateX(90deg) translateZ(170px);
}
.sunClockGyro>.outside>div:nth-of-type(18) {
    transform: rotateZ(255deg) rotateX(90deg) translateZ(170px);
}
.sunClockGyro>.outside>div:nth-of-type(19) {
    transform: rotateZ(270deg) rotateX(90deg) translateZ(170px);
}
.sunClockGyro>.outside>div:nth-of-type(20) {
    transform: rotateZ(285deg) rotateX(90deg) translateZ(170px);
}
.sunClockGyro>.outside>div:nth-of-type(21) {
    transform: rotateZ(300deg) rotateX(90deg) translateZ(170px);
}
.sunClockGyro>.outside>div:nth-of-type(22) {
    transform: rotateZ(315deg) rotateX(90deg) translateZ(170px);
}
.sunClockGyro>.outside>div:nth-of-type(23) {
    transform: rotateZ(330deg) rotateX(90deg) translateZ(170px);
}
.sunClockGyro>.outside>div:nth-of-type(24) {
    transform: rotateZ(345deg) rotateX(90deg) translateZ(170px);
}

.clockMirror>.outside>div:nth-of-type(1) {
    transform: rotateZ(0deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleX(-1);
}
.clockMirror>.outside>div:nth-of-type(2) {
    transform: rotateZ(15deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleX(-1);
}
.clockMirror>.outside>div:nth-of-type(3) {
    transform: rotateZ(30deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleX(-1);
}
.clockMirror>.outside>div:nth-of-type(4) {
    transform: rotateZ(45deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleX(-1);
}
.clockMirror>.outside>div:nth-of-type(5) {
    transform: rotateZ(60deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleX(-1);
}
.clockMirror>.outside>div:nth-of-type(6) {
    transform: rotateZ(75deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleX(-1);
}
.clockMirror>.outside>div:nth-of-type(7) {
    transform: rotateZ(90deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleX(-1);
}
.clockMirror>.outside>div:nth-of-type(8) {
    transform: rotateZ(105deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleX(-1);
}
.clockMirror>.outside>div:nth-of-type(9) {
    transform: rotateZ(120deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleX(-1);
}
.clockMirror>.outside>div:nth-of-type(10) {
    transform: rotateZ(135deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleX(-1);
}
.clockMirror>.outside>div:nth-of-type(11) {
    transform: rotateZ(150deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleX(-1);
}
.clockMirror>.outside>div:nth-of-type(12) {
    transform: rotateZ(165deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleX(-1);
}
.clockMirror>.outside>div:nth-of-type(13) {
    transform: rotateZ(180deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleX(-1);
}
.clockMirror>.outside>div:nth-of-type(14) {
    transform: rotateZ(195deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleX(-1);
}
.clockMirror>.outside>div:nth-of-type(15) {
    transform: rotateZ(210deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleX(-1);
}
.clockMirror>.outside>div:nth-of-type(16) {
    transform: rotateZ(225deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleX(-1);
}
.clockMirror>.outside>div:nth-of-type(17) {
    transform: rotateZ(240deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleX(-1);
}
.clockMirror>.outside>div:nth-of-type(18) {
    transform: rotateZ(255deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleX(-1);
}
.clockMirror>.outside>div:nth-of-type(19) {
    transform: rotateZ(270deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleX(-1);
}
.clockMirror>.outside>div:nth-of-type(20) {
    transform: rotateZ(285deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleX(-1);
}
.clockMirror>.outside>div:nth-of-type(21) {
    transform: rotateZ(300deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleX(-1);
}
.clockMirror>.outside>div:nth-of-type(22) {
    transform: rotateZ(315deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleX(-1);
}
.clockMirror>.outside>div:nth-of-type(23) {
    transform: rotateZ(330deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleX(-1);
}
.clockMirror>.outside>div:nth-of-type(24) {
    transform: rotateZ(345deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleX(-1);
}







.sunClockGyro>.inside>div:nth-of-type(1) {
    transform: rotateZ(0deg) rotateX(90deg) translateZ(170px) scaleX(-1) scaleZ(-1);
}
.sunClockGyro>.inside>div:nth-of-type(2) {
    transform: rotateZ(15deg) rotateX(90deg) translateZ(170px) scaleX(-1) scaleZ(-1);
}
.sunClockGyro>.inside>div:nth-of-type(3) {
    transform: rotateZ(30deg) rotateX(90deg) translateZ(170px) scaleX(-1) scaleZ(-1);
}
.sunClockGyro>.inside>div:nth-of-type(4) {
    transform: rotateZ(45deg) rotateX(90deg) translateZ(170px) scaleX(-1) scaleZ(-1);
}
.sunClockGyro>.inside>div:nth-of-type(5) {
    transform: rotateZ(60deg) rotateX(90deg) translateZ(170px) scaleX(-1) scaleZ(-1);
}
.sunClockGyro>.inside>div:nth-of-type(6) {
    transform: rotateZ(75deg) rotateX(90deg) translateZ(170px) scaleX(-1) scaleZ(-1);
}
.sunClockGyro>.inside>div:nth-of-type(7) {
    transform: rotateZ(90deg) rotateX(90deg) translateZ(170px) scaleX(-1) scaleZ(-1);
}
.sunClockGyro>.inside>div:nth-of-type(8) {
    transform: rotateZ(105deg) rotateX(90deg) translateZ(170px) scaleX(-1) scaleZ(-1);
}
.sunClockGyro>.inside>div:nth-of-type(9) {
    transform: rotateZ(120deg) rotateX(90deg) translateZ(170px) scaleX(-1) scaleZ(-1);
}
.sunClockGyro>.inside>div:nth-of-type(10) {
    transform: rotateZ(135deg) rotateX(90deg) translateZ(170px) scaleX(-1) scaleZ(-1);
}
.sunClockGyro>.inside>div:nth-of-type(11) {
    transform: rotateZ(150deg) rotateX(90deg) translateZ(170px) scaleX(-1) scaleZ(-1);
}
.sunClockGyro>.inside>div:nth-of-type(12) {
    transform: rotateZ(165deg) rotateX(90deg) translateZ(170px) scaleX(-1) scaleZ(-1);
}
.sunClockGyro>.inside>div:nth-of-type(13) {
    transform: rotateZ(180deg) rotateX(90deg) translateZ(170px) scaleX(-1) scaleZ(-1);
}
.sunClockGyro>.inside>div:nth-of-type(14) {
    transform: rotateZ(195deg) rotateX(90deg) translateZ(170px) scaleX(-1) scaleZ(-1);
}
.sunClockGyro>.inside>div:nth-of-type(15) {
    transform: rotateZ(210deg) rotateX(90deg) translateZ(170px) scaleX(-1) scaleZ(-1);
}
.sunClockGyro>.inside>div:nth-of-type(16) {
    transform: rotateZ(225deg) rotateX(90deg) translateZ(170px) scaleX(-1) scaleZ(-1);
}
.sunClockGyro>.inside>div:nth-of-type(17) {
    transform: rotateZ(240deg) rotateX(90deg) translateZ(170px) scaleX(-1) scaleZ(-1);
}
.sunClockGyro>.inside>div:nth-of-type(18) {
    transform: rotateZ(255deg) rotateX(90deg) translateZ(170px) scaleX(-1) scaleZ(-1);
}
.sunClockGyro>.inside>div:nth-of-type(19) {
    transform: rotateZ(270deg) rotateX(90deg) translateZ(170px) scaleX(-1) scaleZ(-1);
}
.sunClockGyro>.inside>div:nth-of-type(20) {
    transform: rotateZ(285deg) rotateX(90deg) translateZ(170px) scaleX(-1) scaleZ(-1);
}
.sunClockGyro>.inside>div:nth-of-type(21) {
    transform: rotateZ(300deg) rotateX(90deg) translateZ(170px) scaleX(-1) scaleZ(-1);
}
.sunClockGyro>.inside>div:nth-of-type(22) {
    transform: rotateZ(315deg) rotateX(90deg) translateZ(170px) scaleX(-1) scaleZ(-1);
}
.sunClockGyro>.inside>div:nth-of-type(23) {
    transform: rotateZ(330deg) rotateX(90deg) translateZ(170px) scaleX(-1) scaleZ(-1);
}
.sunClockGyro>.inside>div:nth-of-type(24) {
    transform: rotateZ(345deg) rotateX(90deg) translateZ(170px) scaleX(-1) scaleZ(-1);
}

.clockMirror>.inside>div:nth-of-type(1) {
    transform: rotateZ(0deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleZ(-1);
}
.clockMirror>.inside>div:nth-of-type(2) {
    transform: rotateZ(15deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleZ(-1);
}
.clockMirror>.inside>div:nth-of-type(3) {
    transform: rotateZ(30deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleZ(-1);
}
.clockMirror>.inside>div:nth-of-type(4) {
    transform: rotateZ(45deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleZ(-1);
}
.clockMirror>.inside>div:nth-of-type(5) {
    transform: rotateZ(60deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleZ(-1);
}
.clockMirror>.inside>div:nth-of-type(6) {
    transform: rotateZ(75deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleZ(-1);
}
.clockMirror>.inside>div:nth-of-type(7) {
    transform: rotateZ(90deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleZ(-1);
}
.clockMirror>.inside>div:nth-of-type(8) {
    transform: rotateZ(105deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleZ(-1);
}
.clockMirror>.inside>div:nth-of-type(9) {
    transform: rotateZ(120deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleZ(-1);
}
.clockMirror>.inside>div:nth-of-type(10) {
    transform: rotateZ(135deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleZ(-1);
}
.clockMirror>.inside>div:nth-of-type(11) {
    transform: rotateZ(150deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleZ(-1);
}
.clockMirror>.inside>div:nth-of-type(12) {
    transform: rotateZ(165deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleZ(-1);
}
.clockMirror>.inside>div:nth-of-type(13) {
    transform: rotateZ(180deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleZ(-1);
}
.clockMirror>.inside>div:nth-of-type(14) {
    transform: rotateZ(195deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleZ(-1);
}
.clockMirror>.inside>div:nth-of-type(15) {
    transform: rotateZ(210deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleZ(-1);
}
.clockMirror>.inside>div:nth-of-type(16) {
    transform: rotateZ(225deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleZ(-1);
}
.clockMirror>.inside>div:nth-of-type(17) {
    transform: rotateZ(240deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleZ(-1);
}
.clockMirror>.inside>div:nth-of-type(18) {
    transform: rotateZ(255deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleZ(-1);
}
.clockMirror>.inside>div:nth-of-type(19) {
    transform: rotateZ(270deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleZ(-1);
}
.clockMirror>.inside>div:nth-of-type(20) {
    transform: rotateZ(285deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleZ(-1);
}
.clockMirror>.inside>div:nth-of-type(21) {
    transform: rotateZ(300deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleZ(-1);
}
.clockMirror>.inside>div:nth-of-type(22) {
    transform: rotateZ(315deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleZ(-1);
}
.clockMirror>.inside>div:nth-of-type(23) {
    transform: rotateZ(330deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleZ(-1);
}
.clockMirror>.inside>div:nth-of-type(24) {
    transform: rotateZ(345deg) rotateX(90deg) translateZ(170px) scaleY(-1) scaleZ(-1);
}






.compass3d {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: scaleY(1.5);
}
.north {
    position: absolute;
    height: 100%;
    width: 100%;
    transform-style: preserve-3d;
    transform: scaleY(-1);
}
.north>div {
    position: absolute;
    height: 100%;
    width: 100%;
    transform-style: preserve-3d;
}
.north>div:nth-of-type(1) {
    transform: rotateX(90deg) rotateZ(180deg);
}
.north>div:nth-of-type(2) {
    transform: rotateX(90deg) rotateZ(300deg);
}
.north>div:nth-of-type(3) {
    transform: rotateX(90deg) rotateZ(60deg);
}
.north>div>div{
    width: 100%;
    height: 79%;
    transform: rotateX(68.5deg) scaleZ(-1);
    transform-origin: bottom;
    backface-visibility: hidden;
}
.south {
    transform: scaleY(1);
}


.info4 {
    max-width: 400px;
    margin: 20px auto 0;
    display: block;
}

.info10 {
    margin: 50px 0;
    font-size: xx-small;
    line-height: 15px;
    display: flex;
    overflow: hidden;
    mix-blend-mode: difference;
}
.info10>div {
    position: relative;
    width: 100%;
}
.info10>div>b {
    font-size: medium;
    font-weight: normal;
    display: block;
    margin-top: 30px;
    margin-bottom: 15px;
}
.info10>div:nth-of-type(1) {
    margin-left: 10px;
    margin-bottom: 50px;
}
.info10>div:nth-of-type(2) {
    margin-left: 10px;
    margin-right: 10px;
}
.info10>div:nth-of-type(1):before {
    content:"";
    position: absolute;
    right: 0;
    width: 327px;
    height: 327px;
    border-radius: 50%;
    background: #fff;
    mix-blend-mode: exclusion;
    z-index: 1;
}
.info10>div:nth-of-type(2):before {
    content:"";
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
}
.info10>div:nth-of-type(3):before {
    content:"";
    position: absolute;
    width: 1px;
    height: 1px;
    border-radius: 50%;
    background: #fff;
}

.compass2d{
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10%;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 60"><path d="M15 0 30 30 0 30 15 0z" fill="%23870000"/><path d="M0 31 30 31 15 60 0 31z" fill="%23aaa"/></svg>');
    backface-visibility: hidden;
    width: 100%;
    height: 100%;
}
.north>div>div{
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" preserveAspectRatio="none"><path d="M15 0 30 30 0 30 15 0z" fill="%23870000" stroke="%23670000" stroke-width=".5"/></svg>');
    backface-visibility: hidden;
}
.south>div>div{
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" preserveAspectRatio="none"><path d="M15 0 30 30 0 30 15 0z" fill="%23aaa" stroke="%23888" stroke-width=".5"/></svg>');
}

.buttonLocale:before{
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd" viewBox="0 0 1600 1600"><path d="M800 0c442,0 800,358 800,800 0,442 -358,800 -800,800 -442,0 -800,-358 -800,-800 0,-442 358,-800 800,-800zm0 486c73,0 133,60 133,134 0,73 -60,133 -133,133 -74,0 -134,-60 -134,-133 0,-74 60,-134 134,-134zm0 -217c-194,0 -354,151 -354,367 0,78 18,131 52,191l302 504 302 -504c33,-60 52,-113 52,-191 0,-216 -160,-367 -354,-367l0 0z" fill="%23fff"/></svg>');
}
.gps{
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160"><path d="M106 132c7,0 13,-3 18,-8 5,-5 8,-11 8,-18 0,-3 -2,-5 -4,-5 -3,0 -5,2 -5,5 0,5 -2,9 -5,12 -3,3 -8,5 -12,5 -3,0 -5,2 -5,5 0,2 2,4 5,4l0 0zm52 -107l-24 -23c-2,-3 -5,-3 -7,0l-36 35c-2,2 -2,5 0,7l9 9 -8 7 -19 -19c-5,-4 -12,-4 -17,0l-15 15c-4,5 -4,12 0,17l19 19 -7 8 -8 -9c-2,-2 -5,-2 -7,0l-36 36c-3,2 -3,5 0,7l24 24c2,2 5,2 7,0l36 -36c2,-2 2,-5 0,-7l-9 -8 8 -7 11 11c9,9 23,9 32,0 9,-9 9,-23 0,-32l-11 -11 7 -8 8 9c2,2 5,2 7,0l36 -36c2,-2 2,-6 0,-8l0 0zm-15 76c-2,0 -4,2 -4,5 0,9 -4,17 -10,23 -6,6 -14,10 -23,10 -3,0 -5,2 -5,4 0,3 2,5 5,5 11,0 21,-5 29,-13 8,-8 13,-18 13,-29 -1,-3 -2,-5 -5,-5l0 0z" fill="%23fff"/></svg>');
}
.info{
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd" viewBox="0 0 1600 1600"><path d="M800 0c442,0 800,358 800,800 0,442 -358,800 -800,800 -442,0 -800,-358 -800,-800 0,-442 358,-800 800,-800zm106 631l-213 0 0 697 213 0 0 -697zm-106 -359c74,0 133,60 133,133 0,74 -59,134 -133,134 -74,0 -133,-60 -133,-134 0,-73 59,-133 133,-133z" fill="%23fff"/></svg>');
}
.close{
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M1 0 15 14 29 0 30 1 16 15 30 29 29 30 15 16 1 30 0 29 14 15 0 1 1 0z" fill="%23fff"/></svg>');
}
.rew, .ff{
    background-position: center;
    background-repeat: no-repeat;
    background-size: 28px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M0 5 15 15 15 5 30 15 15 25 15 15 0 25 0 5z" fill="%23fff"/></svg>');
}
.play{
    background-position: center;
    background-repeat: no-repeat;
    background-size: 28px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M5 5 25 15 5 25 5 5z" fill="%23fff"/></svg>');
    margin: 0 15px;
}
.pause{
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M5 5 12 5 12 25 5 25 5 5z" fill="%23fff"/><path d="M18 5 25 5 25 25 18 25 18 5z" fill="%23fff"/></svg>');
}
.timeLine{
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M0 18  15 5  30 18  25 23  15 14  5 23  0 18z" fill="%23fff"/></svg>');
}
.gyro{
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd" viewBox="0 0 1600 1600"><path d="M800 0c442,0 800,358 800,800 0,442 -358,800 -800,800 -442,0 -800,-358 -800,-800 0,-442 358,-800 800,-800zm213 267l0 309 0 309 -213 224 -213 224 0 -309 0 -309 213 -224 213 -224zm-213 453c44,0 80,36 80,80 0,44 -36,80 -80,80 -44,0 -80,-36 -80,-80 0,-44 36,-80 80,-80z" fill="%23fff"/></svg>');
}

.sound{
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160"><path d="M127 47l33 0 0 66 -33 0 -59 47 0 -160 59 47zm-74 87c-29,0 -53,-24 -53,-54 0,-30 24,-54 53,-54l0 15c-21,0 -38,18 -38,39 0,21 17,39 38,39l0 15zm0 -26c-15,-1 -27,-13 -27,-28 0,-15 12,-27 27,-28l0 56zm15 -108l59 47 -59 -47z" fill="%23fff"/></svg>');
}
.mute{
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160"><path d="M127 47l33 0 0 66 -33 0 -59 47 0 -160 59 47zm-127 51l18 -18 -18 -18 11 -10 17 17 18 -17 11 10 -18 18 18 18 -11 10 -18 -17 -17 17 -11 -10zm68 -98l59 47 -59 -47z" fill="%23fff"/></svg>');
}
.noticeCalibration{
    background-position-x: center;
    background-position-y: 90%;
    background-repeat: no-repeat;
    background-size: 90%;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 596"><path d="M708 299c-111,61 -218,125 -328,188 -43,25 -112,26 -163,3 -268,-117 -64,-509 164,-381l248 142 79 48zm74 62l20 -12c74,41 148,84 220,126l-17 37 117 -24 -32 -125 -23 36 -180 -103 326 -183c73,-44 169,-25 229,29 84,75 93,204 22,293 -52,65 -143,92 -223,65 -23,-7 -32,-18 -53,-26l-44 72c102,70 227,63 333,-4 136,-86 164,-311 59,-431 -106,-120 -260,-146 -393,-61l-249 145 -92 51 -209 -117c-145,-84 -274,-188 -447,-87 -190,110 -197,396 -5,509 117,69 218,53 328,-13l313 -177z" fill="%23333"/></svg>');
}
.copy{
    display: inline-block;
    height: 20px;
    width: 25px;
    opacity: .7;
    vertical-align: middle;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1125 1362"><path class="fil0" d="M319 1362l806 0 0 -1061 -806 0 0 1061zm-165 -1216l0 987 -154 0 0 -1133 885 0 0 146 -731 0z" fill="%23c1c1c1"/></svg>');
}
.share{
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 2094"><path d="M1414 621l-367 0 0 84 367 0c53,0 98,46 98,99l0 1106c0,54 -45,99 -98,99l-1231 0c-53,0 -98,-45 -98,-99l0 -1106c0,-53 45,-99 98,-99l339 0 0 -84 -339 0c-101,0 -183,82 -183,183l0 1106c0,102 82,184 183,184l1233 0c102,0 184,-82 184,-184l0 -1106c-3,-101 -85,-183 -187,-183l1 0zm-658 -460l0 1196 85 0 0 -1196 186 186 59 -59 -288 -288 -290 288 59 59 189 -186z" fill="%23999"/></svg>');
}
.homescreen{
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd" viewBox="0 0 1600 1600"><path d="M185 0l1230 0c102,0 185,83 185,185l0 1230c0,102 -83,185 -185,185l-1230 0c-102,0 -185,-83 -185,-185l0 -1230c0,-102 83,-185 185,-185zm1146 748l0 104 -479 0 0 479 -104 0 0 -479 -479 0 0 -104 479 0 0 -479 104 0 0 479 479 0z" fill="%23999"/></svg>');
}
.flatEarth{
    pointer-events: none;
    aspect-ratio: 1/1;
    transition: .4s;
    width: 50%;
    max-width: 300px;
    position: absolute;
    bottom: 0;
    right: -50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('data:image/png;base64,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');
}
.sunView{
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 838800 838800' fill='%23fff'%3E%3Cpath d='M419400 0c-106700,0 -203900,40400 -278100,106300 8300,5800 15400,12900 21300,21100 68700,-60500 158400,-97400 256800,-97400 214800,0 389500,174700 389500,389400 0,214800 -174700,389500 -389500,389500 -214800,0 -389400,-174700 -389400,-389500 0,-54900 11500,-107100 32100,-154600 -9600,-3200 -18500,-7800 -26500,-13900 -22700,51600 -35600,108600 -35600,168500 0,231300 188100,419400 419400,419400 231300,0 419400,-188100 419400,-419400 0,-231300 -188100,-419400 -419400,-419400zm280100 281800c0,-33100 -26800,-59900 -59900,-59900 -33100,0 -59900,26800 -59900,59900 0,33100 26800,59900 59900,59900 33100,0 59900,-26800 59900,-59900zm-549700 -102000c0,-33100 -26800,-60000 -59900,-60000 -33100,0 -59900,26900 -59900,60000 0,33000 26800,59900 59900,59900 33100,0 59900,-26900 59900,-59900zm365500 239600c0,-52900 -42900,-95900 -95900,-95900 -52900,0 -95900,43000 -95900,95900 0,53000 43000,95900 95900,95900 53000,0 95900,-42900 95900,-95900zm-371100 0c0,151800 123400,275300 275200,275300 151800,0 275300,-123500 275300,-275300 0,-23900 -3400,-46900 -9200,-69000 -7600,5100 -16300,8700 -25500,11100 4500,18600 7200,37900 7200,57900 0,136600 -111200,247800 -247800,247800 -136600,0 -247700,-111200 -247700,-247800 0,-136600 111100,-247700 247700,-247700 59900,0 114800,21300 157700,56800 6000,-7100 13200,-13100 21300,-17900 -48200,-41300 -110700,-66500 -179000,-66500 -151800,0 -275200,123500 -275200,275300z'/%3E%3C/svg%3E%0A");
}
.mercuryView{
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='fill-rule:evenodd' viewBox='0 0 838800 838800' fill='%23fff'%3E%3Cpath d='M391300 590500l0 91000 -110300 0 0 56300 110300 0 0 101000 56200 0 0 -101000 110300 0 0 -56300 -110300 0 0 -90900c112800,-13500 197900,-107400 197900,-224300 0,-85300 -47300,-159600 -117100,-198000 61800,-33500 105500,-94900 115100,-168300l-57300 0c-14300,79000 -83500,138900 -166700,138900 -83200,0 -152300,-59900 -166700,-138900l-57200 0c9800,72500 54000,134200 115700,167900 -70100,38300 -117700,112800 -117700,198400 0,115300 86300,210400 197800,224200zm197600 -224200c0,-93600 -75900,-169500 -169500,-169500 -93600,0 -169400,75900 -169400,169500 0,93600 75800,169500 169400,169500 93600,0 169500,-75900 169500,-169500z'/%3E%3C/svg%3E%0A");
}
.venusView{
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='fill-rule:evenodd' viewBox='0 0 838800 838800' fill='%23fff'%3E%3Cpath d='M391300 520300l0 91100 -110300 0 0 56200 110300 0 0 101100 56200 0 0 -101100 110300 0 0 -56200 -110300 0 0 -91000c112800,-13500 197900,-107300 197900,-224300 0,-124800 -101200,-225900 -226000,-225900 -124800,0 -225900,101100 -225900,225900 0,115300 86300,210400 197800,224200zm197600 -224200c0,-93600 -75900,-169400 -169500,-169400 -93600,0 -169400,75800 -169400,169400 0,93600 75800,169500 169400,169500 93600,0 169500,-75900 169500,-169500z'/%3E%3C/svg%3E%0A");
}
.earthView{
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='fill-rule:evenodd' viewBox='0 0 838800 838800' fill='%23fff'%3E%3Cpath d='M391300 318500l0 -91000 -110300 0 0 -56300 110300 0 0 -101000 56200 0 0 101000 110300 0 0 56300 -110300 0 0 90900c112800,13500 197900,107400 197900,224300 0,124800 -101200,226000 -226000,226000 -124800,0 -225900,-101200 -225900,-226000 0,-115300 86300,-210400 197800,-224200zm197600 224200c0,93600 -75900,169500 -169500,169500 -93600,0 -169400,-75900 -169400,-169500 0,-93600 75800,-169500 169400,-169500 93600,0 169500,75900 169500,169500z'/%3E%3C/svg%3E%0A");
}
.moonView{
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='fill-rule:evenodd' viewBox='0 0 838800 838800' fill='%23fff'%3E%3Cpath d='M743400 537500c-48900,124800 -170300,213100 -312500,213100 -185300,0 -335500,-150200 -335500,-335500 0,-159100 110700,-292400 259300,-326900 -7400,30900 -23700,123900 -23700,148800 0,168800 136900,305700 305700,305700 22400,0 85900,-3300 106700,-5200zm-459500 -362800c-80800,49500 -134700,138600 -134700,240400 0,155600 126100,281700 281700,281700 87300,0 165300,-39600 217000,-101900 -400,500 -9800,300 -11200,300 -197800,0 -358200,-160300 -358200,-358200 0,-21300 1900,-42100 5400,-62300z'/%3E%3C/svg%3E%0A");
}
.marsView{
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='fill-rule:evenodd' viewBox='0 0 838800 838800' fill='%23fff'%3E%3Cpath d='M466400 332200l174300 -174300 -171600 0 0 -56200 212300 0 53700 0 2600 0 0 268300 -56300 0 0 -173400 -175300 175400c29500,38100 47000,86300 47000,139200 0,124800 -101200,226000 -226000,226000 -124800,0 -225900,-101200 -225900,-226000 0,-124800 101100,-225900 225900,-225900 52900,0 101100,17400 139300,46900zm30200 179000c0,93600 -75900,169500 -169500,169500 -93600,0 -169500,-75900 -169500,-169500 0,-93600 75900,-169500 169500,-169500 93600,0 169500,75900 169500,169500z'/%3E%3C/svg%3E%0A");
}

.jupiterView{
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 838800 838800' fill='%23fff'%3E%3Cpath d='M157100 16400c124800,0 226000,101200 226000,225900 0,67900 -29900,128800 -77300,170200l209500 0 0 -263000 56200 0 0 263000 110800 0 0 56300 -110800 0 0 353700 -56200 0 0 -353700 -358800 0 0 -500 0 -55800 0 -700 600 0c93600,0 169500,-75900 169500,-169500 0,-93600 -75900,-169400 -169500,-169400l-600 0 0 -56500 600 0z'/%3E%3C/svg%3E%0A");
}
.saturnView{
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 838800 838800' fill='%23fff'%3E%3Cpath d='M685600 752800c-1100,400 -127200,39000 -163400,-29300 -25400,-38100 41700,-120000 85700,-199400 54700,-89700 107600,-189300 19000,-284600 -29700,-30500 -90200,-50100 -143600,-43600 -41000,4900 -111900,26300 -182000,106900l0 -127100 110800 0 0 -56300 -110800 0 0 -100900 -56300 0 0 100900 -110800 0 0 56300 110800 0 0 426400 56300 0 0 -204400c71300,-115500 148400,-141200 188800,-146100 43800,-5300 74500,8800 87900,22400 62400,64100 39800,116300 -28300,239300 -52900,95400 -127900,176500 -77200,246200 37000,50700 95900,60900 142400,60900 47500,0 86600,-13700 89700,-14800l-19000 -52800z'/%3E%3C/svg%3E%0A");
}
.uranusView{
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='fill-rule:evenodd' viewBox='0 0 838800 838800' fill='%23fff'%3E%3Cpath d='M229700 206600l149800 -149800 11400 -11400 28500 -28600 40000 40000 149800 149800 -40000 39900 -121800 -121800 0 247100c48200,6000 94800,27500 131800,64500 88200,88200 88200,231300 0,319500 -88200,88300 -231300,88300 -319600,0 -88200,-88200 -88200,-231300 0,-319500 36900,-36900 83300,-58400 131300,-64400l0 -246600 -121300 121200 -39900 -39900zm188300 338900c27700,0 50200,22400 50200,50100 0,27700 -22500,50200 -50200,50200 -27700,0 -50100,-22500 -50100,-50200 0,-27700 22400,-50100 50100,-50100zm121200 -69300c66200,66200 66200,173500 0,239700 -66100,66100 -173400,66100 -239600,0 -66200,-66200 -66200,-173500 0,-239700 66200,-66200 173500,-66200 239600,0z'/%3E%3C/svg%3E%0A");
}
.neptuneView{
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 838800 838800' fill='%23fff'%3E%3Cpath d='M645400 19000c0,115300 -86300,210400 -197900,224200l0 170800 110800 0 0 56200 -110800 0 0 350300 -56200 0 0 -350300 -110800 0 0 -56200 110800 0 0 -170800c-111500,-13800 -197800,-108900 -197800,-224200l0 -600 56500 0 -100 600c0,84000 61200,153800 141400,167200l0 -39800 56200 0 0 39800c80200,-13400 141400,-83200 141400,-167200l0 -600 56500 0 0 600z'/%3E%3C/svg%3E%0A");
}


#google_translate_element {
  display:none;
}


.viewControl{
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    margin: auto;
    height: 280px;
    pointer-events: none;
    /*border-radius: 30px;*/
    /*background: #070707a8;*/
}
.viewControl.viewControlRight{
    right: 10px;
    left: auto;
}
.viewControl .ready{
    opacity: .7;
}
.planetInfo{
    position: absolute;
    top: 15vh;
    right: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
    line-height: 1;
    pointer-events: none;
    transition: 9s;
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    padding: 0 60px;
    opacity: .6;
}

.planetInfo > div:first-child{
    font-size: 4em;
    margin-bottom: 15px;
}
.planetInfo > div:last-child{
    line-height: 1.8;
    font-size: small;
}

@media (max-width: 700px) {
    .planetInfo > div:first-child{
        font-size: 3em;
        margin-bottom: 15px;
    }
    .planetInfo > div:last-child{
        line-height: 1.4;
        font-size: 0.7em;
    }
}
@media (min-width: 1024px) {
    .planetInfo{
        bottom: 0;
        min-width: 30%;
    }
}


.actionNotice{
    position: absolute;
    bottom: 20vh;
    left: 0;
    right: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
    pointer-events: none;
    transition: 2s;
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    font-size: x-large;
    font-weight: bold;
    opacity: .15;
}


.selfMode {
    cursor: none;
}
.selfMode .buttonLocale, .selfMode .button {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 3s;
}
.selfMode .time{
    opacity: .3;
    transition: 3s;
}




.modal{
    position: fixed;
    top: 0;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.modalBlock{
    position: absolute;
    left: 60px;
    right: 60px;
    bottom: 21vh;
    height: fit-content;
    min-width: 160px;
    max-width: 500px;
    margin: auto;
    padding: 15px 30px;
    box-sizing: border-box;
    backdrop-filter: blur(2px);
    outline: 1px #333 solid;
    border-radius: 10px;
    pointer-events: auto;
}
.modalInputBlock{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: small;
}
.modalInputBlock > div{
    margin-bottom: 10px;
}
.modalInputBlock input, .modalInputBlock select{
    display: block;
    max-width: 110px;
    padding: 15px;
    margin-top: 5px;
    border: none;
    font-style: initial;
    font-size: 1.5em;
    box-sizing: border-box;
}
.modalInputBlock select{
    max-width: 150px;
    height: 53px;
    text-transform: capitalize;
}
@media (max-width: 540px) {
    .modalBlock{
        top: 0;
        bottom: 2vh;
        max-width: 230px;
    }
    .modalInputBlock{
        flex-direction: column;
    }
    .modalInputBlock input, .modalInputBlock select{
        max-width: none;
        width: 100%;
    }
}

.enterDate{
    width: 100%;
    height: fit-content;
    background: #131e55;
    border-radius: 10px;
    box-sizing: border-box;
    text-align: center;
}