*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{

    background:#050b12;
    color:white;

    font-family:"Segoe UI", Arial, sans-serif;

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

}


.app{

    text-align:center;

}


h1{

    letter-spacing:5px;
    margin-bottom:20px;

    font-size:28px;
    color:#7dd3fc;

}


.compass{

    width:min(90vw,450px);
    height:min(90vw,450px);

    margin:auto;

}


.compass object{

    width:100%;
    height:100%;

    display:block;

}



.data-panel{

    margin-top:20px;

    display:flex;

    justify-content:center;

    gap:20px;

}



.data-panel div{

    background:#111827;

    border:1px solid #334155;

    padding:12px 20px;

    border-radius:10px;

}


.data-panel span{

    display:block;

    font-size:12px;

    color:#94a3b8;

}


.data-panel strong{

    display:block;

    margin-top:5px;

    font-size:22px;

    color:#38bdf8;

}

@media (max-width:600px){

    body{
        align-items:flex-start;
        padding-top:20px;
    }


    .app{

        width:100%;

    }


    h1{

        font-size:20px;

    }


    .compass{

        width:90vw;
        height:90vw;

        max-width:350px;
        max-height:350px;

    }


    .data-panel{

        display:grid;

        grid-template-columns:1fr 1fr;

        padding:10px;

    }


    .data-panel div{

        width:auto;

    }

}

#map{

    width:450px;
    height:300px;

    margin:30px auto;

    border-radius:15px;

    border:1px solid #334155;

}

.compass-marker{

    background:none;
    border:none;

}


#arrow{

    font-size:40px;

    color:#38bdf8;

    text-shadow:
    0 0 10px #38bdf8;

    transition:transform 0.3s;

}

.arrow-container{

    width:40px;
    height:40px;

    display:flex;
    justify-content:center;
    align-items:center;

}


#arrow{

    font-size:35px;

    transform-origin:center;

    transition:transform 0.2s ease;

    color:#38bdf8;

    text-shadow:
    0 0 10px black;

}