html {
    box-sizing: border-box;
    line-height: 1.15;
    scroll-behavior: smooth;
}

*, ::after, ::before {
    box-sizing: inherit
}

:root {
    -moz-tab-size: 3;
    tab-size: 4
}

body {
    margin: 0;
    font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    height: 0
}

abbr[title] {
    text-decoration: underline dotted
}

b, strong {
    font-weight: bolder
}

code, kbd, pre, samp {
    font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button, select {
    text-transform: none
}

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    padding: 0
}

progress {
    vertical-align: baseline
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

:root {
    /* body font size */
    --text-base-size: 1rem;
    --body-line-height: 1.5;
    --heading-line-height: 1.2;

    /* type scale */
    --text-scale-ratio: 1.2;
    --text-xs: calc((1em / var(--text-scale-ratio)) / var(--text-scale-ratio));
    --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
    --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
    --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
    --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
    --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));

    /* controling the spacing scale */
    --space-unit: 1rem;
    --space-xxxxs: calc(0.125 * var(--space-unit));
    --space-xxxs: calc(0.25 * var(--space-unit));
    --space-xxs: calc(0.375 * var(--space-unit));
    --space-xs: calc(0.5 * var(--space-unit));
    --space-sm: calc(0.75 * var(--space-unit));
    --space-md: calc(1.25 * var(--space-unit));
    --space-lg: calc(2 * var(--space-unit));
    --space-xl: calc(3.25 * var(--space-unit));
    --space-xxl: calc(5.25 * var(--space-unit));
    --space-xxxl: calc(8.5 * var(--space-unit));
    --space-xxxxl: calc(13.75 * var(--space-unit));
    --component-padding: var(--space-md);

    /* Line-height */
    --component-body-line-height: calc(var(--body-line-height) * var(--line-height-multiplier, 1));
    --component-heading-line-height: calc(var(--heading-line-height) * var(--line-height-multiplier, 1));
    --line-height-multiplier: 1;
    --text-vspace-multiplier: 1;
}

/* Kleur setup, met naamgeving variabelen op basis van contrast */
:root, [data-theme="default"] {
    --color-primary: hsl(218, 98%, 50%);
    --color-primary-light: hsl(213, 100%, 96%);
    /* color contrasts */
    --color-bg: white;
    --color-contrast-lower: hsl(0, 0%, 95%);
    --color-contrast-low: hsl(240, 1%, 83%);
    --color-contrast-medium: hsl(240, 1%, 48%);
    --color-contrast-high: hsl(240, 2%, 30%);
    --color-contrast-higher: black;
}

/* feedback colors*/
:root {
    --color-warning-darker: hsl(46, 100%, 41%);
    --color-warning-dark: hsl(46, 100%, 51%);
    --color-warning: hsl(46, 100%, 61%);
    --color-warning-light: hsl(46, 100%, 71%);
    --color-warning-lighter: hsl(46, 100%, 81%);

    --color-success-darker: hsl(94, 48%, 36%);
    --color-success-dark: hsl(94, 48%, 46%);
    --color-success: hsl(94, 48%, 56%);
    --color-success-light: hsl(94, 48%, 66%);
    --color-success-lighter: hsl(94, 48%, 76%);

    --color-error-darker: hsl(349, 75%, 31%);
    --color-error-dark: hsl(349, 75%, 41%);
    --color-error: hsl(349, 75%, 51%);
    --color-error-light: hsl(349, 75%, 61%);
    --color-error-lighter: hsl(349, 75%, 71%);

    --brighten: brightness(120%) hue-rotate(720deg);
}

/** Font */

@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/WorkSans-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* font weight*/
:root {
    --thin: 300;
    --normal: 400;
    --semi-bold: 500;
    --bold: 650;
}

/** Stuff */

html,
body {
    scroll-behavior: smooth;
    font-family: 'Work Sans', sans-serif;
}

body {
    line-height: var(--body-line-height);
}

h1, h2, h3, h4, h5, h6 {
    line-height: var(--heading-line-height);
}

h3 {
    font-size: var(--text-md);
    margin-bottom: 0;
}

