* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow: auto;
    scrollbar-gutter: stable both-edges;
}
body {
}
main > *:not(:last-child) {
    border-bottom: var(--spacing-12_5) solid black;
}
main > *:not(:first-child) {
    border-top: var(--spacing-12_5) solid black;
}

header {
    padding: var(--spacing-150) 0 var(--spacing-50);
    text-align: center;
}
.logo {
    height: 4rem; /* 64px */
}
.split-screen {
    /** setting min-block-size prevents the split screen from shrinking vertically when the flex direction is column */
    min-block-size: 80vb; 
    display: flex;
    padding: var(--spacing-150);
    gap: var(--spacing-150);
}

.input-label-alignment-box {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-50);
    align-items: center;
}

.split-line {
    width: var(--spacing-12_5);
    flex-shrink: 0;
    background-color: black;
}

.footer {
    height: 6rem; /* 144px */
    padding: var(--spacing-150) 0;
    text-align: center;
}

@media (width < 1220px) { 
    .split-screen {
        min-width: min-content;
        flex-direction: column;
    }

    .split-line {
        height: var(--spacing-12_5);
        width: auto;
    }

}