* {box-sizing: border-box; margin: 0; padding: 0;}

html {font-size: clamp(15px, 0.75vw, 18px); scroll-behavior: smooth;}
body {min-height: 100vh; background: white url(/img/achtergrondtexture.png) fixed; font-size: 1rem; line-height: 1.6; font-family: 'Raleway', sans-serif; font-weight: 400; padding: 0 2.5vh; color: rgba(0, 0, 0, 1);}
img {max-width: 100%; width: 100%; height: auto; display: block; border-radius: 0.25rem;}
.container {display: flex; flex-direction: column; min-height: 60rem; justify-content: space-between; margin: 0 auto; max-width: 96rem; padding-left: 17rem;}
.container > div {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: white;
    min-height: 100vh;
    justify-content: space-between;
}
h1, h2, h3 {color: rgb(225, 66, 66); line-height: 1.2;}
h1 {margin-bottom: 1.25rem; font-size: 2rem;}
h2, h3 {margin-bottom: 0.75rem; padding-top: 1.5rem; font-size: 1.5rem;}
h3 {color: black; font-size: 1.05rem; margin-bottom: 0.45rem; padding-top: 0.75rem; font-weight: 600;}
.subtitle {color: rgb(225, 66, 66); font-weight: 600; margin-top: -0.75rem;}

a {color: rgba(0, 0, 0, 1); text-decoration-color: rgba(0, 0, 0, 0.25); text-underline-offset: 0.2rem; transition: color 0.15s ease-in-out, text-decoration-color 0.15s ease-in-out;}
a:hover {color: #ec5700; text-decoration-color: #fc7e00;}
#logo {display: block; padding: 2rem; margin-bottom: 2rem; transition: none!important;}
header, footer, main {padding: 2rem 2.5rem;}
header {min-width: 17rem; max-width: 17rem; width: 17rem; position: fixed; left: 0; top: 0; background: white; min-height: 100vh; box-shadow: 0rem 0rem 0.5rem rgba(77, 15, 0, 0.2); z-index: 2; font-size: 95%;}
header button {
    display: none;
    min-width: 2rem;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
}
header button span {
    display: block;
    height: 2px;
    background: #fc7e00;
    transition: all 0.1s ease-in-out;
    position: absolute;
    width: 100%;
}
body header button span:nth-child(1) {top: 0;}
body header button span:nth-child(2) {top: 50%; transform: translateY(-1px);}
body header button span:nth-child(3) {top: 100%; transform: translateY(-2px);}
body.menuopen header button span:nth-child(1) {transform: rotate(45deg); top: 50%;}
body.menuopen header button span:nth-child(2) {opacity: 0; top: 50%;}
body.menuopen header button span:nth-child(3) {transform: rotate(-45deg); top: 50%;}

header ul ul li a {padding-left: 4rem;}
header nav > ul {margin-inline: -2.5rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
header li {list-style: none;}
header li a {text-decoration: none; padding-inline: 2.5rem; display: block; border-top: 1px solid rgba(0, 0, 0, 0.1); padding-block: 0.45rem; color: black; font-weight: 600; transition: color 0.15s ease-in-out;}
header li a:hover {color: #ec5700;}
header ul ul li a {color: rgba(0, 0, 0, 0.5); font-weight: 400;}
header li.open > a, header li.active > a {background-image: linear-gradient(to right, #fc7e00 0.5rem, transparent 0.5rem); font-weight: 600; color: #ec5700;}
header li.open > a {background: none;}
main {padding-inline: 8rem 26rem; padding-block: 5rem 6rem; background: url(/img/versiering.png) calc(100% - 7rem) 5rem / 12rem auto no-repeat; width: 100%; flex-grow: 1; position: relative;}
main ul {margin-left: 1rem;}
.content > *:not(h1,h2,h3) {margin-bottom: 1.5rem;}
.content p.image:not(.full) {float: right; margin: 0 0 1.5rem 2rem; max-width: 20rem;}

body.home main {text-align: center;}
body.home main ul {margin-inline: 0;}
body.home main ul li {list-style: none; margin-bottom: 0.5rem;}
body.home main p.image:not(.full) {float: none; margin: 0 0 0.25rem; display: inline-block;}
body.home main p.image:not(.full) + p {margin-inline: auto; max-width: 35rem;}

.book {padding-left: 13rem; position: relative; padding-block: 1.5rem 0.1rem; min-height: 14rem;}
.book + .book {border-top: 1px solid rgba(0, 0, 0, 0.1); padding-top: 2rem;}
.book img {position: absolute; left: 0; width: 10rem; margin: 0; border-radius: 0.1rem;}
.book h2 {padding: 0;}

.service + .service {border-top: 1px solid rgba(0, 0, 0, 0.1); margin-top: 3rem; padding-top: 0.25rem;}

body.section-books img {max-width: 10rem; border-radius: 0.1rem;}

footer {background: rgb(249, 190, 164); text-align: center; padding-block: 1rem; font-size: 95%; font-weight: 500; color: white;}
.certificering {max-width: 10rem; border: 1px solid rgba(0, 0, 0, 0.1);}

.button {
    display: inline-block;
    background: rgba(252, 126, 0, 0.1);
    font-weight: 600;
    text-decoration: none;
    padding: 0.25rem 1rem;
    color: #ec5700;
    border: 1px solid rgba(225, 66, 66, 0);
    transition: border-color 0.15s ease-in-out;
    font-size: 1rem;
    font-family: 'Raleway', sans-serif;
    cursor: pointer;
    height: 2.2rem;
}
.button:hover {  
    color: #ec5700;
    border-color: #fc7e00;
}

form {margin-block: 1.5rem 2rem!important;}
form > div {margin-bottom: 1rem; display: flex; flex-direction: column;}
form > div label {padding-bottom: 0.25rem; font-weight: 600;}
form > div input, form > div textarea {
    font-family: 'Raleway', sans-serif; 
    font-size: 1rem; 
    padding: 0.5rem; 
    border: 1px solid rgba(0, 0, 0, 0.2); 
    border-radius: 0.15rem; 
    resize: vertical;
}


@media (max-width: 95rem) {
    .container {max-width: 100%;}
    body {padding: 0;}
    main::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 10rem;
        background: white url(/img/achtergrondtexture.png);
    }
    main {padding-bottom: 15rem;}
}
@media (max-width: 85rem) {
    main {padding-inline: 5rem; background: none;}
}
@media (max-width: 65rem) {
    header {display: flex; justify-content: space-between; align-items: center; min-height: 0; min-width: 100%; max-width: 100%;height: 5rem; padding: 0 5vw;}
    header button {display: block;}
    main {padding-inline: 5vw; padding-top: 4rem;}
    header nav {opacity: 0; pointer-events: none; height: 0;}
    .container {padding-left: 0; padding-top: 5rem;}
    .container > div {min-height: calc(100vh - 5rem);}
    #logo {padding: 1rem 0; width: 3.25rem; height: 5rem; margin: 0;}
}
@media (max-width: 40rem) {
    .content p.image:not(.full) {max-width: 100%; margin: 0 0 1.5rem; padding-top: 0.5rem;}
    header nav {transition: height 0.2s ease-in-out; position: fixed; left: 0; top: 5rem; background: white; width: 100%; opacity: 1; overflow: hidden;}
    body.menuopen header nav {height: calc(100vh - 5rem); pointer-events: all;}
    header nav > ul {margin-inline: 0;}
    header {font-size: 1rem;}
    header li a {padding-block: 0.65rem;}
    .book {padding-left: 0;}
    .book img {position: relative; margin-bottom: 0.75rem;}
}