:root {
    --map-width: 25rem;
    --map-height: 37.5rem;
    --log-width: 25rem;
    --log-height: 37.5rem;
    --body-flex: row;
    --buttons-flex: column;
}

@media screen and (width < 500px) {
    body {
        --map-width: 95vw;
        --map-height: 95vw;
        --log-width: 95vw;
        --log-height: 142.5vw;
        --body-flex: column;
        --buttons-flex: row;
    }
}

@media screen and (height < 500px) {
    body {
        --map-width: 95vh;
        --map-height: 95vh;
        --log-width: calc(100vw - (95vh + 0.5rem));
        --log-height: 95vh;
        --body-flex: row;
        --buttons-flex: column
    }
}

html, body {
    background-color: white;
    transform: translateZ(0); /* Forces hardware acceleration */
    will-change: transform;   /* Optimizes rendering for transformations */
    overflow-x: hidden;       /* Prevents horizontal scrolling */
  }

body {
    display: flex;
    flex-direction: var(--body-flex);
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

p {
  font-family: "Cutive Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.hide-scrollbar {
  /* For Internet Explorer and Edge */
  -ms-overflow-style: none;
  /* For Firefox */
  scrollbar-width: none;
  /* For Chrome, Safari, and Opera (WebKit browsers) */
  &::-webkit-scrollbar {
    display: none;
  }
}

.selected {
    stroke-width: 5px;
}

#map {
    height : var(--map-height);
    width : var(--map-width);
    border-radius: 0.5rem;
    border:2px solid black;
}

.story-point {
    display: flex;
    flex-direction: column;
}

.log {
    padding: 0.5rem;
    padding-bottom:100vh;
}

.story-point > h2 {
    margin-bottom: 0;
}

.story-point > p {
    margin-top: 0;
}

#log {
    height : var(--log-height);
    width : var(--log-width);
    border-radius: 0.5rem;
    border: 2px solid black;
    overflow-y: auto;
}

#buttons {
    display: flex;
    justify-content: flex-start;
    align-items: start;
    flex-direction: var(--buttons-flex);
    gap: 1rem;
}

#buttons > button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    background-color: white;
    border-radius: 0.5rem;
    border: 2px solid black;
    font-size: 20px;
}