/* Se till att html och body tar upp hela höjden */
html, body {
    height: 100%;
    margin: 0;
    background-color: rgba(0, 0, 0, 0);
}
/* Använd CSS Grid på body: 3 rader; header, main och footer */
body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
    background-image: url('/images/create a background image with lighter tones of yellow, cyan, and magenta.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}
header, footer {
    z-index: 1000; /* För att alltid ligga över main vid överlapp */
    background-color: rgba(255, 255, 255, 0.2);
}
main {
    overflow-y: auto; /* Vertikal scrollbar om innehållet överskrider utrymmet */
    background-color: rgba(255, 255, 255, 0.4);
}
.column {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 50%; /* Initierad bredd */
    overflow-y: auto;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.01);
}
#resizer {
    width: 5px;
    background: #ccc;
    cursor: ew-resize;
}
/* Denna stil appliceras på din inre container */
.content-wrapper {
    max-width: 1320px; /* Detta är din "bestämda bredd". Anpassa efter behov. */
    margin: 0 auto;   /* Centrerar blocket horisontellt */

    /* Valfritt: Lägg till lite padding så att innehållet inte klistras mot kanten av webbläsaren på små skärmar */
    padding-left: 15px;
    padding-right: 15px;
    /* Eller använd Bootstraps padding-utility-klasser som px-3 eller p-3 på .content-wrapper */
}

*, *::before, *::after {
    box-sizing: border-box;
}