.scroll {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: calc(100dvh - clamp(60px, 19dvh, 170px));
    }

    .scroll__container {
        width: 92%;
        max-width: 800px;
        box-sizing: border-box;
        background: rgb(255, 255, 255, 0.8);
        padding-left: 45px;
        padding-right: 45px;
        padding-bottom: 160px;
        position: relative;
    }

    .scroll__sentinel {
        position: absolute;
        top: 30dvh;
        left: 0;
        width: 10px;
        height: 10px;
    }

    .scroll__arrow {
        width: 35px;
        height: 35px;
        position: relative;
        top: 5px;
        left: 50%;
        right: 50%;
        transform: translate(-50%) rotate(180deg);
        transition:opacity .3s ease;
    }

    .scroll__arrow.hidden{
        opacity:0;
    }

    .scroll__title {
        text-align: center;
        font-size: 48px;
    }

    .scroll a {
        color: var(--primary);
        cursor: pointer;
        pointer-events: auto;
    }

    .scroll a:hover {
        color: var(--primary-muted);
        text-decoration: underline;
    }

    .scroll button {
        padding: 15px;
        border-radius: 0 !important;
        background-color: var(--primary);
        color: #fff;
        border: none;
        font-size: 0.9rem;
        font-weight: bold; 
        transition: background-color 0.3s ease;
    }

    .scroll button:hover {
        background-color: var(--accent);
    }

    @media(max-width: 600px) {
        .scroll {
            margin-top: calc(100dvh - clamp(60px, 25dvh, 200px));
        }
    }