* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: "Amsterdam One";
    src: url("assets/fonts/amsterdam-one/AmsterdamOne-eZ12l.ttf");
    font-display: swap;
}

@font-face {
    font-family: "Lobster Two";
    src: url("assets/fonts/Lobster_Two/LobsterTwo-Regular.ttf");
    font-display: swap;
}

@font-face {
    font-family: "Lexend";
    src: url("assets/fonts/Lexend/Lexend-VariableFont_wght.ttf");
    font-display: swap;
}

body {
    font-family: 'Segoe UI';
    font-weight: 300;
    color: #333;
    line-height: 1.6;


    width: 100%;
    /* The vh unit on mobile browsers includes the area behind their address bar
       and the system gesture bar, which would cut off the bottom of the page,
       so dvh is used where it is supported. */
    height: 100vh;
    height: 100dvh;
}

nav {
    background: hsla(0, 0%, 100%, 0.95);
    
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    gap: 50px;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 16px;

    z-index: 1;
}

#balonowe-cuda-text {
    margin-right: 50px;
}

#nav-buttons {
    display: flex;
    gap: 30px;
}

nav #nav-buttons > div {
    cursor: pointer;
}

#mobile-expand-button {
    display: none;

    position: absolute;
    right: 0;

    margin-right: 10px;

    background-image: url("assets/svg/lines.svg");
    width: 20px;
    height: 20px;
    background-size: contain;
    cursor: pointer;
}

#mobile-close-button {
    display: none;

    background-image: url("assets/svg/x.svg");
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;

    position: absolute;
    right: 0;
    top: 0;
    padding: 30px;
}

/* ---------- Views (SPA) ---------- */
/* Only the view carrying the .active class is visible. See script.js. */
.view {
    display: none;

    overflow-y: scroll;
    width: 100%;
    height: 100dvh;
    position: relative;
}

.view.active {
    display: block;
}

/* Anything with data-view="..." switches the view when clicked. */
nav [data-view] {
    cursor: pointer;
}

html {
    overflow-y: hidden;
}

#webgl {
    display: block;
    width: 100%;
    height: 190vh;

    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

/* The fullscreen layer of the gallery transition. It lies on top of the whole
   page, so balloons can fly in from below the bottom edge and out above the top
   one, but it never catches a click, and it only shows while a transition runs.
   Wherever no balloon is drawn, the page below shines through. */
#transition-layer {
    display: none;

    width: 100%;
    height: 100%;
    left: 0;
    top: 0;

    position: fixed;
    z-index: 10;

    pointer-events: none;
    overflow: hidden;
}

#transition-layer.active {
    display: block;
}

/* One balloon of the transition: the image of the svg drawing, held in place by
   the transform that renderer.js writes on it and coloured by its hue
   rotation. Its size is written on it as well, because it follows from the size
   of the screen. */
.transition-balloon {
    display: block;

    left: 0;
    top: 0;

    position: absolute;
}

header {
    /* background: linear-gradient(rgba(180, 200, 255, 0.582), rgba(229, 244, 255, 0.582)); */
    color: rgb(63, 56, 56);
    text-align: center;
    padding: 60px 20px;

    width: 100%;
    height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

header p {
    font-size: 1.2rem;
    opacity: 0.9;
}

#nav-logo {
    height: 50px;
}

#logo {
    height: 600px;

    background: radial-gradient(rgba(214, 47, 75, 0.25), #00000000 50%);
}

.tagline {
    margin-top: 20px;
    font-style: italic;
    font-size: 1.1rem;
}

section {
    color: hsl(0, 0%, 100%);
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}

#services {
    background: hsla(0, 0%, 100%, 0);
    color: rgb(63, 56, 56);

    max-width: none;
    margin: 0;
    padding: 0;

    width: 100%;
    height: 90vh;

    display: grid;
    grid-template-columns: 1.5fr 1fr;

    font-size: 100px;
}

.services-cell {
    width: 100%;
    height: 100%;
}

#services-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 10px;
}

#services .services-cell:nth-child(1) {
    padding: 50px;
}

#hello {
    font-size: 1em;
    position: relative;
    left: -0.06em;
    line-height: 0.8;
}

#dekoracje {
    font-size: 0.5em;
    line-height: 1;
    margin-top: 10px;
}

#services-info {
    margin-top: 50px;
    font-size: 0.25em;
    font-weight: 400;
}

.button {
    cursor: pointer;
}

.button-left {
    background: url("assets/svg/left.svg");
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
}

.button-right {
    background: url("assets/svg/right.svg");
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
}

h2 {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 100;
}

.amsterdam {
    font-family: "Amsterdam One";
}

.lobster {
    font-family: "Lobster Two";
}

.lexend {
    font-family: "Lexend";
}

.services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

#listing {
    color: black;
    font-size: 60px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

#listing-items {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 150px;
    
    margin-top: 20px;
}

.listing-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-transform: uppercase;
    font-size: 0.3em;
    font-weight: 600;
    font-family: "Lexend";
    color: rgb(52, 53, 45);
}

.image {
    height: 250px;
    width: 250px;
}

.image1 {
    background: url("assets/images/square_scianka.webp");
    background-size: cover;
}

.image2 {
    background: url("assets/images/square_dekoracje.webp");
    background-size: cover;
}

.image-index-display {
    position: absolute;

    display: flex;
    gap: 5px;
}

