/*
    Colors
    #f0f0f0 - header stony grey
    #803020 - wood red
*/

:root {
    background-color:#f0f0f0;
}
body {
    margin:0;
    font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
    background-color:#ffffff;
    min-height:100vh;
    padding:0 0 10px 0;
    box-sizing:border-box;
}

header {
    margin:0 auto;
    background-color:#f0f0f0;
}

h1 {
    margin:0;
    font-family:initial;
    font-size:2.25rem;
}

h1,h2 {
    text-align:center;
    font-weight:normal;
    font-family:serif;
}


nav {
    background-color: #803020;
/*     background-color: #402010; */
    text-align: center;
    font-size:1.1rem;
/*     font-family:serif; */
}
nav > div {
    max-width:700px;
    margin:0 auto;
    padding:0 1rem;
    box-sizing:border-box;
    display:flex;
    justify-content: space-between;
    flex-wrap:wrap;
}
nav a {
    color:white;
    text-decoration: none;
    display:block;
}
nav > div > div {
    padding:10px;
    min-height:50px;
    display:flex;
    align-items: center;
    justify-content: center;
    flex:1 1 0;
}
nav a::after {
    content: "";
    background-color:white;
    display:block;

    margin:0 auto;
    width:100%;
    height:1px;

    transform:scaleX(0%);
    transition:transform .25s ease;
}
nav a:hover::after, nav a[data-current]::after {
    transform:scaleX(100%);
}

#hero {
    margin:0;
}

img-fitted {
    width:100%;
    /* height */

    position:relative;
    overflow:hidden;
    display:block;

    margin:10px 0;
}
img-fitted::before {
    display:block;

    --inset:-10px;
    position:absolute;

    top:var(--inset);
    bottom:var(--inset);
    left:var(--inset);
    right:var(--inset);
    width:calc(100% - var(--inset) * 2);
    height:calc(100% - var(--inset) * 2);

    filter:blur(5px);
    background-size:cover;
    background-position:50% 50%;
    background-image:var(--image);
    content: "";
}
img-fitted::after {
    display:block;

    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    height:100%;

    max-width: var(--image-max);
    margin:auto;

    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size:cover;
    background-image:var(--image);
    content: "";
}



main {
    padding:0 1rem;
    font-size:1rem;
/*     font-family:sans-serif; */
    line-height:1.5;
}


.limit-size-one {
    max-width:700px;
    margin-left: auto;
    margin-right: auto;
/*     box-sizing:border-box; */
}
.limit-size-two {
    max-width:900px;
    margin-left: auto;
    margin-right: auto;
/*     box-sizing:border-box; */
}

.alert {
    position: relative;
    padding:1rem 3rem;
    margin:0 0 1rem 0;
    border-radius: 0.25rem;

    text-align:center;
}
.alert-info {
    color:#055160;
    background-color:#cff4fc;
    border:1px solid #b6effb;
}
.alert-warning {
    color:#664d03;
    background-color:#fff3cd;
    border:1px solid #ffecb5;
}
.alert > p:first-child {
    margin-top:0;
}
.alert > p:last-child {
    margin-bottom:0;
}

.link-button-log {
    color:#007bff;
    text-decoration:none;
    position:relative;
/*     margin-bottom:1rem; */
/*     padding-bottom:1rem; */
}
.link-button-log::after {
    content: "";
    background-color:#007bff;
    display:block;

    position:absolute;
    left:0;
    right:0;
    bottom:0;

    height:1px;

    transform:scaleX(0%);
    transform-origin:center left;
    transition:transform .2s ease;
}
.link-button-log:hover::after {
    transform:scaleX(100%);
}