:root {
  --color-text: #444;
  --color-accent: #2a9d8f; /* jouw teal */
  --color-grass-green: #21aa73;
  --color-orange: #ff6700;
  --color-purewhite: #fff;
  --color-softhaze: rgba(255,255,255,.2);
  --color-brighthaze: rgba(255,255,255,.4);
  --color-lightgray: #f9f9f9;
  --color-midgray: #eee;
  --color-lightblue: #9FDCFB;
  --color-white-on-lightblue: #f4f9fe;
  --color-pink: #ffc5cf;
  --color-gray:rgb(219, 219, 219);
  --color-darker-gray: rgb(140,140,140);
  --color-darkgray:rgb(74, 74, 74);
  --color-antracite: #333;
  --color-green: #2c4643;
  --color-darkblue: #263C55;
  --color-paper: oklch(98.5% 0.00657 97.462);
  --color-paper-darken: oklch(95.8% 0.00657 97.462);

  --font-display: 'ABeeZee', sans-serif;
  --font-heading: 'ABeeZee', sans-serif;
  --font-body: 'DM-Sans', sans-serif;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 450;
  --font-weight-semibold: 500;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  --space-xxs: .25rem;
  --space-xs: .5rem;
  --space-s: .75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 2.5rem;

  --radius-sm: 6px;
  --radius-md: 10px;

  --flow-space: var(--space-md);
}

/* Backgrounds & text color */
html{background: var(--color-purewhite); color: var(--color-text)}
#contact{background: var(--color-grass-green); color: var(--color-purewhite)}
button{
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}


/* Fonts and Spacing */
html {
  font-size: clamp(1rem, 1rem + 0.5vw, 1.125rem);
}

body, a{
    margin: 0;
    font-family: var(--font-body);
    font-optical-sizing: auto;
    font-weight: var(--font-weight-light);
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-decoration: none;
    color: inherit;
    line-height: 1.4;
}

p a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    transition: color .2s;
}

    @media (hover: hover) and (pointer: fine) {
        p a:hover{
            color: black;
        }
    }

    p a:active{
        color: black;
    }

.site-title,h1,h2,h3,h4,h5,h6,.special{
    font-family: var(--font-heading);
    font-optical-sizing: auto;
    font-weight: var(--font-weight-regular);
    font-style: normal;
}

.site-title,h1{
    font-family: var(--font-display);
}



h2{
    font-size: 1.2em;
    font-weight: var(--font-weight-medium)
}

.accent{
    color: var(--color-accent);
}

section{
    display: flow-root;
    scroll-margin-top: 100px;
}

.wrapper {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-xl);
    max-width: 65ch;
    margin-inline: auto;
    padding-inline: var(--space-md);
}

.wrapper-for-titles{
    padding-top: var(--space-lg);
    max-width: 65ch;
    margin-inline: auto;
    padding-inline: var(--space-md);
}

.flow > * + * {
  margin-top: var(--flow-space);
}

