:root {
  --gap: 1em;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("/font/AlegreyaSans-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("/font/AlegreyaSans-ThinItalic.woff2") format("woff2");
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("/font/AlegreyaSans-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("/font/AlegreyaSans-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("/font/AlegreyaSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("/font/AlegreyaSans-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("/font/AlegreyaSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("/font/AlegreyaSans-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("/font/AlegreyaSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("/font/AlegreyaSans-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("/font/AlegreyaSans-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("/font/AlegreyaSans-ExtraBoldItalic.woff2") format("woff2");
  font-weight: 800;
  font-style: italic;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("/font/AlegreyaSans-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("/font/AlegreyaSans-BlackItalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: "Quiska";
  src: url("/font/Quiska.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

html {
  overscroll-behavior: revert;
}

body {
  font-family: "Alegreya Sans", sans-serif;
  font-size: 18px;
  display: grid;
  grid-template-areas: "header" "content";
  grid-template-rows: min-content 1fr;
  gap: var(--gap);
  padding: var(--gap);
  height: 100dvh;
  overflow: hidden;
  min-width: 300px;
}

a {
  text-decoration: underline;
}

header {
  grid-area: header;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr min-content;

  & h1 {
    font-family: "Quiska", serif;
  }

  & a {
    white-space: nowrap;
  }
}

main {
  grid-area: content;
  overflow-y: scroll;
  min-height: 0;
}

bookmarks-list {
  display: grid;
  grid-template-columns: min-content auto;
  gap: var(--gap);
  container: bookmarks-list / inline-size;
}

bookmarks-dategroup {
  display: grid;
  grid-column: span 2;

  & .time.container {
    background: var(--bux-page-bg);
    position: sticky;
    top: 0;
    padding-bottom: calc(var(--gap) / 2);
  }

  & ul {
    list-style-type: "\1F310";
    list-style-position: inside;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 3);
  }

  & a {
    word-break: break-word;
  }

  @container bookmarks-list (min-width: 512px) {
    grid-template-columns: subgrid;
    grid-template-areas: "date links";
    gap: var(--gap);

    & .time.container {
      position: relative;
      top: unset;
    }

    & time {
      position: sticky;
      top: 0;
    }
  }
}