/* project.css */

/* ================================================================================================================== */
/* ================================================== SECTION ======================================================= */
/* ================================================================================================================== */

.section {
    max-width: 1200px;
    justify-content: center;
    /*margin: 0.5ch;*/
    /*padding: 0.5ch;*/
    /*border: 10px solid red;*/
}



.section--column {

    display: flex; /* Parent container of block */
    flex-direction: row; /* items stack in a row */
    /*gap: 1ch;*/
    /*border: 10px solid orange;*/
}

.section--row {

    display: flex; /* Parent container of block */
    flex-direction: column; /* items stack in a column */
    /*gap: 1ch;*/
    /*border: 10px solid #d000ff;*/
}

.section--hero {
    background-color: var(--lukas-bg-black);
    padding-bottom: 50px;
}

.section--hero h1 {
    color: var(--lukas-text-off-white);
}

.section--hero p {
    color: var(--lukas-text-body-light)
}

/* ================================================================================================================== */
/* =================================================== BLOCK ======================================================== */
/* ================================================================================================================== */

.block {
    flex: 1; /* child of the parent (column/row) container */
    /*border: 2px solid #4cf656;*/
    padding: 20px;
}

.block p {
}



/* ================================================================================================================== */
/* ================================================== ELEMENTS ====================================================== */
/* ================================================================================================================== */

.element--image {
    margin-top: 50px;
    width: 100%;
    box-shadow: 4px 4px 0 #FFFFFF, 10px 10px 0 var(--lukas-pink);
}

.element--image.scan {
    box-shadow: 2px 2px 0 #c5c5c5;
}
.element--image.hero {
    box-shadow: none;
}

.element--video {
    margin-top: 50px;
    width: 100%;
    height: auto;
    display: block;
    /*box-shadow: 4px 4px 0 #FFFFFF, 10px 10px 0 var(--lukas-pink);*/
    box-shadow: none;

}

.element--stats_table {
    /*display: flex;*/
    background-color: #1a1a1a;
    color: var(--lukas-text-off-white);
    box-shadow: 4px 4px 0 #000, 10px 10px 0 var(--lukas-pink);
    /*outline: 2px solid #c7c7c7;*/
    /*border: 2px solid #5b5b5b;*/
    padding: 25px;
    gap: 20px;
}

.stats_key {
    text-transform: uppercase;
    line-height: 110%;
    font-size: 100%;
    font-family: 'Karla', sans-serif;
    font-weight: bold;
}

.stats_value {
    line-height: 110%;
    font-size: 100%;
    font-family: 'Karla', sans-serif;
}