@import url(tailwind.css);

@import url(theme.css);


@font-face {
  font-family: "Adwaita Sans";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("/assets/fonts/AdwaitaSans-Regular.woff2") format(woff2);
}




html {
    color: var(--color-text-light);
    background-color: var(--color-background-light) /* oklch(92.8% 0.006 264.531) = #e5e7eb */;

    ::selection {
    color: var(--color-selection-light);
    background-color: var(--color-selection-background-light);
    }

    @media (prefers-color-scheme: dark) {
    color: var(--color-text-dark) /* oklch(87.2% 0.01 258.338) = #d1d5dc */;
    background-color: var(--color-background-dark) /* oklch(27.4% 0.006 286.033) = #27272a */;

        ::selection {
        color: var(--color-selection-dark);
        background-color: var(--color-selection-background-dark);
        }

    }

}



footer {
    width: 100%;
    margin: auto;
    position: absolute;
    bottom: 0;
    text-align: center;
    border-top-style: var(--border-style);
    border-top-width: var(--border-width);
    background-color: var(--color-secondary-background-light);
    color: var(--color-muted-text-light);
    justify-self: center;
    padding-block: calc(var(--tw-spacing) * 10);

    @media (prefers-color-scheme: dark) {
    color: var(--color-muted-text-dark) ;
    background-color: var(--color-secondary-background-dark);

    }    
}

h1, h2, h3, h4, h5 {
    margin: 0px;
    font-weight: normal;
}



ul {
    padding: 0px;
    margin-inline-start: calc(var(--tw-spacing) * 5) /* 1.25rem = 20px */;
    list-style: disc;
}

body {
    margin: 0px;
    display: block;
    font-family: "Adwaita Sans";
}

p, li, ul {
    font-size: var(--tw-text-xl) /* 1.25rem = 20px */;
    line-height: var(--tw-leading, var(--tw-text-xl--line-height) /* calc(1.75 / 1.25) ≈ 1.4 */);

}

li {
    padding-block: calc(var(--tw-spacing) * 2) /* 0.5rem = 8px */;
}


.textured-background {
    background-image: url(/assets/img/noise.png);
    background-repeat: repeat;
}

.grid {
    display: grid;
}

.flex {
    display: flex;
}

.small-icon {
    width: calc(var(--tw-spacing) * 5) /* 1.25rem = 20px */;
    height: calc(var(--tw-spacing) * 5) /* 1.25rem = 20px */;
    display: inline-block;
    vertical-align: middle;
}

h1 > .icon {
    width: calc(var(--tw-spacing) * 10) /* 1.25rem = 20px */;
    height: calc(var(--tw-spacing) * 10) /* 1.25rem = 20px */;
    display: inline-block;
    vertical-align: middle;
    padding-inline-end: calc(var(--tw-spacing) *2);
}

.link {
    color: var(--color-link-light);
    text-decoration: underline;
    &:hover {
        @media (hover: hover) {
        color: var(--color-link-hover-light);
        text-decoration-line: underline;
        text-decoration-style: var(--hover-decoration) ;
        }
   }

@media (prefers-color-scheme: dark) {
    color: var(--color-link-dark);
    &:hover {
        @media (hover: hover) {
        color: var(--color-link-hover-dark);
            }
        }
   }

}


.dashed-border-box {
    display: block;
    border: var(--border-width) var(--border-style);
    border-radius: var(--tw-radius-2xl);
    margin: calc(var(--tw-spacing) * 2);
    max-width: var(--tw-container-3xl);
}

.dashed-border-box > .vertical-flex {
    display: flex;

    flex-direction: column;
    :where(& > :not(:last-child)) {
        --tw-divide-y-reverse: 0;
        border-style: none none var(--border-style);
        border-bottom-width: var(--border-width);
        border-radius: var(--tw-radius-md);
    }
}


.dashed-border-box > .vertical-flex > * {
    padding: calc(var(--tw-spacing) * 5) /* 1.25rem = 20px */;
}

    
    /*
    @media (width >= 80rem ) {
        margin-inline: calc(var(--tw-spacing) * 20);
    }
    @media (width >= 90rem  {
        margin-inline: calc(var(--tw-spacing) * 50);
    } */