@import "../../colour_scheme.css";

body {
    z-index: 0;
    pointer-events: none;
}

/* For whole scroller */

.scroller {
    margin-top: 100px; 
    pointer-events:none; 
    z-index: 10;
}

.scroller section {
    padding: 2rem; 
    pointer-events: auto;
    position: relative; 
    display: flex;
    flex-direction: column;
    align-items: center;
    /*background-color: var(--primary-bg-colour-accented);*/
    margin-top: 20px;
    margin-bottom: 20px; 
    z-index: 100;
}

.scroller .section-with-bg {
    position: relative; 
    display: flex;
    flex-direction:column;
    align-content: center;
    justify-content:center;

    width:fit-content;
    height: fit-content; 
    margin:0 16px 32px;

    text-align: center;
    font-size: medium;
    color: var(--primary-fg-colour); 
}

.scroller .section-with-bg .scroller-section-bg {
    padding: 30px 20px; 
    border-radius: 20px; 
    background-color: var(--primary-bg-colour-accented);
    height: fit-content; 
}

.scroller .section-with-bg h1 {
    font-size: 2.5rem;
    margin-bottom: 0;
    color: var(--primary-fg-colour-accented);
    margin-top: 0;
}

.scroller .section-with-bg h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--primary-fg-colour-accented);
    margin-top: 0;
}