/* LAYOUT */
/* this css contains basic layout settings and different layouting systems,
for almost all use cases */

html{
    scroll-behavior:        smooth;
    max-width:              100vw;
    height:                 auto;
    overflow-y:             scroll;
    overflow-x:             hidden;
    scroll-snap-type:       none;
    background:             var(--bodycolor);
    font-size:              var(--REM);
    scroll-padding-top:     var(--navheight); 
}

@media (min-width: 1200px) {
    html{
        scroll-snap-type:   y proximity;
    }
}

/*scroll-snapping*/

.snap{
    scroll-snap-align:  start;
}

.snap-center{
    scroll-snap-align:  center;
}

.snap-end{
    scroll-snap-align:  end;
}

body{
    position:               relative;
    overflow-x:             clip;
    box-sizing:             border-box;
    height:                 100vh;
    width:                  100vw;
    max-width:              var(--outerwidth);
    z-index:                -1;
    margin:                 auto;
    background:             var(--bodycolor);
}

main, .main{
    position:               relative;
    box-sizing:             border-box;
    width:                  100%;
    max-width:              var(--outerwidth);
    background:             var(--maincolor);

    /*this part is resbonsible for setting the innerwidth and subtracting the child's padding*/

    padding-left:           calc((var(--outerwidth) - var(--innerwidth)) * .5);
    padding-right:          calc((var(--outerwidth) - var(--innerwidth)) * .5);
}

section{
    position:               relative;
    padding:                var(--space);
}

/* lets the content reach up to the pageborder */

@media (min-width: 1200px) {
    main div.unbound-left{margin-left: calc((var(--outerwidth) - var(--innerwidth)) * -0.5);}
    main div.unbound-right{margin-right: calc((var(--outerwidth) - var(--innerwidth)) * -0.5);}
}

header{
    position:               relative;
    box-sizing:             border-box;
    width:                  100%;
    max-width:              var(--outerwidth);
}

footer{
    position:               relative;
    background:             var(--footercolor);
}

/* HR distancing */
hr{
    height:                 var(--space);
    width:                  100%;
    opacity:                0;
    margin:                 0;
    border:                 none;
    order:                  12;
}

hr[s]{height:               calc(var(--space) / 4)}
hr[m]{height:               calc(var(--space) / 2)}
hr[l]{height:               var(--space)}
hr[xl]{height:              calc(var(--space) * 2)}
hr[xxl]{height:             calc(var(--space) * 4)}










/* GRID-layout */

/* parent-, or grid-element */
.columns, .grid{
    position:               relative;
    display:                grid;
    box-sizing:             border-box;
    grid-template-columns:  auto;
    grid-template-rows:     auto;
    column-gap:             calc(var(--space) * 2);
    row-gap:                calc(var(--space) * 2);
    padding:                var(--space);
    align-items:            center;
    grid-auto-rows:         auto;
}

.grid{
    row-gap:                calc(var(--space) * 2);
}

/* parent media query */
@media (min-width: 1200px){
    .columns, .grid{
        grid-template-columns:      [start] repeat(12, 1fr) [end];
        grid-template-rows:         auto;
    }

    .columns{
        row-gap:                    0;
    }

    .grid{
        grid-template-rows:         [top] repeat(6, 1fr) [bottom];
    }
}

/* child-element configuration */
.columns > div, .grid > div{
    position:               relative;
    display:                flex;
    justify-content:        center;
    flex-flow:              column;
    flex-grow:              0;
    flex-shrink:            0;
    height:                 100%;
    order:                  12;
}

/* variables for responsivity */
.columns > div, .grid > div, .row > div{
    --f1: auto; --f2: auto; --f3: auto; --f4: auto; --f5: auto; --f6: auto;
    --f7: auto; --f8: auto; --f9: auto; --f10: auto; --f11: auto; --f12: auto;
    --row: auto;
}

