:root {
  --header-height: 50px;
}

.unselectable {
    user-select: none;
}

body {
    height: 100svh;
    overscroll-behavior-y: contain; /* Disable refresh behaviour */
}

.scroll-container-v {
    height: calc(100svh - var(--header-height));
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.section-v {
    height: calc(100svh - var(--header-height));
    /* If consider compatibility:
        google, safari:
        height: -webkit-calc(100svh - var(--header-height));
        firefox:
        height: -moz-calc(100% - 65px);
        opera:
        height: -o-calc(100% - 65px);
     */
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    position: relative;
}

.section-v.end {
    height: 30vh;
    scroll-snap-align: end;
}

.flex-center-all {
    display: flex;
    justify-content: center;
    align-items: center;;
}

.scroll-down-hint {
    position: absolute;
    bottom: 5px;
    color: #00000040;
    width: 100%;
    text-align: center;
    animation: bounce 0.8s infinite;
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translateY(-10px);
    animation-timing-function: ease-in;
  }
}

header {
    height: var(--header-height);
    background-color: lightblue;
}

footer {
    background-color: lightgray;
}