:root {
    --row-bg-color: #f2efe8;
    --row-text-color: #3a4145;
    --row-alt-bg-color: #ccc;
    --min-row-height: 300px;
    --big-header-height: calc(var(--min-row-height) * 1.5);
    --color-regatta: #E8610B;
    --color-palaver: #009DDB;
    --color-vereniging: #76B703;
    --color-zeilschool: #FA3F37;
    --color-default-btn: var(--color-palaver);
}

html, div, main, body {
    margin: 0;
    padding: 0;
}

body {
    color: #121212;
    font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
    "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
    "Helvetica Neue", sans-serif;
    scroll-behavior: smooth;
    font-size: clamp(1rem, 1rem + 0.5vw, 2rem);
    line-height: 1.5;
    margin: 0;
    word-break: break-word;
    hyphens: auto;
}

p {
    padding: 0.5rlh 0;
}



.row {
    min-height: var(--min-row-height);
    background-color: var(--row-bg-color);
    color: var(--row-text-color);
    a {
        color: inherit;
        transition: color ease 0.3s;
        -moz-transition: color ease 0.3s;
    }

    a:hover {
        color: var(--color-palaver);
    }
}

.alt {
    background-color: var(--row-alt-bg-color);
    color: var(--row-text-color);

    a:hover {
        color: color-mix(in oklab, var(--color-palaver), black 20%);
    }
}

.alt.zeilschool {
    background-color: #b80135;
    color: #eee;

    a:hover {
        color: color-mix(in oklab, var(--color-zeilschool), black 20%);
    }
}

.content {
    padding: 1rlh;
    h1, h2, h3, h4 {
        padding-top: 0.5em;
    }
}

.content img {
    max-width: 100%;
    border-radius: 0.5rlh;
    object-fit: contain;
}

.slideshow {
    margin: 1rlh 0;
    flex-direction: row;
    overflow-x: scroll;
}

.slideshow img {
    object-fit: contain;
    margin-right: 1rlh;
    max-height: 10rlh;
}

@media (min-width: 40em) {
    .content {
        margin: 0 auto;
        width: 35em;
    }
    .slideshow img {
        max-height: 11rlh;
    }

}

.float-wrapper {
    display: block;
}

.image {
    background-repeat: no-repeat;
    background-size: cover; 
    background-position-y: 50%;

    .content {
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        height: var(--big-header-height);

        .float-wrapper {
            h1,h2,h3,h4 {
                overflow: hidden;
            }
        }
    }
    h1, h2, h3 {
        text-shadow: white 0 0 5px;
    }
}

.image.header {
    .content {
        height: 90vh;
        text-align: center;
    }
}


.image.white {
    .content {
        color: #fefefe;

    }
    h1, h2, h3 {
        text-shadow: black 0 0 5px;
    }
}


a.btn {
    text-decoration: none;
    background-color: var(--color-default-btn);
    color: white;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    display: inline-block;
    letter-spacing: 1px;
    margin-top: 1rlh;
    margin-right: 1rlh;
    overflow: visible;
    padding: 0.3rlh 0.6rlh;
    cursor: pointer;
}

a.btn:hover {
    color: white;
    background-color: color-mix(in oklab, var(--color-default-btn), black 10%);
}

a.btn.palaver{
    background-color: var(--color-palaver);
}
a.btn.palaver:hover{
    background-color: color-mix(in oklab, var(--color-palaver), black 10%);
}

a.btn.zeilschool{
    background-color: var(--color-zeilschool);
}
a.btn.zeilschool:hover{
    background-color: color-mix(in oklab, var(--color-zeilschool), black 10%);
}

a.btn.regatta{
    background-color: var(--color-regatta);
}
a.btn.regatta:hover{
    background-color: color-mix(in oklab, var(--color-regatta), black 10%);
}

a.btn.jvz{
    background-color: var(--color-vereniging);
}
a.btn.jvz:hover{
    background-color: color-mix(in oklab, var(--color-vereniging), black 10%);
}




.focus-box {
    padding: 1rlh 2rlh;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 1rlh;
}


.focus-box.white {
    background: rgba(255, 255, 255, 0.5);
    color: #333;
}

.row-separator {
    display: block;
    height: 1rlh;
    margin: -0.5rlh auto;
    filter: invert() drop-shadow(0 0 2px black);
}




ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0.5em 0;
}

li::before {
    width: 1em;
    height: 1rlh;
  display: flex;
  justify-content: center;
  align-items: center;
  content: url('/images/logos/noun-knot-29385.svg');
    filter: invert() drop-shadow(0 0 1px black);
}

/*
li::before {
    content: '';
    display: inline-block;
    height: 3rem;
    width: 3rem;
    vertical-align: middle;
    background-image: url('/images/logos/noun-knot-29385.svg');
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 0.5rem;
} */

header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;
    position: fixed;
    background: rgba(255,255,255, 0.4);
    padding: 0.5rlh 0;
    backdrop-filter: blur(10px);

    a {
        color: inherit;
        transition: color ease 0.3s;
        -moz-transition: color ease 0.3s;
    }

    a:hover {
        color: var(--color-palaver);
    }
}

main {
  scroll-snap-type: y proximity;
    scroll-padding-top: 12rem;
}

main > row {
    scroll-snap-align: start;
}