.image-display-line {
    width: 100px;
    height: 3px;
    background: rgba(255, 255, 255, 0.475);
    box-shadow: #808080 1px 1px;
}

.image-display-line.active {
    background: rgb(255, 255, 255);
}

.white-text-shadow {
    text-shadow: white 1px 1px;
}

#price-list {
    color: black;
    font-size: 60px;

    max-width: 600px;
}

.price-list {
    font-size: 0.3em;
}

#contact {
    color: black;
    font-size: 60px;

    display: flex;
    flex-direction: column;

    margin-bottom: 40px;

    max-width: 600px;
}

.contact {
    text-align: center;
    border-radius: 12px;
    font-size: 0.3em;
}

.contact > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.contact a {
    transition: background 0.2s;
}

.contact a:hover {
    background: #ffd1f7;
}

footer {
    text-align: center;
    padding: 25px;
    background: #333;
    color: white;
    font-size: 0.9rem;
}

#gallery {
    display: flex;
    justify-content: center;
    flex-direction: column;

    width: 100%;

    margin-bottom: 100px;
    padding-left: 100px;
    padding-right: 100px;
    gap: 20px;

    color: black;
    font-size: 40px;
    font-style: italic;
}

.gallery-title {
    margin-top: 100px;
}

.gallery-row {
    display: flex;

    width: 100%;
    overflow-x: scroll;
    gap: 8px;

    background: rgba(255, 209, 247, 0.35);

    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: #f3a9e9 rgba(0, 0, 0, 0.06);
}

.gallery-row > img {
    height: 400px;
    object-fit: cover;

    scroll-snap-align: center;
    transition: transform 0.25s;
}

.gallery-row::-webkit-scrollbar {
    height: 10px;
}

.gallery-row::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.06);
    border-radius: 5px;
}

.gallery-row::-webkit-scrollbar-thumb {
    background: #f3a9e9;
    border-radius: 5px;
}

@media (max-width: 1200px) {
    #services {
        display: flex;
        flex-direction: column;

        height: auto;
    }

    #services-info {
        padding-bottom: 50px;
    }

    .services-cell {
        height: auto;
    }

    #services-image {
        height: 100vh;
        height: 100dvh;
    }
}

@media (max-width: 850px) {
    nav {
        font-size: 14px;
        gap: 35px;
    }
}

@media (max-width: 600px) {
    #balonowe-cuda-text {
        margin-right: 0px;
    }

    #nav-buttons {
        position: fixed;
        left: 100vw;
        top: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;

        padding: 20px;

        font-size: 16px;

        background-color: white;
        display: flex;
        flex-direction: column;
        align-items: start;
        z-index: 2;
    }

    #mobile-expand-button {
        display: block;
    }

    #mobile-close-button {
        display: block;
    }

    #logo {
        height: 300px;
    }

    #services {
        font-size: 70px;
    }

    #hello {
        font-size: 0.9em;
    }

    #webgl {
        height: 200vh;
    }

    #listing {
        font-size: 45px;
    }

    #listing-items {
        flex-direction: column;
        gap: 40px;
    }

    .image {
        width: 60vw;
        height: 60vw;

        max-width: 250px;
        max-height: 250px;
    }

    #price-list,
    #contact {
        font-size: 45px;
    }

    #gallery {
        padding: 70px 0 40px;
        margin-bottom: 20px;
        gap: 10px;
    }

    .gallery-title {
        margin: 20px;
        margin-bottom: 0px;
        font-size: 0.6em;
    }

    /* A soft fade on the right edge of every row, telling that the row keeps
       going beyond the screen. */
    .gallery-row-wrap {
        position: relative;
    }

    .gallery-row-wrap::after {
        content: "";

        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;

        width: 40px;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), white);

        pointer-events: none;
        transition: opacity 0.2s;
    }

    .gallery-row-wrap.no-scroll-hint::after {
        opacity: 0;
    }

    .gallery-row > img {
        height: 60dvh;
    }
}

/* ---------- Flexbox utilities ---------- */
/* Small, single purpose helpers that can be combined on any element, for
   example class="flex justify-center align-center gap-20". Every helper sets
   one property only, so an element's own rules and the helpers placed later
   in a class attribute still win. */

.flex {
    display: flex;
}

/* Shortcut for the most common case: a row centred on both axes. */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Direction and wrapping. */
.flex-row {
    flex-direction: row;
}

.flex-column {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

/* Main axis alignment, which runs horizontally inside a row. */
.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

/* Cross axis alignment, which runs vertically inside a row. */
.align-start {
    align-items: flex-start;
}

.align-center {
    align-items: center;
}

.align-end {
    align-items: flex-end;
}

.align-stretch {
    align-items: stretch;
}

/* Cross axis alignment of one chosen child instead of all of them. */
.self-start {
    align-self: flex-start;
}

.self-center {
    align-self: center;
}

.self-end {
    align-self: flex-end;
}

/* Main axis sizing of the children. */
.flex-1 {
    flex: 1;
}

.flex-none {
    flex: none;
}

/* Spacing between the children. */
.gap-10 {
    gap: 10px;
}

.gap-20 {
    gap: 20px;
}

.gap-30 {
    gap: 30px;
}

.gap-50 {
    gap: 50px;
}

.bold {
    font-weight: 600;
}

.pointer {
    cursor: pointer;
}