@import "fonts.css";
@import "pages/home.css";
@import "pages/services.css";

html {
    font-family: var(--font-family-sans);

    display: flex;
    justify-content: center;
    scroll-behavior: smooth;
    transition-duration: 500ms;
}

body {
    background-color: var(--body-color-background);
    color: var(--color-main);
    overflow: auto;
    margin: 0 24px;
    max-width: 1024px;;
    font-size: var(--font-size-base);
    position: relative;
}

body.animate-background {
    transition: background-color 0.5s var(--transition-function);
}

section {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: var(--section-spacing-top);
    min-height: calc(55vh - 6em);
}

section > h2 {
    position: sticky;
    top: 0;
    bottom: 0;
}

.section-spacing-top {
    height: calc(45vh - 5em);
}

sss-anchor[data-anchor] {
    display: inline-flex;
}

[data-anchor] {
    position: sticky;
    top: 0;
    bottom: 0;
}

[data-anchor="1"] {
    top: 1em;
    bottom: calc(0.5em + 1em * var(--anchor-line-height) * (var(--anchor-total) - 1));
}

[data-anchor="2"] {
    top: 2em;
    bottom: calc(0.5em + 1em * var(--anchor-line-height) * (var(--anchor-total) - 2));
}

[data-anchor="3"] {
    top: calc(2em + var(--anchor-line-height) * 1em);
    bottom: calc(0.5em + 1em * var(--anchor-line-height) * (var(--anchor-total) - 3));
}

[data-anchor="4"] {
    top: calc(2em + var(--anchor-line-height) * 1em * 2);
    bottom: calc(0.5em + 1em * var(--anchor-line-height) * (var(--anchor-total) - 4));
}

[data-anchor="5"] {
    top: calc(2em + var(--anchor-line-height) * 1em * 3);
    bottom: calc(0.5em + 1em * var(--anchor-line-height) * (var(--anchor-total) - 5));
}

.grid {
    display: grid;
    grid-template-columns: var(--grid-template-mobile);
    grid-template-rows: min-content 1fr;
    column-gap: var(--grid-gap);
}

.intro {
    padding-bottom: 1.5em;
}

.settings {
    position: absolute;
    right: 0;
    top: 1em;
}

.settings-theme {
    cursor: pointer;
}

[data-theme="dark"] .settings-theme__light {
    display: none;
}

[data-theme="light"] .settings-theme__dark {
    display: none;
}

/* TABLET */
@media (min-width: 800px) {

    body {
        margin: 0 32px;
    }

    .grid {
        grid-template-columns: var(--grid-template-tablet);
    }
}

/* DESKTOP */
@media (min-width: 1024px) {

    .grid {
        grid-template-columns: var(--grid-template-desktop);
    }
}