/* Utilities */
.zoom-me{
    transition: transform .2s ease-in;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

    @media (hover: hover) and (pointer: fine) {
        .zoom-me:hover{
            transform: scale(102%);
        }
    }

* {
    -webkit-tap-highlight-color: transparent;
}

/* scrolling */
html{
    scroll-behavior: smooth;
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}

*::-webkit-scrollbar {
    /* width: 6px; */
    /* height: 6px; */
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
    border-radius: 999px;
}

    @media (hover: hover) and (pointer: fine) {
        *::-webkit-scrollbar-thumb:hover {
            background: rgba(0,0,0,0.35);
        }
    }

    *::-webkit-scrollbar-thumb:active {
        background: rgba(0,0,0,0.35);
    }

/* Header */

.site-header{
    display: flex;
    justify-content: space-between;
    padding-top: var(--space-lg);
    margin-top: var(--space-xl);
}

.site-title{
    font-family: var(--font-display);
    font-size: 2em;
    font-weight: 450;
}

.hideondesktop{
	display: none;
}

.lang-switcher{
    position: relative;
    display: flex;
    margin-top: var(--space-xxs);
    margin-left: auto;
    margin-bottom: auto;
    background: var(--color-lightgray);
    border-radius: var(--radius-md);
    padding: var(--space-xxs);
    z-index: 0;
    transition: background-color .2s;
}

    @media (hover: hover) and (pointer: fine) {
        .lang-switcher:hover{
            background-color: var(--color-midgray);
        }
    }

    .lang-switcher:active{
        background-color: var(--color-midgray);
    }

.lang-switcher a{
    min-width: 2ch;
    text-align: center;
    text-decoration: none;
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 0.75em;
    z-index: 999;
}

    @media (hover: hover) and (pointer: fine) {
        .lang-switcher a:hover{
            text-decoration: underline;
        }
    }

    .lang-switcher a:active{
        text-decoration: underline;
    }

.lang-switcher a.active{
    font-weight: var(--font-weight-medium);
    padding: var(--space-xs) var(--space-s);
}

    @media (hover: hover) and (pointer: fine) {
        .lang-switcher a.active:hover{
            text-decoration: none;
        }
    }

    .lang-switcher a.active:active{
        text-decoration: none;
    }

.lang-switcher::before{
    view-transition-name: lang-slider;
    content: "";
    position: absolute;
    inset: var(--space-xxs) auto var(--space-xxs) var(--space-xxs);
    width: calc(50% - var(--space-xxs));
    border-radius: var(--radius-sm);
    background: var(--color-purewhite);
    z-index: 0;
}

.lang-switcher:has(:last-child.active)::before {
    transform: translateX(100%);
}

@view-transition{
    navigation: auto;
}

#welcome h1{
    font-size: 2.5em;
    color: black;
}

/* Occupations Section */
.highlight-area{
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 70ch;
    margin: 0 auto;
    background-color: var(--color-paper);
    padding: var(--space-xl) 0;
    border-radius: var(--radius-md);
    transition: .5s;
}

.highlighted-item{
    padding: var(--space-sm);
    margin-top: var(--space-xs);
    margin-bottom: var(--space-xs);
    transform: translateY(5px);
    border-radius: var(--radius-md);
    transition: .2s;
    cursor: pointer;
}

    @media (hover: hover) and (pointer: fine) {
        .highlighted-item:hover{
            background-color: var(--color-paper-darken);
        }
    }

    a.highlighted-item:active{
        background-color: var(--color-paper-darken);
    }

.highlight-icon-frame{
    width: 300px;
    aspect-ratio: 1 /1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-xs);
    border-radius: var(--radius-sm);
}

.highlight-icon{
    font-size: 5.5em;
}

.highlighted-item-link{
    font-weight: var(--font-weight-medium);
}

.link-icon{
    opacity: 0;
    transition: opacity .2s;
}

    @media (hover: hover) and (pointer: fine) {
        .highlighted-item:hover .link-icon{
            opacity: 1;
        }
    }

    .highlighted-item:active .link-icon{
        opacity: 1;
    }


/* About Me */
.my-photo{
    width: 300px;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-sm);
    background-image: url('/img/koffie.webp');
    background-size: cover;
    transition: .2s;
}


/* Contact \ Footer */
#contact{
    padding-bottom: var(--space-xl);
    box-sizing: border-box;
}

.e-mailbutton{
    display: inline-block;
    color: var(--color-purewhite);
    background-color: var(--color-softhaze);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    cursor: pointer;
    transition: .2s;
}

    @media (hover: hover) and (pointer: fine) {
        .e-mailbutton:hover{
            text-decoration-thickness: 1px;
            background-color: var(--color-brighthaze);
        }
    }

    button.e-mailbutton:active{
        text-decoration-thickness: 1px;
        background-color: var(--color-brighthaze);
    }

/* Media Query Stuff */

@media (max-width: 767px) {
    .site-title{
        font-size: 1.6em;
        transform: translateY(var(--space-xs));
    }

    .site-header{
        margin-top: 0;
    }

    .highlight-area, footer {
        border-radius: 0;
    }
}