p, li {
    font-size: var(--text-md);
    margin-bottom: 0;
}

p > a {
    font-size: inherit;
}

main {
    content-visibility: auto;
}

[id] {
    scroll-margin-top: 2em;
}

.showcase {
    display: grid;
    grid-template-rows: min-content 1fr minmax(200px, min-content);
}

.showcase header {
    z-index: 100000001;
}

.button:hover {
    filter: var(--brighten);
}

.imagedetails1 {
    width: 35px;
    height: 45px;
}

.image-screenshot img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--color-contrast-lower);
}

/** header + nav */

.site-header {
    position: relative;
}

.site-header .logo {
    align-self: flex-start;
    max-width: 200px;
    margin: auto 0;
}

.logo svg {
    height: auto;
    width: 100%;
}

.site-header__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(.5rem, 1rem, 1.5rem);
}

@media (min-width: 970px) {
    .site-header__wrapper {
        justify-content: initial;
    }

    .site-header__middle {
        margin-left: auto;
    }

    .nav__wrapper {
        display: flex;
    }
}

@media (max-width: 969px) {
    .site-header__end {
        padding-right: 4rem;
    }
}

.nav__wrapper {
    list-style: none;
    /*overflow-x: scroll;*/
    margin-top: 0;
}

.nav__wrapper a {
    font-weight: 400;
    color: var(--color-contrast-high);
    text-decoration-color: hsla(218, 72%, 32%, 0);
    text-underline-offset: 3px;
    font-size: var(--text-sm);
}

.nav__wrapper a:hover {
    color: hsla(212, 98%, 50%, 1);
    text-decoration-color: hsla(212, 98%, 50%, 1);
    text-decoration-thickness: 2px;
    transition: .3s;
}

.nav__wrapper li:not(:last-child) {
    margin-right: clamp(.5rem, 1rem, 1.3rem);
}

.nav__item a {
    display: block;
    padding: 1rem .5rem;
}

.site-header__end a {
    background-color: var(--color-primary);
    color: var(--color-bg);
    padding: .8rem 1rem;
    border-radius: 50px;
    font-weight: 450;
    text-decoration: none;
    margin-left: 2rem;
    word-break: keep-all;
    font-size: var(--text-base-size);
    transition: all 3s ease-in-out;
}

.site-header__end a:hover,
.site-header__end a:focus {
    color: var(--color-bg);
    filter: var(--brighten);
    transition: all 3s ease-in-out;
}

@media (max-width: 505px) {
    .site-header__end a {
        display: none;
    }
}

@media (max-width: 970px) {
    .nav__wrapper {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        z-index: -1;
        background-color: white;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-100%);
        transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    }

    .nav__wrapper.active {
        visibility: visible;
        opacity: 1;
        top: 50px;
        transform: translateY(0);
        z-index: 100;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11),
        0 2px 2px rgba(0, 0, 0, 0.11),
        0 4px 4px rgba(0, 0, 0, 0.11),
        0 6px 8px rgba(0, 0, 0, 0.11),
        0 8px 16px rgba(0, 0, 0, 0.11);
    }
}

@media (min-width: 970px) {

    .has-submenu {
        padding-right: 1rem;
        background-image: url(../img/chevron-down.svg);
        background-repeat: no-repeat;
        background-position: right center;
    }

}

.nav__toggle {
    display: none;
}

@media (max-width: 970px) {
    .nav__toggle {
        display: block;
        position: absolute;
        right: 1rem;
        top: 1.6rem;
        background-color: white;
        border: 0;
        padding: 0;
    }
}

/** Sub header */

.subheader {
    display: grid;
    place-items: center;
    padding: clamp(2rem, 8vw, 5rem) 0;
}

h1 {
    font-size: clamp(1.5rem, 3.8vw, 4rem);
    font-weight: var(--semi-bold);
}

i {
    font-style: normal;
    transform-origin: 50% top;
}


.subheader .button-row {
    display: flex;
    flex-direction: column;
}

@media (min-width: 600px) {
    .subheader .button-row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 4rem;
    }
}

