@import url('https://fonts.googleapis.com/css2?family=Slackside+One&display=swap');
*, html { padding: 0; margin: 0; box-sizing: border-box; overscroll-behavior: none;}

:root {
    --hoogte-header: 8rem;
    --hoogte-footer: 3rem;
    --breedte-mandala: 14rem;
    --breedte-mandala-klein: 14rem;
    --breedte-max: 690px;
    --afstand-groot: 1.4rem;
    --afstand-klein: 0.6rem;
    --kleur-achtergrond: rgb(255, 251, 244);
    --kleur-tekst: rgb(83, 53, 1);
    --kleur-tekst2: #525137;
}

@media screen and (min-width: 690px) {
    html {font-size: 18px;}
    :root {
        --breedte-mandala: 28rem;
        --breedte-mandala-klein: 20rem;
    }

}

h1 {font-size: 4rem; font-family: "Slackside One", cursive;}
h2 {padding-bottom: calc(var(--afstand-klein)/2); font-size: 1.4rem; color: var(--kleur-tekst2); font-weight: 600;}
h3 {font-family: "Slackside One", cursive; color: var(--kleur-tekst2);}
a:not(.actief), u {color: var(--kleur-tekst2); cursor: url('/lotus.cur'), auto;}
a:not(h1 a, .actief), span.kleur, u {animation: gloeien 3s linear infinite alternate;}
a.button {width: fit-content; background-color: var(--kleur-tekst2); cursor: url('/lotus.cur'), auto; border: 0; padding: 0.4rem 0.8rem; border-radius: 20rem; color: var(--kleur-achtergrond); display: block; font-weight: 500;}
a.button, form button {animation: gloeien2 2s linear infinite alternate;}
p {font-size: 1rem; line-height: 1.4rem;} 
@keyframes gloeien { 100% { color: rgb(163, 101, 1); } }
@keyframes gloeien2 { 100% { background-color: rgb(163, 101, 1); } }

form {
    width: 100%;
    display: flex;
    flex-direction: column;
}

form input, form textarea, form button {font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; padding: 0.2rem; line-height: 1.2rem; border: 1px solid var(--kleur-tekst); background-color: var(--kleur-achtergrond); margin: var(--afstand-klein) 0; border-radius: 0;}
form button { background-color: var(--kleur-tekst2); border: 0; color: var(--kleur-achtergrond); font-weight: 600; border-radius: 5rem;}
form button:hover { background-color: var(--kleur-achtergrond); border: 1px solid var(--kleur-tekst); color: var(--kleur-tekst);  }

#afspraak {position: sticky; bottom: 0; min-width: calc(100vw - 2 * var(--afstand-klein)); display: flex; height: var(--hoogte-footer); justify-content: center; align-items: center;z-index: 150;}
#afspraak-placeholder {height: calc(var(--hoogte-footer));}

body {
    width: 100vw;
    height: 100svh; 
    overflow-x: hidden;
    color: var(--kleur-tekst);
    background-color: var(--kleur-achtergrond);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    overflow-x: hidden;
}

body#inspiraties {background-image: url(media/schors.jpg); background-size: contain;}
body#inspiraties main {padding: var(--afstand-klein) var(--afstand-groot);}
body#inspiraties div#container {width: 100%; columns: 5 300px; column-gap: var(--afstand-groot);}
body#inspiraties div#container>section {width: 100%;  break-inside: avoid;
  page-break-inside: avoid; /* for print */
  -webkit-column-break-inside: avoid; }
body#inspiraties section:not(.afbeelding), body#inspiraties nav, body#inspiraties footer p {background-color: var(--kleur-achtergrond);}
body#inspiraties section:not(.vullen) {padding: var(--afstand-klein); margin-bottom: var(--afstand-groot);}
body#inspiraties div#container section.afbeelding {padding: 0;}
body#inspiraties div#container section.afbeelding img {width: 100%; max-width: 100%;}
body#inspiraties h1 {padding: 0 var(--afstand-klein);}
body#inspiraties nav a {width: auto;}
body#inspiraties nav {width: auto; padding: var(--afstand-klein); margin: var(--afstand-klein);}


header {
    width: 100%;
    height: var(--hoogte-header);
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    padding: 0 var(--afstand-klein);
}

header h1 a {text-decoration: none; color: var(--kleur-tekst2);}

nav {width: 100%; max-width: var(--breedte-max); display: flex; justify-content:space-evenly;}
nav a {width: calc(100% / 3); text-align: center; font-size: 1.1rem;}
a.actief {text-decoration: none; color: var(--kleur-tekst2); cursor:default; pointer-events: none;}

main {position: relative; width: 100%; min-height: calc(100svh - var(--hoogte-header) - var(--hoogte-footer)); padding: var(--afstand-klein); display: flex; flex-direction: column;}
main#landing {padding: 0 var(--afstand-klein);}

section { width: 100%; max-width: var(--breedte-max); margin: 0 auto;}

section.vullen {min-height: calc(100svh); display: flex; flex-direction: column; justify-content: center; align-items: center;}
section.vullen.boven {height: calc(100svh - var(--hoogte-header) - var(--afstand-klein)); min-height: auto;}
section.vullen.beneden {min-height: calc(100svh - var(--hoogte-footer) - var(--afstand-klein));}
section.vullen.afspraak {min-height: calc(100svh - var(--hoogte-footer) - 2 * var(--afstand-klein) - var(--hoogte-header));}
section.bovenruimte {margin-top: var(--afstand-groot);}

section#mandala {display: flex; justify-content: center; align-items: center;}
#landing section#mandala a {width: var(--breedte-mandala); height: var(--breedte-mandala);}
section#mandala a { border-radius: 50%; display: block; width: var(--breedte-mandala-klein); height: var(--breedte-mandala-klein);}
section#mandala a {position: relative; margin: var(--afstand-groot) 0;}
section#mandala a>img {position: absolute;}
#landing section#mandala a>img:last-of-type {width: var(--breedte-mandala); height: var(--breedte-mandala);}
section#mandala a>img:last-of-type{ width: var(--breedte-mandala-klein); height: var(--breedte-mandala-klein); z-index: -10; padding: var(--afstand-klein); border-radius: 100%; opacity: 0; transition: opacity 1s ease-out;}
section#mandala a:hover>img:last-of-type {opacity: 0.5; transition: opacity 3s ease-in;}

section.afbeelding {width: 100%; display: flex; justify-content: center; padding: var(--afstand-groot) 0;}
section.afbeelding img {max-width: 100%; max-height: 100%;} 
@media screen and (min-width: 690px) {
    section.afbeelding img {max-width: calc(var(--breedte-max) - 2 * var(--afstand-groot)); }
}
p {width: 100%; text-align: left; margin: var(--afstand-klein) 0;}
section.centreren, section.centreren p {text-align: center;}

#landing section#mandala a>img {width: var(--breedte-mandala);}
section#mandala a>img {width: var(--breedte-mandala-klein); -webkit-animation:spin 356s linear infinite; -moz-animation:spin 356s linear infinite; animation:spin 356s linear infinite; border-radius: 50%;}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

footer {width: 100%; height: var(--hoogte-footer); margin: 0 auto; display: flex; align-items: center; padding: 0 var(--afstand-klein);}
footer p { font-size: 0.9rem; text-align: center; font-weight: 300; width: calc(100% - 2 * var(--afstand-klein));}