@media (min-width: 1200px) {
    .columns > div, .grid > div, .row > div{
        --f1: 1; --f2: 2; --f3: 3; --f4: 4; --f5: 5; --f6: 6;
        --f7: 7; --f8: 8; --f9: 9; --f10: 10; --f11: 11; --f12: 12;
        --row: 6;
    }
}

/* for custom grids */
@media (max-width: 1199px) {
    .columns > div, .grid > div{
        grid-column-start:              auto;
        grid-row-start:                 auto;
        grid-area:                      auto;
    }
}

.columns > div.f1, .grid > div.f1{grid-column-start:        span var(--f1); grid-row-start: span var(--row);}
.columns > div.f2, .grid > div.f2{grid-column-start:        span var(--f2); grid-row-start: span var(--row);}
.columns > div.f3, .grid > div.f3{grid-column-start:        span var(--f3); grid-row-start: span var(--row);}
.columns > div.f4, .grid > div.f4{grid-column-start:        span var(--f4); grid-row-start: span var(--row);}
.columns > div.f5, .grid > div.f5{grid-column-start:        span var(--f5); grid-row-start: span var(--row);}
.columns > div.f6, .grid > div.f6{grid-column-start:        span var(--f6); grid-row-start: span var(--row);}
.columns > div.f7, .grid > div.f7{grid-column-start:        span var(--f7); grid-row-start: span var(--row);}
.columns > div.f8, .grid > div.f8{grid-column-start:        span var(--f8); grid-row-start: span var(--row);}
.columns > div.f9, .grid > div.f9{grid-column-start:        span var(--f9); grid-row-start: span var(--row);}
.columns > div.f10, .grid > div.f10{grid-column-start:      span var(--f10); grid-row-start: span var(--row);}
.columns > div.f11, .grid > div.f11{grid-column-start:      span var(--f11); grid-row-start: span var(--row);}
.columns > div.f12, .grid > div.f12{grid-column-start:      span var(--f12); grid-row-start: span var(--row);}










/* ROW LAYOUT */

/* parent-, or row-element */
.row{
    position:                           relative;
    display:                            flex;
    flex-flow:                          row wrap;
    /* column-gap:                         1rem;
    row-gap:                            1rem; */
    justify-content:                    space-between;
    align-content:                      flex-start;
}

.row > div{
    box-sizing:                         border-box;
    position:                           relative;
    display:                            flex;
    align-items:                        center;
    justify-content:                    center;
    order:                              12;
}

.row > .f1{width:                       calc(100% / 12 * var(--f1));}
.row > .f2{width:                       calc(100% / 12 * var(--f2));}
.row > .f3{width:                       calc(100% / 12 * var(--f3));}
.row > .f4{width:                       calc(100% / 12 * var(--f4));}
.row > .f5{width:                       calc(100% / 12 * var(--f5));}
.row > .f6{width:                       calc(100% / 12 * var(--f6));}
.row > .f7{width:                       calc(100% / 12 * var(--f7));}
.row > .f8{width:                       calc(100% / 12 * var(--f8));}
.row > .f9{width:                       calc(100% / 12 * var(--f9));}
.row > .f10{width:                      calc(100% / 12 * var(--f10));}
.row > .f11{width:                      calc(100% / 12 * var(--f11));}
.row > .f12{width:                      calc(100% / 12 * var(--f12));}








/* GLOBAL LAYOUT SETTINGS */
.full{
    height:                             auto;
    max-height:                         none;
}

@media (min-width: 1200px) and (min-height: 900px) {
    .full {
        height:                         calc(100vh - var(--navheight));
        max-height:                     1080px;
    }
}

/* ORDERS */

@media (max-width: 1199px){
    .o1{order: 1!important;}
    .o2{order: 2!important;}
    .o3{order: 3!important;}
    .o4{order: 4!important;}
    .o5{order: 5!important;}
    .o6{order: 6!important;}
    .o7{order: 7!important;}
    .o8{order: 8!important;}
    .o9{order: 9!important;}
    .o10{order: 10!important;}
    .o11{order: 11!important;}
    .o12{order: 12!important;}
}