.drop-left {
    display: flex;
    flex-wrap: wrap;
    margin-left: clamp(-10rem, -16rem, -18rem);
}

.search-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 80vw;
    padding: var(--space-lg);
    background-color: var(--color-primary-light);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.search-container:focus-within {
    background-color: var(--color-success-lighter);
    transition: background, .3s ease-in-out;
    -webkit-transition: background, .3s ease-in-out;
    -moz-transition: background, .3s ease-in-out;
    -ms-transition: background, .3s ease-in-out;
    -o-transition: background, .3s ease-in-out;
}

.search-container form {
    width: 100%;
    display: flex;
}

.search-container .input-search {
    width: 100%;
    padding: var(--space-md);
    border: 1px solid transparent;
    font-size: clamp(1rem, 2vw - .2rem, 2rem);
    border-start-start-radius: 10px;
    border-end-start-radius: 10px;
    margin-inline: 0;

}

.search-container button {
    height: 100%;
    border: 0;
    border-start-end-radius: 10px;
    border-end-end-radius: 10px;
    font-size: clamp(1rem, 2vw - .2rem, 2rem);
    background-color: var(--color-primary);
    color: white;
    width: 74px;
}


/** detail block */

.detail-block {
    display: flex;
    flex-direction: column;
    background-color: var(--color-primary-light);
    padding: clamp(.5rem, 2vw, 2rem);
    margin: clamp(.5rem, 2vw, 2rem) 0;
}

.detail-block h3 {
    margin: 0 auto;
    color: var(--color-primary);
    font-size: clamp(1.2rem, 2.2vw, 2.5rem);
    font-weight: 350;
}

.detail-block .container {
    --gap: 20px;

    display: grid;
    gap: var(--gap);
    width: 100%;
    margin: 2vw 0;
    grid-template-columns:
    repeat(
      auto-fit,
      minmax(
              clamp(
                      33.3333% - var(--gap),
                      (40rem - 100%) * 999,
                      100%),
              1fr
      )
    );
}

.container div {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(1rem, 3vw, 3rem);
}

.container div h4,
.container div p {
    font-size: clamp(1rem, 1.2vw, 1.5rem);
}

.container div h4 {
    font-weight: var(--semi-bold);
    margin: 1rem 0;
}

.container div p {
    font-weight: var(--thin);
    margin: 0;
}

.button-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2rem;
}

.columns div.button-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    padding: 0;
}

.button {
    padding: .8rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    margin: .5rem;
    font-weight: 380;
    min-width: min-content;
    text-align: center;
}

.ghost {
    color: var(--color-primary);
    border: 1px solid currentColor;
}

.ghost:hover {
    color: var(--color-bg);
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    transition: .3s;
}




/** Footer */

footer {
    background-color: var(--color-primary-light);
    padding: var(--space-md);
    grid-row-start: 3;
    z-index: 1000000001;
}

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);

    justify-content: center;
}

@media (min-width: 600px) {
    .footer-nav {
        flex-direction: row;
        gap: var(--space-xxxl);
    }
}

.footer-nav h4,
.footer-nav a {
    font-size: clamp(.9rem, 1vw, 1.2rem);
}

footer a {
    text-decoration-color: var(--color-primary-light);
}

.footer-nav h4 {
    display: inline-block;
    margin: 0;
}

.footer-nav ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}



/** Text page */

.content-wrapper {
    max-width: 80vw;
    margin: 0 auto;
    opacity: 0;
    animation: present-yourself 0.6s ease forwards;
    display: grid;
    gap: 1rem;
    grid-auto-flow: row;
    grid-auto-columns: 1fr;
    grid-auto-rows: min-content;
    -webkit-animation: present-yourself 0.6s ease forwards;
}

