/*
Josh's Custom CSS Reset
https://www.joshwcomeau.com/css/custom-css-reset/
*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

p {
    text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

#root,
#__next {
    isolation: isolate;
}

.gallery header:after {
    content: "";
    display: block;
    height: 3.75rem;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background: hsl(0deg 0% 0% / 0.2);
    pointer-events: none;
    backdrop-filter: blur(16px);
    mask-image: linear-gradient(to bottom, black, black, transparent);
}

/* Fonts */
body {
    font-family: "Bricolage Grotesque", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

/* Firefox fix */
.firefox *:hover {
    transform: translate3d(0, 0, 0) !important;
    transition: none;
}

/* Gallery tips */

@media (orientation: landscape) {
  .gallery-tips {
    display: none !important;
  }
}

@media (orientation: portrait) {
    .gallery-tips {
    display: block;
  }
#tesklasskl {
    display: block;
}