*{margin:0;padding:0;box-sizing:inherit}html{font-size:62.5%;box-sizing:border-box}body{font-family:"Manrope",sans-serif;color:#ececec;font-weight:400;line-height:1.6;height:100vh;overscroll-behavior-y:none;background-color:#fff;padding:2.5rem;text-shadow:.2px .2px .1px #000;display:flex;flex-direction:row-reverse}a:link,a:visited{color:#ffb545}.sidebar{flex-basis:62rem;background:linear-gradient(35deg, #b92b27 0%, rgb(21, 101, 192) 100%);padding:3rem 5rem 4rem 5rem;display:flex;flex-direction:column;background-size:200% 200%;animation:gradient 10s ease infinite}@keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}.header{align-self:center;margin-bottom:2rem;font-size:3.5rem}.workouts{list-style:none;height:77vh;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}.workouts::-webkit-scrollbar{width:0}.workout{backdrop-filter:blur(300px);-webkit-backdrop-filter:blur(300px);border-radius:5px;border:.1px solid gray;padding:1.5rem 2.25rem;margin-bottom:1.75rem;cursor:pointer;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:.75rem 1.5rem}.workout--running{border-bottom:5px solid #f66f21}.workout--cycling{border-bottom:5px solid #00c46a}.workout--swimming{border-bottom:5px solid #5ed9ef}.workout--skiing{border-bottom:5px solid indigo}.workout__title{font-size:1.7rem;font-weight:600;grid-column:1/-1}.workout__details{display:flex;align-items:baseline}.workout__icon{font-size:1.8rem;margin-right:.2rem;height:.28rem}.workout__value{font-size:1.5rem;margin-right:.5rem}.workout__unit{font-size:1.1rem;color:#aaa;text-transform:uppercase;font-weight:800;text-shadow:.2px .2px .1px #000}.form{backdrop-filter:blur(300px);-webkit-backdrop-filter:blur(300px);border:.1px solid gray;border-radius:5px;padding:1.5rem 2.75rem;margin-bottom:1.75rem;display:grid;grid-template-columns:1fr 1fr;gap:.5rem 2.5rem;text-shadow:.2px .2px .1px #000;height:9.25rem;transition:all .5s,transform 1ms}.form.hidden{transform:translateY(-30rem);height:0;padding:0 2.25rem;margin-bottom:0;opacity:0}.form__row{display:flex;align-items:center}.form__row--hidden{display:none}.form__label{flex:0 0 50%;font-size:1.5rem;font-weight:600}.form__input{width:100%;padding:.3rem 1.1rem;font-family:inherit;font-size:1.4rem;border:none;border-radius:3px;background-color:#d6dee0;transition:all .2s;text-shadow:.2px .2px .1px #000}.form__input:focus{outline:none;background-color:#fff}.form__btn{display:none}.copyright{margin-top:auto;font-size:1.3rem;text-align:center;color:#aaa;text-shadow:.2px .2px .1px #000}.twitter-link:link,.twitter-link:visited{color:#aaa;transition:all .2s;text-shadow:.2px .2px .1px #000}.twitter-link:hover,.twitter-link:active{color:#ececec;text-shadow:.2px .2px .1px #000}#map{flex:1;height:100%;background-color:#aaa;cursor:pointer}.leaflet-popup .leaflet-popup-content-wrapper{background-color:#343148;color:#ececec;border-radius:5px;padding-right:.6rem;text-shadow:.2px .2px .1px #000;font-size:1.5rem}.mark-popup .leaflet-popup-content-wrapper{border-bottom:5px solid #f7cac9;text-align:center}.reset-btn{align-self:flex-end;margin-top:auto;padding:1rem 1.5rem;background:hsla(0,0%,100%,.3);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);color:#ececec;border:none;border-radius:5px;cursor:pointer;font-size:1.3rem;font-weight:600;transition:all .3s ease-in-out}.reset-btn:hover{background:hsla(0,0%,100%,.5);transform:scale(1.05)}/*# sourceMappingURL=main.css.map */
/* ============================================================
   RESPONSIVE — the app was a fixed side-by-side (620rem sidebar +
   flex map) that crushes the map on phones. Stack to a column: map
   on top with an explicit height (its height:100% would collapse to
   0 once body height is auto), sidebar full-width below.
   ============================================================ */
@media (max-width: 760px) {
    body {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        padding: 1.2rem;
    }
    #map {
        flex: none;
        order: -1;
        width: 100%;
        height: 45vh;
        min-height: 280px;
        border-radius: 5px;
        margin-bottom: 1.2rem;
    }
    .sidebar {
        flex-basis: auto;
        width: 100%;
        padding: 2rem 1.6rem 2.4rem;
    }
    .header {
        font-size: 2.8rem;
        margin-bottom: 1.5rem;
    }
    .workouts {
        height: auto;
        max-height: 46vh;
    }
    .form {
        height: auto;
        padding: 1.5rem 1.6rem;
    }
    .form.hidden {
        padding: 0 1.6rem;
    }
}

@media (max-width: 400px) {
    .workout {
        grid-template-columns: 1fr 1fr;
    }
    .sidebar {
        padding: 1.6rem 1.2rem 2rem;
    }
}


/* ============ ATLAS premium black restyle ============ */
body{background-color:#0b0c0e!important;text-shadow:none!important}
.sidebar{background:#0e0f12!important;animation:none!important;border-right:1px solid #23242a;
  box-shadow:inset -1px 0 0 rgba(217,164,65,.08)}
.header--brand{display:flex;align-items:center;justify-content:center;gap:12px;
  font-weight:800;letter-spacing:.34em;font-size:2.6rem!important;color:#f2f0ea;margin-bottom:2.4rem!important}
.brand-mark{width:38px;height:34px;flex:none}
.workout{background:#15161a!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border:1px solid #24262c!important;border-radius:10px!important;transition:border-color .25s,transform .25s}
.workout:hover{border-color:#D9A441!important;transform:translateY(-1px)}
.workout__unit{color:#8f8a7f!important;text-shadow:none!important}
.form{background:#15161a!important;border:1px solid #24262c!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.form__input{background:#0e0f12!important;color:#f2f0ea!important;border:1px solid #2a2c33!important}
.form__input:focus{background:#0e0f12!important;border-color:#D9A441!important}
.reset-btn{background:transparent!important;border:1px solid #D9A441!important;color:#D9A441!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;font-weight:700}
.reset-btn:hover{background:#D9A441!important;color:#0b0c0e!important;transform:none!important}
.copyright,.twitter-link:link,.twitter-link:visited{color:#6b675e!important}
a:link,a:visited{color:#D9A441}
.leaflet-popup .leaflet-popup-content-wrapper{background:#15161a!important;border:1px solid #D9A441!important;color:#f2f0ea!important}
#map{filter:grayscale(.35) brightness(.92) contrast(1.05)}