body {

margin:0;

background:#111;

color:#eee;

font-family:Arial, Helvetica, sans-serif;

}



.container {

max-width:1200px;

margin:auto;

padding:20px;

}



header {

text-align:center;

margin-bottom:20px;

}


h1 {

font-size:34px;

margin:0;

}



.subtitle {

color:#aaa;

margin-top:8px;

}



/* VIDEO */


.video-box {

position:relative;

background:black;

border-radius:12px;

overflow:hidden;

box-shadow:
0 0 25px rgba(0,0,0,.6);

}



video {

width:100%;

display:block;

}



.timestamp {

    position:absolute;

    bottom:40px;

    left:20px;

    background:rgba(0,0,0,0.45);

    color:white;

    padding:clamp(1px, 0.3vw, 3px) clamp(2px, 0.5vw, 6px);

    border-radius:4px;

    font-size:clamp(7px, 1vw, 14px);

    font-weight:bold;

    z-index:10;

    text-shadow:
    1px 1px 3px black;

}

@keyframes pulse {

0% {
    opacity:1;
}

50% {
    opacity:.3;
}

100% {
    opacity:1;
}

}


/* PANORAMA MARKER */


.marker {

    position:absolute;

}


.marker .dot {

    position:absolute;

    left:0;
    bottom:0;

    width:6px;
    height:6px;

    background:white;

    border-radius:50%;

    transform:translateX(-50%);

    box-shadow:
    0 0 3px black;

    display:none;
}


.marker .line-box {

    position:absolute;

    bottom:2px;

    left:0;

    height:var(--line-height);

}


.marker .line {

    width:1px;

    height:100%;

    background:rgba(255,255,255,0.7);

    box-shadow:
    0 0 3px black;

}


.marker .label {

    position:absolute;

    left:4px;

    top:-4px;

    background:rgba(0,0,0,0.45);

    padding:clamp(1px, 0.3vw, 3px) clamp(2px, 0.5vw, 6px);

    border-radius:5px;

    color:white;

    font-size:clamp(7px, 1vw, 14px);

    font-weight:bold;

    white-space:nowrap;

}

.label-left .label {

    left:auto;

    right:4px;

    top:-4px;

}

.label-top .label {
    left:50%;
    top:-4px;
    transform:translateX(-50%) translateY(-100%);
}

.marker .label a,
.marker .label a:visited,
.marker .label a:active {
    color: white !important;
    text-decoration: none !important;
}

.marker .label a:hover {
    text-decoration: none !important;
}

.card {

margin-top:20px;

background:#1c1c1c;

padding:20px;

border-radius:10px;

line-height:1.5;

}


#map {

height:350px;

margin-top:20px;

border-radius:10px;

}



footer {

text-align:center;

color:#777;

font-size:13px;

margin-top:25px;

}