@media (min-width: 780px) {
    .content-wrapper {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .content-wrapper {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: repeat(2, min-content);
    }
}

.content-wrapper .item {
    display: flex;
    flex-direction: column;
    padding: var(--space-md);
    border: 1px solid #efefef;
    overflow: hidden;
    max-height: 420px;
    transition: box-shadow, .2s ease-in-out;
    -webkit-transition: box-shadow, .2s ease-in-out;
    -moz-transition: box-shadow, .2s ease-in-out;
    -ms-transition: box-shadow, .2s ease-in-out;
    -o-transition: box-shadow, .2s ease-in-out;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.item h3 {
    margin-block-start: 0;
}

.item h3 a {
    color: var(--color-primary);
}

.item a:visited {
    color: var(--color-primary);
}

.item p {
    margin-block-start: 0;
    margin-block-end: auto;
	width: 100%;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.item .date {
    font-size: .9rem;
}

.content-wrapper .item:hover,
.content-wrapper .item:focus {
    box-shadow: 0 1px 1px rgba(0,0,0,0.11),
    0 2px 2px rgba(0,0,0,0.11),
    0 4px 4px rgba(0,0,0,0.11),
    0 6px 8px rgba(0,0,0,0.11),
    0 8px 16px rgba(0,0,0,0.11);
}

.is-extension {
    background-color: var(--color-success);
    padding: var(--space-xxs) var(--space-xs);
    color: white;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.is-theme {
    background-color: var(--color-warning-dark);
    padding: var(--space-xxs) var(--space-xs);
    color: white;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.item figure {
    padding: 0;
    margin: var(--space-md) 0 0;
}

.item img {
    width: 100%;
    max-width: 100%;
}

.media-content {
    display: flex;
    flex-direction: column;
    height: 230px;
}

/** Detail pagina */

.detail-page {
    grid-column: 1 / -1;
    grid-row: 1 / -1;

    display: grid; 
    grid-template-columns: 1fr; 
    grid-auto-rows: auto;
    gap: 1em; 
    width: 100%; 
}

.package.description,  
.package.instructions,
.package.details,
.detail-page .package.screenshot {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
}

.package.description {
    grid-row: 1;
}

.detail-page .package.screenshot {
    grid-row: 2;
}

.package.instructions {
    grid-row: 3;
}

.package.details {
    grid-row: 4;
}


@media screen and (min-width: 1024px) {

    .detail-page {
        grid-column: 1 / -1;
        grid-row: 1 / -1;

        grid-template-columns: 1fr 1fr; 

        border-block: 2px solid var(--color-primary-light);
        padding-block: var(--space-md);
        margin-block-end: var(--space-md);

    }


    .left { 
        grid-column: 1 / 2;
    }
    .right { 
        grid-column: 2 / 3;
    }


    .package.description,  
    .package.instructions,
    .package.details {
        grid-column: 1 /2;
        display: flex;
        flex-direction: column;
    }

    .package.description {
        grid-row: 1;
    }

    .package.instructions {
        grid-row: 2;
    }

    .package.details {
        grid-row: 3;
    }

    .package.details ::marker {
        color: var(--color-primary);
    }

    .detail-page .package.screenshot {
        grid-column: 2 / 3;
        grid-row: 1 / span 2;
    }

}

.url-list {
    width: min(1100px, 100vw - 2rem);
    margin: 0 auto;
}

@media screen and (min-width: 769px) {

    .url-list ul {
        column-count: 2;
        column-gap: var(--space-md);
    }
}

/** Paginatie */

.pagination-wrapper {
    display: flex;
}

ul.pagination {
    display: flex;
    list-style: none;
    justify-content: center;
    align-items: flex-start;
    margin: var(--space-md) auto;
}

.pagination a {
    font-size: var(--text-sm);
    margin: var(--space-md);
}


/** Animatie */

@keyframes moveY {
    0% {
        transform: translateY(var(--distance));
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes moveX {
    0% {
        transform: translateX(var(--distance));
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes moveXY {
    0% {
        transform: translateY(var(--distance)) translateX(var(--distanceX));
    }
    100% {
        transform: translateY(0) translateX(0);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(var(--rotation));
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes scale {
    0% {
        transform: scale(var(--scale));
    }
    100% {
        transform: scale(1);
    }
}

@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.move {
    --duration: 1s;
    --delay: 0s;
    --easing: ease-in-out;
    --fadeDuration: 2s;
    --fadeDelay: var(--delay);
    --iteration: 1;
    --direction: alternate;
    --playstate: running;
    transform-origin: 50% 50%;
}

.moveX {
    --distance: 100%;
    animation: moveX var(--duration) var(--delay) var(--iteration) var(--easing) both var(--direction),
    fade var(--fadeDuration) var(--fadeDelay) 1 both var(--playstate);
}

.moveY {
    --distance: 100%;
    animation: moveY var(--duration) var(--delay) var(--iteration) var(--easing) both var(--direction),
    fade var(--fadeDuration) var(--fadeDelay) 1 both var(--playstate);
}

.moveXY {
    --distance: 100%;
    --distanceX: 100%;
    animation: moveXY var(--duration) var(--delay) var(--iteration) var(--easing) both var(--direction),
    fade var(--fadeDuration) var(--fadeDelay) 1 both var(--playstate);
}

.moveRotate {
    --rotation: -15deg;
    animation: rotate var(--duration) var(--delay) var(--iteration) var(--easing) both var(--direction),
    fade var(--fadeDuration) var(--fadeDelay) 1 both var(--playstate);
}

.moveScale {
    --scale: 1.4;
    animation: scale var(--duration) var(--delay) var(--iteration) var(--easing) both var(--direction),
    fade var(--fadeDuration) var(--fadeDelay) 1 both var(--playstate);
}

.moveLoop {
    --iteration: infinite;
    --direction: alternate;
}

.moveRepeat {
    --iteration: infinite;
    --direction: normal;
    --easing: linear;
}

.movePaused {
    --playstate: running;
}

@media (prefers-reduced-motion: reduce) {
    .move {
        animation: none !important;
        transition: none !important;
    }
}

@keyframes present-yourself {
    to {
        opacity: 1;
}
}

/** Bolt form */

.boltforms {
    margin-top: 2rem;
}

.boltforms input[type="text"],
.boltforms textarea,
.boltforms input[type="date"] {
    border: 2px solid var(--color-primary-light);
    padding: 1rem 1.5rem;
    border-radius: 50px;
    transition: all .3s ease-in-out;
}

.boltforms input[type="text"]:focus,
.boltforms textarea:focus,
.boltforms input[type="date"]:focus {
    border: 2px solid var(--color-primary);

    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11),
    0 2px 2px rgba(0, 0, 0, 0.11),
    0 4px 4px rgba(0, 0, 0, 0.11),
    0 6px 8px rgba(0, 0, 0, 0.11),
    0 8px 16px rgba(0, 0, 0, 0.11);
}

.boltforms textarea {
    min-height: 4ex;
    padding: 1.5rem;
}

.boltforms input[type='file'] {
    background-color: var(--color-primary-light);
    padding: 1rem 1.5rem;
    border-radius: 50px;
}

::-webkit-file-upload-button {
    background-color: var(--color-primary);
    color: white;
    padding: .8rem 1.2rem;
    border-radius: 50px;
    border: none;
}

.boltforms .help-text {
    color: var(--color-contrast-medium);
}

.boltforms button {
    background-color: var(--color-primary);
    color: white;
    font-weight: var(--bold);
    padding: 1rem 1.5rem;
    border-radius: 50px;
    transition: all 3s ease-in-out;
}

.boltforms button:hover,
.boltforms button:focus {
    background-color: var(--color-primary);
    color: white;
    filter: var(--brighten);
}

/** Skip link */

.skip-link {
    position: absolute;
    top: 1rem;
    left: -9999rem;
}

.skip-link:focus {
    left: 1rem;
}


*:focus {
    /* Provide a fallback style for browsers
       that don't support :focus-visible */
    outline: 2px solid red;
}

*:focus:not(:focus-visible) {
    /* Remove the focus indicator on mouse-focus for browsers
       that do support :focus-visible */
    background: transparent;
}

*:focus-visible {
    /* Draw a very noticeable focus style for
       keyboard-focus on browsers that do support
       :focus-visible */
    outline: var(--color-contrast-high);
}

#content:focus {
    outline: none;
}