/*! reset.css | proto.css v0.0.9 | Nieuwe Pixels */ /* 1. Use a more-intuitive box-sizing model */ *,*::before,*::after { box-sizing: border-box; } /* 2. Remove default margin */ * { margin: 0; } /* 3. Enable keyword animations */ @media (prefers-reduced-motion: no-preference) { html { interpolate-size: allow-keywords; } } body { /* 4. Add accessible line-height */ line-height: 1.5; /* 5. Improve text rendering */ -webkit-font-smoothing: antialiased; } /* 6. Improve media defaults */ img,picture,video,canvas,svg { display: block; max-width: 100%; max-height: 100%; } /* 7. Inherit fonts for form controls */ input,button,textarea,select { font: inherit; } /* 8. Avoid text overflows */ p,h1,h2,h3,h4,h5,h6 { overflow-wrap: break-word; } /* 9. Improve line wrapping */ p { text-wrap: pretty; } h1,h2,h3,h4,h5,h6 { text-wrap: balance; } /* 10. Create a root stacking context */ #root,#__next { isolation: isolate; }
/*! flexboxgrid.css | proto.css v0.0.9 | Nieuwe Pixels */ :root{ --flex-gap-column: 1em;} /* Utils ------------------------------------- */.flex{ display: flex; column-gap: var(--flex-gap-column);} /* Flexbox ----------------------------------- */.container-fluid,.container,[container] { margin-right: auto; margin-left: auto;}.container-fluid { padding-right: 2rem; padding-left: 2rem;}[class*="container"]{ margin-left: auto; margin-right: auto;}.container-xs,[container="xs"]{ max-width: var(--container-xs);}.container-sm,[container="sm"]{ max-width: var(--container-sm);}.container-md,[container="md"]{ max-width: var(--container-md);}.container-lg,[container="lg"]{ max-width: var(--container-lg);}.container-xl,[container="xl"]{ max-width: var(--container-xl);} .row { box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-right: calc((var(--flex-gap-column) / 2) * -1); padding-left: calc((var(--flex-gap-column) / 2) * -1);}.row.reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse;}.col.reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse;} .col-xs,.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-offset-0,.col-xs-offset-1,.col-xs-offset-2,.col-xs-offset-3,.col-xs-offset-4,.col-xs-offset-5,.col-xs-offset-6,.col-xs-offset-7,.col-xs-offset-8,.col-xs-offset-9,.col-xs-offset-10,.col-xs-offset-11,.col-xs-offset-12 { box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding-right: calc((var(--flex-gap-column) / 2)); padding-left: calc((var(--flex-gap-column) / 2));} .col-xs { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%;} .col-xs-1 { -ms-flex-preferred-size: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%;} .col-xs-2 { -ms-flex-preferred-size: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%;} .col-xs-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%;} .col-xs-4 { -ms-flex-preferred-size: 33.33333333%; flex-basis: 33.33333333%; max-width: 33.33333333%;} .col-xs-5 { -ms-flex-preferred-size: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%;} .col-xs-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%;} .col-xs-7 { -ms-flex-preferred-size: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%;} .col-xs-8 { -ms-flex-preferred-size: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%;} .col-xs-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%;} .col-xs-10 { -ms-flex-preferred-size: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%;} .col-xs-11 { -ms-flex-preferred-size: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%;} .col-xs-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%;} .col-xs-offset-0 { margin-left: 0;} .col-xs-offset-1 { margin-left: 8.33333333%;} .col-xs-offset-2 { margin-left: 16.66666667%;} .col-xs-offset-3 { margin-left: 25%;} .col-xs-offset-4 { margin-left: 33.33333333%;} .col-xs-offset-5 { margin-left: 41.66666667%;} .col-xs-offset-6 { margin-left: 50%;} .col-xs-offset-7 { margin-left: 58.33333333%;} .col-xs-offset-8 { margin-left: 66.66666667%;} .col-xs-offset-9 { margin-left: 75%;} .col-xs-offset-10 { margin-left: 83.33333333%;} .col-xs-offset-11 { margin-left: 91.66666667%;} .start-xs { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; text-align: start;} .center-xs { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center;} .end-xs { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: end;} .top-xs { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;} .middle-xs { -webkit-box-align: center; -ms-flex-align: center; align-items: center;} .bottom-xs { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;} .around-xs { -ms-flex-pack: distribute; justify-content: space-around;} .between-xs { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;} .first-xs { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1;} .last-xs { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1;} @media only screen and (min-width: 48em) { .container { /*width: 49rem;*/ } .col-sm,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-offset-0,.col-sm-offset-1,.col-sm-offset-2,.col-sm-offset-3,.col-sm-offset-4,.col-sm-offset-5,.col-sm-offset-6,.col-sm-offset-7,.col-sm-offset-8,.col-sm-offset-9,.col-sm-offset-10,.col-sm-offset-11,.col-sm-offset-12 { box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding-right: calc((var(--flex-gap-column) / 2)); padding-left: calc((var(--flex-gap-column) / 2)); } .col-sm { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } .col-sm-1 { -ms-flex-preferred-size: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%; } .col-sm-2 { -ms-flex-preferred-size: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%; } .col-sm-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .col-sm-4 { -ms-flex-preferred-size: 33.33333333%; flex-basis: 33.33333333%; max-width: 33.33333333%; } .col-sm-5 { -ms-flex-preferred-size: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%; } .col-sm-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .col-sm-7 { -ms-flex-preferred-size: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%; } .col-sm-8 { -ms-flex-preferred-size: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%; } .col-sm-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .col-sm-10 { -ms-flex-preferred-size: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%; } .col-sm-11 { -ms-flex-preferred-size: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%; } .col-sm-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .col-sm-offset-0 { margin-left: 0; } .col-sm-offset-1 { margin-left: 8.33333333%; } .col-sm-offset-2 { margin-left: 16.66666667%; } .col-sm-offset-3 { margin-left: 25%; } .col-sm-offset-4 { margin-left: 33.33333333%; } .col-sm-offset-5 { margin-left: 41.66666667%; } .col-sm-offset-6 { margin-left: 50%; } .col-sm-offset-7 { margin-left: 58.33333333%; } .col-sm-offset-8 { margin-left: 66.66666667%; } .col-sm-offset-9 { margin-left: 75%; } .col-sm-offset-10 { margin-left: 83.33333333%; } .col-sm-offset-11 { margin-left: 91.66666667%; } .start-sm { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; text-align: start; } .center-sm { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .end-sm { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: end; } .top-sm { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .middle-sm { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bottom-sm { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .around-sm { -ms-flex-pack: distribute; justify-content: space-around; } .between-sm { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .first-sm { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .last-sm { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }} @media only screen and (min-width: 64em) { .container { /*width: 65rem;*/ } .col-md,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-md-offset-0,.col-md-offset-1,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12 { box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding-right: calc((var(--flex-gap-column) / 2)); padding-left: calc((var(--flex-gap-column) / 2)); } .col-md { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } .col-md-1 { -ms-flex-preferred-size: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%; } .col-md-2 { -ms-flex-preferred-size: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%; } .col-md-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .col-md-4 { -ms-flex-preferred-size: 33.33333333%; flex-basis: 33.33333333%; max-width: 33.33333333%; } .col-md-5 { -ms-flex-preferred-size: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%; } .col-md-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .col-md-7 { -ms-flex-preferred-size: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%; } .col-md-8 { -ms-flex-preferred-size: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%; } .col-md-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .col-md-10 { -ms-flex-preferred-size: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%; } .col-md-11 { -ms-flex-preferred-size: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%; } .col-md-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .col-md-offset-0 { margin-left: 0; } .col-md-offset-1 { margin-left: 8.33333333%; } .col-md-offset-2 { margin-left: 16.66666667%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-4 { margin-left: 33.33333333%; } .col-md-offset-5 { margin-left: 41.66666667%; } .col-md-offset-6 { margin-left: 50%; } .col-md-offset-7 { margin-left: 58.33333333%; } .col-md-offset-8 { margin-left: 66.66666667%; } .col-md-offset-9 { margin-left: 75%; } .col-md-offset-10 { margin-left: 83.33333333%; } .col-md-offset-11 { margin-left: 91.66666667%; } .start-md { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; text-align: start; } .center-md { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .end-md { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: end; } .top-md { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .middle-md { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bottom-md { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .around-md { -ms-flex-pack: distribute; justify-content: space-around; } .between-md { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .first-md { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .last-md { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }} @media only screen and (min-width: 75em) { .container { /*width: 76rem;*/ } .col-lg,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-offset-0,.col-lg-offset-1,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12 { box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding-right: calc((var(--flex-gap-column) / 2)); padding-left: calc((var(--flex-gap-column) / 2)); } .col-lg { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } .col-lg-1 { -ms-flex-preferred-size: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%; } .col-lg-2 { -ms-flex-preferred-size: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%; } .col-lg-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .col-lg-4 { -ms-flex-preferred-size: 33.33333333%; flex-basis: 33.33333333%; max-width: 33.33333333%; } .col-lg-5 { -ms-flex-preferred-size: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%; } .col-lg-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .col-lg-7 { -ms-flex-preferred-size: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%; } .col-lg-8 { -ms-flex-preferred-size: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%; } .col-lg-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .col-lg-10 { -ms-flex-preferred-size: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%; } .col-lg-11 { -ms-flex-preferred-size: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%; } .col-lg-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .col-lg-offset-0 { margin-left: 0; } .col-lg-offset-1 { margin-left: 8.33333333%; } .col-lg-offset-2 { margin-left: 16.66666667%; } .col-lg-offset-3 { margin-left: 25%; } .col-lg-offset-4 { margin-left: 33.33333333%; } .col-lg-offset-5 { margin-left: 41.66666667%; } .col-lg-offset-6 { margin-left: 50%; } .col-lg-offset-7 { margin-left: 58.33333333%; } .col-lg-offset-8 { margin-left: 66.66666667%; } .col-lg-offset-9 { margin-left: 75%; } .col-lg-offset-10 { margin-left: 83.33333333%; } .col-lg-offset-11 { margin-left: 91.66666667%; } .start-lg { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; text-align: start; } .center-lg { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .end-lg { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: end; } .top-lg { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .middle-lg { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bottom-lg { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .around-lg { -ms-flex-pack: distribute; justify-content: space-around; } .between-lg { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .first-lg { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .last-lg { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }}
/*! classless-vanilla.css | proto.css v0.0.9 | Nieuwe Pixels *//* based on simple.css no colors,minimal defaults */:root { /* Set sans-serif & mono fonts */ --sans-font: apple-system,BlinkMacSystemFont,avenir next,avenir,"Nimbus Sans L",roboto,noto,segoe ui,arial,helvetica,helvetica neue,sans-serif; --mono-font: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; /* Default (light) theme */ --bg: #fff; --accent-bg: #F5F7FF; --text: #212121; --text-light: #666; --border: #D8DAE1; --accent: #0D47A1; --accent-light: #90CAF9; --code: #D81B60; /* Custom */ --line-height: 1.3; --header-padding: 1.5rem 15rem; --footer-padding: 2rem 1rem 1.5rem 1rem; --button-padding: .7rem .9rem;} /* Dark theme @media (prefers-color-scheme: dark) { :root { --bg: #212121; --accent-bg: #2b2b2b; --text: #ababab; --text-light: #808080; --border: #666; --accent: #FFB300; --accent-light: #FFECB3; --code: #F06292; } img { opacity: .6; }}*/ * { /* Set the font globally font-family: var(--sans-font); */} /* Make the body a nice central block */body { color: var(--text); background: var(--bg); font-size: 1.15rem; line-height: var(--line-height); margin: 0;} /* Make the main element a nice central block */main { margin: 0 auto;} /* Make the header bg full width,but the content inline with body */header { background: var(--accent-bg); border-bottom: 1px solid var(--border); padding: var(--header-padding);} /* Reduces header padding on smaller screens */@media only screen and (max-width: 1200px) { header { padding: 1rem; }} /* Remove margins for header text */header h1,header p { margin: 0;} /* Format navigation */nav { font-size: 1rem; line-height: 2; padding: 1rem 0;} nav a { margin: 1rem 1rem 0 0; border: 1px solid var(--border); border-radius: 5px; color: var(--text) !important; display: inline-block; padding: .1rem 1rem; text-decoration: none; transition: .4s;} nav a:hover { color: var(--accent) !important; border-color: var(--accent);} nav a.current:hover { text-decoration: none;} footer { padding: var(--footer-padding); color: var(--text-light); border-top: 1px solid var(--border); /* font-size: .9rem; margin-top: 4rem; text-align: center; */} /* Format headers */h1 { font-size: 2.25em;} h2 { font-size: 1.85em; margin-top: 3rem;} h3 { font-size: 1.55em; margin-top: 3rem;} h4 { font-size: 1.25em;} h5 { font-size: 1.15em;} h6 { font-size: .9em;} /* nuf */p{ margin-bottom: 1em;} /* Format links & buttons */a,a:visited { color: var(--accent);} a:hover { text-decoration: none;} a button,button,input[type="submit"],input[type="reset"],input[type="button"] { border: none; background: var(--accent); color: var(--bg); padding: var(--button-padding); margin: .5rem 0; transition: .4s; border-radius: 5px; /* font-size: 1rem; */} /* Format forms */textarea,select,input { --input-border: 1px solid var(--border); font-size: inherit; font-family: inherit; padding: .5rem; margin-bottom: .5rem; color: var(--text); background: var(--bg); border: var(--input-border); box-shadow: none; box-sizing: border-box; width: 100%; /* border-radius: 5px; width: 60%; */} a button[disabled],button[disabled],input[type="submit"][disabled],input[type="reset"][disabled],input[type="button"][disabled] { cursor: default; opacity: .5; cursor: not-allowed; width: initial;} button:focus,button:enabled:hover,input[type="submit"]:focus,input[type="submit"]:enabled:hover,input[type="reset"]:focus,input[type="reset"]:enabled:hover,input[type="button"]:focus,input[type="button"]:enabled:hover { opacity: .8;} /* Format the expanding box */details { padding: .6rem 1rem; background: var(--accent-bg); border: 1px solid var(--border); border-radius: 5px; margin-bottom: 1rem;} summary { cursor: pointer; font-weight: bold;} details[open] { padding-bottom: .75rem;} details[open] summary { margin-bottom: .5rem;} details[open]>*:last-child { margin-bottom: 0;} /* Format tables */table { border-collapse: collapse; width: 100%} td,th { border: 1px solid var(--border); text-align: left; padding: .5rem;} th { background: var(--accent-bg); font-weight: bold;} tr:nth-child(even) { /* Set every other cell slightly darker. Improves readability. */ background: var(--accent-bg);} table caption { font-weight: bold; margin-bottom: .5rem;} /* Lists */ol,ul { padding-left: 3rem;} /* Make the textarea wider than other inputs */textarea { /*width: 80%;*/} /* Makes input fields wider on smaller screens */@media only screen and (max-width: 720px) { textarea,select,input { width: 100%; }} /* Ensures the checkbox and radio inputs do not have a set width like other input fields */input[type="checkbox"],input[type="radio"]{ width: auto;} /* Without this any HTML using <fieldset> shows ugly borders and has additional padding/margin. (Issue #3) */fieldset { border: 0; padding: 0; margin: 0;} /* Misc body elements */ hr { color: var(--border); border-top: 1px; margin: 1rem auto;} mark { padding: 3px 6px; background: var(--accent-light);} main img { max-width: 100%; /*border-radius: 5px;*/} figure { margin: 0;} figcaption { font-size: .9rem; color: var(--text-light); text-align: center; margin-bottom: 1rem;} blockquote { margin: 2rem 0 2rem 2rem; padding: .4rem .8rem; border-left: .35rem solid var(--accent); opacity: .8; font-style: italic;} cite { font-size: 0.9rem; color: var(--text-light); font-style: normal;} /* Use mono font for code like elements */code,pre,kbd,samp { font-family: var(--mono-font); font-size: 1.1rem; color: var(--code);} kbd { border: 1px solid var(--code); border-bottom: 3px solid var(--code); border-radius: 5px; padding: .1rem;} pre { padding: 1rem 1.4rem; max-width: 100%; overflow: auto; background: var(--accent-bg); border: 1px solid var(--border); border-radius: 5px;} /* Fix embedded code within pre */pre code { color: var(--text); background: none; margin: 0; padding: 0;}
/*! utilities.css | proto.css v0.0.9 | Nieuwe Pixels */ :root{ --btn-font-size: 0.9em; --btn-padding: 0.75em 1.25em; --btn-radius: 2em; } /* btn ---------------------------------------*/ [class*="btn"]{ line-height: 1; text-decoration: none; } .btn{ border-radius: var(--btn-radius); } .btn__primary{ --accent: var(--brand-color-primary); padding: var(--btn-padding); font-size: var(--btn-font-size); color: var(--color-white); border-radius: var(--btn-radius); border: 0; } .btn__white{ padding: var(--btn-padding); font-size: var(--btn-font-size); color: var(--brand-color-primary); background-color: var(--color-white); border-radius: var(--btn-radius); border: 0; } /* utils -------------------------------------*/ .text-align--center{ text-align: center; } .text-align--right{ text-align: right; } img.responsive{ max-width: 100%; } /* Development ------------------------------- [class*="col"]{ border: 1px solid #dddddd50; } */
/*! config.css | proto.css v0.0.9 | Nieuwe Pixels */ :root{ --brand-color-primary: #00b2b0; /* aquagreen */ --brand-color-white: #ffffff; --brand-color-black: #000000; --brand-color-grey: #535353; --color-black: #000; --color-grey: #bbb; --color-white: #fff; --brand-border-radius: 1.7em; } :root{ --font-family-heading: 'Bebas Neue',sans-serif; --font-family-text: 'Alumni Sans',sans-serif; --container-xs: 640px; --container-sm: 768px; --container-md: 1024px; --container-lg: 1280px; --container-xl: 1536px; --flex-gap-column: 1em; } @media only screen and (min-width: 48em) { :root{ --flex-gap-column: 2em; } } 
/*! site.css | proto.css v0.0.9 | Nieuwe Pixels */ :root{ --section-margin: 0 0 3em;} @media only screen and (max-width: 48em){ :root{ --flex-gap-column: 2em; } }@media only screen and (min-width: 48em){} [class*="col"]{ border: 0px solid #dddddd50;} /* ------------------------------------------- */ *{ font-family: var(--font-family-text);}html{ font-size: 16px;}body{ font-size: clamp(1.08rem,1.5vw + 0.5em,1.55rem);}h1,h2,h3,h4{ font-weight: 500; line-height: 1em;}section{ --section-margin: 0; margin: var(--section-margin); min-height: 0em;} /* unset/change classless defaults */header{ --accent-bg: transparent; --header-padding: 0; --border: 0;} /* ------------------------------------------- */.header__primary{ padding: 0.5em 0; background-color: var(--brand-color-black);}.header__primary .sticker{ height: 90px; &:last-child img{ float: right; }}.header__primary .logo{ display: flex; height: 90px;}.header__primary .logo img{ margin: 0 auto; display: inline-block;} /* Mobile */@media only screen and (max-width: 48em){ .header__primary .sticker,.header__primary .patroon{ display: none; }} .home__hero{ --section-margin: 0; text-align: center; color: #fff; background-color: var(--brand-color-primary); }.home__hero img{ padding: 0 1em;}.home__hero .home__hero__header{ text-align: center; padding: 3em 0 2em 0;}.home__hero .home__hero__header h1{ font-size: 3.7em; font-weight: 500; line-height: 0.9; font-family: 'Bebas Neue'; text-transform: uppercase;}.home__hero .home__hero__header p{ margin: 0 auto; max-width: 50ch; font-size: 1.1em;} .home__hero__payoff{ --section-margin: 0 0 1.5em; padding: 0.5em; text-align: center; color: #fff; font-size: 2em; font-weight: 500; font-variant-ligatures: none; letter-spacing: 0.04em; background-color: var(--brand-color-black);}.home__hero__payoff em{ font-style: normal; color: var(--brand-color-primary);}.home__hero__payoff .uc{ text-transform: uppercase; } @media only screen and (max-width: 48em){ .home__hero__payoff .flex{ display: block; }} .home__usps{ --section-margin: 0 0 2em;}.card__usp{ margin-bottom: 1em; padding: 2em; text-align: center; background-color: #fff; border: 1px solid #e3e3e3; border-radius: 7px;} .home__introduction{ --section-margin: 0 0 3em; text-align: center;}.home__introduction em{ font-style: normal; font-family: inherit; color: var(--brand-color-primary);} .home__introduction h1{ margin-bottom: 0.25em; text-transform: uppercase; font-family: 'Bebas Neue'; font-weight: 500; color: var(--brand-color-black);}.home__introduction p{ font-size: 1.05em; font-weight: 500;}.home__introduction a{ color: inherit; text-decoration: none; &:hover{ text-decoration: underline; }} .home__quote{ --flex-gap-column: 0; --section-margin: 0 0 3em; background-color: #f3f3f3;}.home__quote__body{ padding: 0 3em; font-size: 1.75em; line-height: 1.1; font-family: 'Caveat'; color: var(--brand-color-primary);} @media only screen and (max-width: 48em){ .home__quote__body{ padding: 1em; }} .home__faq{ --section-margin: 0 0 1em;}/* V1 */.home__faq__content{ text-align: center; border: 1px solid #55cbca;}.home__faq__content h5{ font-weight: 500; color: inherit;}.home__faq__question{ padding: 0.75em; color: var(--brand-color-primary); background-color: #e5f7f7;}.home__faq__answer{ padding: 0.75em; color: var(--brand-color-black);} /* V2 */.home__faq details{ --accent-bg: #fff; padding: 0.5em 0.7em;}.home__faq summary{ font-weight: 500;}.home__faq details[open]{ --accent-bg: #e5f7f7;}.home__faq details[open] summary{ font-weight: 700;} .home__contact{ --section-margin: 0 0 3em;}.home__contact em{ font-style: normal; font-family: inherit; color: var(--brand-color-primary);}.home__contact header{ --header-padding: 0 0 2em; text-align: center;}.home__contact header h2{ text-transform: uppercase; font-family: 'Bebas Neue';}.home__contact header p{ margin: 0 auto; max-width: 80ch;}.home__contact input,.home__contact textarea{ --border: #b5e9e8; margin-bottom: 0.5em;}.home__contact .form__explainer{ margin-bottom: 1.5em; text-align: left; font-size: 0.8em; color: #777;}.home__contact input[type="submit"]{ padding: 0.7em; font-size: 1.5rem; cursor: pointer;} /* MESSAGES */.home__contact #form__messages{ margin-bottom: 1.5em; text-align: center;}.home__contact #form__messages p{ padding: 1em;}.home__contact #form__messages.error{ background-color: #ffbfbf;}.home__contact #form__messages.success{ background-color: #defcdf;} footer{ --footer-padding: 1.5em 0; --border: 0; color: var(--color-grey); background-color: var(--brand-color-black);}footer a{ --accent: var(--brand-color-primary); color: var(--brand-color-primary); text-decoration: none;}.footer__media__logo{}.footer__media__logo img{ display: inline-block; margin-bottom:0.25em; vertical-align: middle;}.footer__media__logo span + span{} .footer__socials{ }.footer__socials img{ display: inline-block;}.footer__copyright,.footer__creation{ font-size: 1.1em;} @media only screen and (max-width: 48em){ .footer__media__logo{ margin-bottom: 0.5em; } .footer__copyright{ margin-top: 1em; }}@media only screen and (min-width: 48em){ .footer__media__logo span + span{ margin-left: 1.5em; display: inline-block; } .footer__copyright,.footer__creation{ font-size: 0.86em; }}