/* static/css/components/containers.css */

.container{
    display: flex;
    align-items: center;
    text-decoration: none;
}

.container-w-50{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 50%;
}

.container-w-30{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 30%;
}

.container-w-70{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 70%;
}

.container-center{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 60%;     
    margin: 0 auto;

}

.c-rows{
    flex-direction: row; /* show items from left to right */
    justify-content: space-between;
}

.c-columns{
    flex-direction: column; /* show items top to bottom */
    justify-content: center;
    align-items: center;
}

.c-dark{
    background: var(--colour-container-background-dark);
    color: var(--colour-container-text-light);
}

.c-light2{
    background-image: url('../../images/page.webp');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    font-family: 'Pirata One', cursive; 
    font-size: 1rem;
    color: var(--colour-container-text-dark);
}

.c-light2 > div{
    margin: 5% 5rem 5% 5rem;
}

.c-light{
    background: var(--colour-container-background-light);
    color: var(--colour-container-text-dark);
}

.c-w-40{
    flex: 0 0 40%;
}
.c-w-60{
    flex: 0 0 60%;
}
.c-w-100{
    flex: 0 0 100%;
}

.c-radius-s{ border-radius: 0.5rem;}
.c-radius-m{ border-radius: 1rem;}
.c-radius-l{ border-radius: 2rem;}

.c-pad-s{ padding: 0.5rem 1rem;}
.c-pad-m{ padding: 1rem 2rem;}
.c-pad-l{ padding: 2rem 4rem;}

.c-gap-xs{ gap: 0.5rem;}
.c-gap-s{ gap: 1rem;}
.c-gap-m{ gap: 2rem;}
.c-gap-l{ gap: 4rem;}
.c-gap-xl{ gap: 10rem;}