@import url('variables.css');

/* Reset */
*, ::before, ::after { box-sizing: border-box; }
::before, ::after { text-decoration: inherit; vertical-align: inherit; }
blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: 400; }
h1 { font-size: 250%; }
h2 { font-size: 230%; }
h3 { font-size: 200%; }
h4 { font-size: 180%; }
h5 { font-size: 160%; }
h6 { font-size: 135%; }
p { line-height: 1.35; }
a { cursor: pointer; text-decoration: none; color: var(--link-text); transition-property: color; transition-duration: var(--default-transition-time); transition-timing-function: ease-in-out; }
button, input, select, textarea { margin: 0; }
input[type="checkbox"] { vertical-align: baseline; }

/* Styling */
body { font-family: var(--primary-font-style); font-size: var(--default-font-size); }
header { display: flex; align-items: center; }
.container { max-width: var(--max-width); margin-left: auto; margin-right: auto; }

form>:last-child:not(footer,.grid) { margin-bottom: 0; }
fieldset { width: 100%; border: 0; }
fieldset legend, label { display: block; }
input:not([type="checkbox"],[type="radio"],[type="range"],[type="file"]), select, textarea { appearance: none; padding: var(--input-padding-vertical) var(--input-padding-horizontal); width: 100%; }
input, select, textarea { border: var(--primary-color) .0626rem solid; border-radius: .25rem; outline: 0; }
input:not([type="checkbox"],[type="radio"]), select, textarea { margin-bottom: var(--input-group-gap); }
label>:where(input,select,textarea) { margin-top: calc(var(--input-group-gap) * .25); }
[role="button"]:not(.navbar-burger), [type="button"], [type="file"]::file-selector-button, [type="reset"], [type="submit"], button { border: var(--input-button-primary-background-color) .0625rem solid; border-radius: .25rem; outline: 0; background-color: var(--input-button-primary-background-color); color: var(--input-button-primary-color); font-weight: 400; font-size: 1rem; line-height: 1.5; text-align: center; text-decoration: none; cursor: pointer; }
[role="group"],[role="search"] { display: inline-flex; position: relative; width: 100%; margin-bottom: var(--input-group-gap); border-radius: .25rem; vertical-align: middle; }
[role="group"] input:not([type="checkbox"],[type="radio"]):not(:last-child), [role="group"] select:not(:last-child), [role="group"]>:not(:last-child),[role="search"] input:not([type="checkbox"],[type="radio"]):not(:last-child),[role="search"] select:not(:last-child),[role="search"]>:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
[role="group"] input:not([type="checkbox"],[type="radio"]), [role="group"] select, [role="group"]>*, [role="search"] input:not([type="checkbox"],[type="radio"]), [role="search"] select, [role="search"]>* { position: relative; flex: 1 1 auto; margin-bottom: 0; }
[role=group] [role=button]:not(:first-child), [role=group] [type=button]:not(:first-child), [role=group] [type=reset]:not(:first-child), [role=group] [type=submit]:not(:first-child), [role=group] button:not(:first-child), [role=group] input:not([type=checkbox],[type=radio]):not(:first-child), [role=group] select:not(:first-child), [role=search] [role=button]:not(:first-child), [role=search] [type=button]:not(:first-child), [role=search] [type=reset]:not(:first-child), [role=search] [type=submit]:not(:first-child), [role=search] button:not(:first-child), [role=search] input:not([type=checkbox],[type=radio]):not(:first-child), [role=search] select:not(:first-child) { margin-left: calc(.0625rem * -1); }
[role=group] input:not([type=checkbox],[type=radio]):not(:first-child), [role=group] select:not(:first-child), [role=group]>:not(:first-child), [role=search] input:not([type=checkbox],[type=radio]):not(:first-child), [role=search] select:not(:first-child), [role=search]>:not(:first-child) { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
[role=group] [role=button], [role=group] [type=button], [role=group] [type=reset], [role=group] [type=submit], [role=group] button, [role=search] [role=button], [role=search] [type=button], [role=search] [type=reset], [role=search] [type=submit], [role=search] button { width: auto; }
[role=button]:is(:hover,:active,:focus), [role=button]:is([aria-current]:not([aria-current=false])), [type=button]:is(:hover,:active,:focus), [type=button]:is([aria-current]:not([aria-current=false])), [type=file]::file-selector-button:is(:hover,:active,:focus), [type=file]::file-selector-button:is([aria-current]:not([aria-current=false])), [type=reset]:is(:hover,:active,:focus), [type=reset]:is([aria-current]:not([aria-current=false])), [type=submit]:is(:hover,:active,:focus), [type=submit]:is([aria-current]:not([aria-current=false])), button:is(:hover,:active,:focus), button:is([aria-current]:not([aria-current=false])) { --input-button-primary-background-color: var(--input-button-primary-background-color-hover); }

/*
form input[type="checkbox"], form label, form button, form input[type="submit"], form input[type="radio"] { cursor: pointer; }
form .field label { display: block; margin-bottom: var(--input-label-gap); }
form .field input, form .field textarea { max-width: 100%; border-radius: var(--input-border-radius); padding: var(--input-padding); border: var(--input-border); transition: border ease-in-out var(--default-transition-time); }
form .field input:not([type="submit"]):not([type="checkbox"][role="switch"]):hover, form .field textarea:hover { border-color: var(--input-hover-border-color); }
form .field input[type="text"], form .field input[type="number"], form .field input[type="range"], form .field textarea { width: 100%; }
form .field textarea { resize: vertical; }
form .field textarea:not([rows]) { min-height: var(--input-textarea-min-height); max-height: var(--input-textarea-max-height); }
form .field input:focus, form .field textarea:focus { border-color: var(--input-focus-border-color); }
form button:focus-visible, form input[type="submit"]:focus-visible { outline: 0; }
form button { background-color: var(--input-button-background-color); color: var(--input-button-color); }
form button:hover { background-color: var(--input-button-background-color-hover); }
form button:focus-visible { box-shadow: 0 0 0 .1875em rgba(var(--input-button-background-r), var(--input-button-background-g), var(--input-button-background-b), var(--input-button-background-a)); }
form input[type="submit"]:focus-visible, form button[type="submit"]:focus-visible { box-shadow: 0 0 0 .1875em rgba(var(--primary-color-r), var(--primary-color-g), var(--primary-color-b), var(--input-button-primary-background-a)); }
form button, form input[type="submit"] { padding: var(--input-button-padding); border-radius: var(--input-border-radius); border: var(--input-border); transition: background ease-in-out var(--default-transition-time); align-items: center; text-align: center; position: relative; }
form button[type="submit"], form input[type="submit"] { background-color: var(--input-button-primary-background-color); color: var(--input-button-primary-color); }
form button[type="submit"]:hover, form input[type="submit"]:hover { background-color: var(--input-button-primary-background-color-hover); }
form .grouped { display: flex; gap: var(--input-group-gap); }
form .grouped input, form .grouped button { display: inline-flex; width: inherit; }
form .field:not(:last-child) { margin-bottom: var(--block-spacing); }
form .field .checkbox { margin-bottom: 0; }
form input[type="checkbox"][role="switch"] { appearance: none; padding: 0; width: 2.25em; height: 1.25em; border: .1875em #bfc7d9 solid; border-radius: 1.25em; background-color: #bfc7d9; line-height: 1.25em; vertical-align: middle; margin-inline-end: .5em; }
form input[type="checkbox"][role="switch"]:before { display: block; aspect-ratio: 1; height: 100%; border-radius: 50%; background-color: #fff; content: ""; transition: margin .1s ease-in-out; }
form input[type="checkbox"][role="switch"]:checked { background-color: var(--primary-color); }
form input[type="checkbox"][role="switch"]:checked:before { margin-inline-start: calc(2.25em - 1.25em); }
*/

.data-container { display: flex; flex-direction: var(--data-container-flex-direction); justify-content: center; align-items: center; text-align: center; padding: 1rem; gap: var(--data-container-item-gap); }
.hero.full { width: 100%; height: 100vh; }
.hero.half { width: 100%; height: 50vh; }
.hero { background-size: cover; }
.hero .container { position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; margin: initial; max-width: var(--max-width-hero-container); }
footer.fixed { position: fixed; left: 0; bottom: 0; width: 100%; }
/* Grid */
.grid { display: grid; justify-content: center; align-items: center; text-align: center; gap: var(--block-spacing); grid-template-columns: var(--grid-template-column); }
/*.grid[data-columns] { grid-template-columns: repeat(attr(data-columns <number>), 1fr); } NOT SUPPORTED YET */
/* Menu */
nav.sticky { position: sticky; top: 0; }
nav input[type="checkbox"] { display: none; }
.navbar-burger { display: var(--navbar-burger-display); }
.navbar-burger .icon { display: flex; align-items: center; appearance: none; background: none; border: none; border-radius: var(--navbar-burger-border-radius); color: var(--primary-color); cursor: pointer; flex-direction: column; flex-shrink: 0; height: 2.5rem; justify-content: center; position: relative; vertical-align: top; width: 2.5rem; }
.navbar-burger .icon span { background-color: currentColor; display: block; height: var(--navbar-burger-item-height); position: absolute; transform-origin: center; transition-duration: .2s; transition-property: background-color, color, opacity, transform; width: var(--navbar-burger-item-width); }
.navbar-burger .icon span:nth-child(2) { bottom: calc(50% + var(--navbar-burger-gap)); }
.navbar-burger .icon span:nth-child(3) { top: calc(50% + var(--navbar-burger-gap)); }
nav .menu-wrapper { display: var(--navbar-display); flex-direction: var(--navbar-flex-direction); }
nav .menu-wrapper ul:first-child { justify-content: var(--navbar-wrapper-justify-first); margin-inline-end: var(--navbar-wrapper-items-margin); }
nav .menu-wrapper ul:last-child { justify-content: var(--navbar-wrapper-justify-last); margin-inline-start: var(--navbar-wrapper-items-margin); }
nav ul { display: var(--navbar-display); flex-direction: var(--navbar-flex-direction); list-style: none; }
nav ul li a { padding: var(--navbar-item-padding); display: block; }
nav input[type="checkbox"]:checked ~ .menu-wrapper, nav input[type="checkbox"]:checked ~ ul, nav input[type="checkbox"]:checked ~ .menu-wrapper ul { display: flex; }
nav input[type="checkbox"]:checked + .navbar-burger .icon span:first-child { transform: rotate(-45deg); }
nav input[type="checkbox"]:checked + .navbar-burger .icon span:nth-child(2), input[type="checkbox"]:checked + .navbar-burger .icon span:nth-child(3) { opacity: 0; }
nav input[type="checkbox"]:checked + .navbar-burger .icon span:last-child { transform: rotate(45deg); }

.hidden { display: none; }