:root {
  font-family: var(--body-font);
  font-feature-settings: "liga" 1, "calt" 1;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@supports (font-variation-settings: normal) {
  :root {
    font-family: "InterVariable", var(--body-font);
  }
}
/* GNOME colours */
:root {
  --blue-1: #99c1f1;
  --blue-2: #62a0ea;
  --blue-3: #3584e4;
  --blue-4: #1c71d8;
  --blue-5: #1a5fb4;
  --green-1: #8ff0a4;
  --green-2: #57e389;
  --green-3: #33d17a;
  --green-4: #2ec27e;
  --green-5: #26a269;
  --yellow-1: #f9f06b;
  --yellow-2: #f8e45c;
  --yellow-3: #f6d32d;
  --yellow-4: #f5c211;
  --yellow-5: #e5a50a;
  --orange-1: #ffbe6f;
  --orange-2: #ffa348;
  --orange-3: #ff7800;
  --orange-4: #e66100;
  --orange-5: #c64600;
  --red-1: #f66151;
  --red-2: #ed333b;
  --red-3: #e01b24;
  --red-4: #c01c28;
  --red-5: #a51d2d;
  --purple-1: #dc8add;
  --purple-2: #c061cb;
  --purple-3: #9141ac;
  --purple-4: #813d9c;
  --purple-5: #613583;
  --brown-1: #cdab8f;
  --brown-2: #b5835a;
  --brown-3: #986a44;
  --brown-4: #865e3c;
  --brown-5: #63452c;
  --light-1: #ffffff;
  --light-2: #f6f5f4;
  --light-3: #deddda;
  --light-4: #c0bfbc;
  --light-5: #9a9996;
  --dark-1: #77767b;
  --dark-2: #5e5c64;
  --dark-3: #3d3846;
  --dark-4: #241f31;
  --dark-5: #000000;
}

/* Apple colours */
:root {
  --red: rgb(255, 59, 48);
  --orange: rgb(255, 149, 0);
  --yellow: rgb(255, 204, 0);
  --green: rgb(52, 199, 89);
  --mint: rgb(0, 199, 190);
  --teal: rgb(48, 176, 199);
  --cyan: rgb(50, 173, 230);
  --blue: rgb(0, 122, 255);
  --indigo: rgb(88, 86, 214);
  --purple: rgb(175, 82, 222);
  --pink: rgb(255, 45, 85);
  --brown: rgb(162, 132, 94);
  --gray: rgb(142, 142, 147);
}

@media (prefers-color-scheme: dark) {
  :root {
    --red: rgb(255, 69, 58);
    --orange: rgb(255, 159, 10);
    --yellow: rgb(255, 214, 10);
    --green: rgb(48, 209, 88);
    --mint: rgb(99,230, 226);
    --teal: rgb(64, 200, 224);
    --cyan: rgb(100, 210, 255);
    --blue: rgb(10, 132, 255);
    --indigo: rgb(94, 92, 230);
    --purple: rgb(191, 90, 242);
    --pink: rgb(255, 55, 95);
    --brown: rgb(172, 142, 104);
    --gray: rgb(142, 142, 147);
  }
}
:root {
  --body-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --body-line-height: 1.5;
  --border-radius: .25rem;
  --code-font: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --code-color: var(--indigo);
  --code-bg: var(--dark-4);
  --spacer: 1rem;
  --spacer-2: calc(var(--spacer) * 1.5);
  --spacer-3: calc(var(--spacer) * 3);
  --body-bg: #e5e5e5;
  --header-color: var(--light-1);
  --body-color: var(--dark-3);
  --link-color: var(--pink);
  --link-hover-color: var(--red-5);
  --heading-color: var(--dark-4);
  --border-color: var(--dark-2);
  --container-bg: rgba(255, 255, 255, 0.45);
  --bookmarks-screenshot: url("/assets/screenshots/light/bookmarks.png");
  --find-in-page-screenshot: url("/assets/screenshots/light/find_in_page.png");
  --history-screenshot: url("/assets/screenshots/light/history.png");
  --menu-screenshot: url("/assets/screenshots/light/menu.png");
  --note-editor-screenshot: url("/assets/screenshots/light/note_editor.png");
  --okunet-home-screenshot: url("/assets/screenshots/light/okunet_home.png");
  --okunet-me-screenshot: url("/assets/screenshots/light/okunet_me.png");
  --page-screenshot: url("/assets/screenshots/light/page.png");
  --replicas-screenshot: url("/assets/screenshots/light/replicas.png");
  --settings-screenshot: url("/assets/screenshots/light/settings.png");
  --shortcuts-page1-screenshot: url("/assets/screenshots/light/shortcuts_page1.png");
  --shortcuts-page2-screenshot: url("/assets/screenshots/light/shortcuts_page2.png");
  --tab-overview-screenshot: url("/assets/screenshots/light/tab_overview.png");
  --main-screenshot: url("/assets/screenshots/light/main.png");
}

@media (prefers-color-scheme: dark) {
  :root {
    --body-bg: #181818;
    --header-color: var(--dark-5);
    --body-color: var(--light-1);
    --link-color: var(--orange);
    --link-hover-color: var(--yellow);
    --heading-color: var(--light-1);
    --border-color: var(--light-3);
    --container-bg: rgba(255, 255, 255, 0.33);
    --bookmarks-screenshot: url("/assets/screenshots/dark/bookmarks.png");
    --find-in-page-screenshot: url("/assets/screenshots/dark/find_in_page.png");
    --history-screenshot: url("/assets/screenshots/dark/history.png");
    --menu-screenshot: url("/assets/screenshots/dark/menu.png");
    --note-editor-screenshot: url("/assets/screenshots/dark/note_editor.png");
    --okunet-home-screenshot: url("/assets/screenshots/dark/okunet_home.png");
    --okunet-me-screenshot: url("/assets/screenshots/dark/okunet_me.png");
    --page-screenshot: url("/assets/screenshots/dark/page.png");
    --replicas-screenshot: url("/assets/screenshots/dark/replicas.png");
    --settings-screenshot: url("/assets/screenshots/dark/settings.png");
    --shortcuts-page1-screenshot: url("/assets/screenshots/dark/shortcuts_page1.png");
    --shortcuts-page2-screenshot: url("/assets/screenshots/dark/shortcuts_page2.png");
    --tab-overview-screenshot: url("/assets/screenshots/dark/tab_overview.png");
    --main-screenshot: url("/assets/screenshots/dark/main.png");
  }
}
address,
blockquote,
dl,
ol,
p,
pre,
table,
ul {
  color: var(--body-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
  margin-bottom: 0.5rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--heading-color);
}

h1 {
  font-size: 2rem;
}

h2 {
  margin-top: 1rem;
  font-size: 1.5rem;
}

h3 {
  margin-top: 1.5rem;
  font-size: 1.25rem;
}

h4,
h5,
h6 {
  margin-top: 1rem;
  font-size: 1rem;
}

em {
  font-family: "Tenor Sans", sans-serif;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 500;
}

ul {
  text-align: initial;
}

ul,
ol,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

dt {
  font-weight: bold;
}

dd {
  margin-bottom: 0.5rem;
}

hr {
  position: relative;
  margin: var(--spacer-2) 0;
  border: 0;
  border-top: 0.2rem dotted var(--border-color);
}

abbr {
  font-size: 85%;
  font-weight: bold;
  color: var(--dark-3);
  text-transform: uppercase;
}
abbr[title] {
  cursor: help;
  border-bottom: 1px dotted var(--border-color);
}

blockquote {
  padding: 0.5rem 1rem;
  margin: 0.8rem 0;
  color: var(--dark-2);
  border-left: 0.25rem solid var(--border-color);
}
blockquote p:last-child {
  margin-bottom: 0;
}
@media (min-width: 30em) {
  blockquote {
    padding-right: 5rem;
    padding-left: 1.25rem;
  }
}

figure {
  margin: 0;
}

a[href^="#fn:"],
a[href^="#fnref:"] {
  display: inline-block;
  margin-left: 0.1rem;
  font-weight: bold;
}

code,
pre {
  font-family: var(--code-font);
}

code {
  font-size: 85%;
}

pre {
  display: block;
  margin-top: 0;
  margin-bottom: var(--spacer-3);
  overflow: auto;
}

.page,
.post {
  margin-bottom: 4em;
  box-shadow: none;
  background: none;
}
.page li + li,
.post li + li {
  margin-top: 0.25rem;
}

.page-title,
.post-title {
  color: var(--heading-color);
  margin-top: 0;
}

.post-title a {
  color: inherit;
  text-decoration: none;
}
.post-title a:hover, .post-title a:focus {
  text-decoration: wavy underline;
}

.post-date {
  display: block;
  margin-top: -0.5rem;
  margin-bottom: var(--spacer);
  color: var(--border-color);
}

.related {
  padding-top: var(--spacer-2);
  padding-bottom: var(--spacer-2);
  margin-bottom: var(--spacer-2);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.related-posts {
  padding-left: 0;
  list-style: none;
}
.related-posts h3 {
  margin-top: 0;
}
.related-posts a {
  text-decoration: none;
}
.related-posts a small {
  color: var(--dark-3);
}

.masthead {
  top: 1.75rem;
  display: flex;
  position: sticky;
  flex-direction: column;
  background-color: var(--header-color);
  z-index: 1;
  padding: 0.333rem;
  margin: 8px;
  margin-bottom: var(--spacer);
  border-bottom: thin solid var(--border-color);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(15px);
}
.masthead nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.masthead-left {
  display: flex;
  align-items: center;
  gap: 2px;
}
.masthead-left .masthead-ul {
  flex-grow: 1;
  margin-left: 34px;
}

.masthead-ul {
  list-style: none;
  display: flex;
  align-items: center;
}

.masthead-li {
  position: relative;
  font-size: 0.8375rem;
  font-weight: 500;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.masthead-title {
  margin: 0;
  display: flex;
  align-items: center;
}
.masthead-title a {
  color: inherit;
  text-decoration: none;
}
.masthead-title * {
  font-size: 0.8375rem;
  font-weight: 600;
  margin: 0;
}

.notice {
  position: sticky;
  top: 4px;
  z-index: 2;
  margin: 0.25rem;
  background-color: hsl(from color-mix(in hsl, var(--link-hover-color), var(--body-bg) 80%) h s l/0.5) !important;
  border-radius: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notice * {
  font-size: 0.8375rem;
  font-weight: 600;
  margin: 0;
}

#skip {
  position: absolute;
  top: -1000%;
  left: -1000%;
}

#skip:focus {
  top: 10px;
  left: 10px;
}

* {
  box-sizing: border-box;
}

html {
  font-family: var(--body-font);
  line-height: var(--body-line-height);
  color: var(--body-color);
  background: var(--body-bg);
  background-image: var(--body-bg), url("/assets/noise.svg");
  background-repeat: repeat;
  background-blend-mode: hard-light;
  background-attachment: fixed;
}

.bookmarks-screenshot {
  content: var(--bookmarks-screenshot);
}

.find-in-page-screenshot {
  content: var(--find-in-page-screenshot);
}

.history-screenshot {
  content: var(--history-screenshot);
}

.menu-screenshot {
  content: var(--menu-screenshot);
}

.note-editor-screenshot {
  content: var(--note-editor-screenshot);
}

.okunet-home-screenshot {
  content: var(--okunet-home-screenshot);
}

.okunet-me-screenshot {
  content: var(--okunet-me-screenshot);
}

.page-screenshot {
  content: var(--page-screenshot);
}

.replicas-screenshot {
  content: var(--replicas-screenshot);
}

.settings-screenshot {
  content: var(--settings-screenshot);
}

.shortcuts-page1-screenshot {
  content: var(--shortcuts-page1-screenshot);
}

.shortcuts-page2-screenshot {
  content: var(--shortcuts-page2-screenshot);
}

.tab-overview-screenshot {
  content: var(--tab-overview-screenshot);
}

.main-screenshot {
  content: var(--main-screenshot);
}

.screenshot {
  display: block;
  margin: auto;
}

.side-screenshot {
  width: 50%;
}

.icon {
  display: inline;
  margin: 0;
  padding: 8px;
  background-color: var(--body-color);
  border-radius: 0;
}

.dot {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  border: thin solid var(--border-color);
  display: inline-block;
}

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.gallery-post {
  max-width: 12rem;
  height: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.gallery-post figure {
  flex-basis: 100%;
}
.gallery-post div {
  flex-basis: 100%;
  height: 0;
}
.gallery-post h1 {
  flex-basis: 100%;
  font-size: 1rem;
}

.center {
  text-align: center;
  align-items: center;
  justify-content: center;
}

.content {
  z-index: -1;
  max-width: 45rem;
  padding: var(--spacer-2);
  margin-left: auto;
  margin-right: auto;
}

.container {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  background-color: var(--container-bg);
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(15px);
}

.clay {
  backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.45), inset 0px -8px 15px 0px rgba(0, 0, 0, 0.25);
  border: 0.1px solid transparent;
}

.glass {
  backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, 0.33);
  box-shadow: 0 5px 30px 0 rgba(255, 255, 255, 0.45), inset 0px -10px 20px 0px rgba(255, 255, 255, 0.25);
  border: 0.1px solid transparent;
}

.intro-box {
  display: flex;
  align-items: center;
  padding: var(--spacer-3);
}
.intro-box .intro-info {
  width: 50%;
}
.intro-box .intro-info h1 {
  font-weight: 600;
}
.intro-box .intro-info h2 {
  font-weight: 500;
}
.intro-box .main-screenshot {
  width: 50%;
}

.home-block {
  display: block;
  align-items: center;
  padding: var(--spacer-3);
}
.home-block .home-block-info h2 {
  font-weight: 600;
}
.home-block .home-block-info p {
  color: var(--gray);
}

footer {
  margin-top: var(--spacer-3);
  margin-bottom: var(--spacer-3);
}

a {
  color: var(--link-color);
}
a:hover, a:focus {
  color: var(--link-hover-color);
}
a:link {
  text-decoration: none;
}
a strong {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
  margin-bottom: var(--spacer);
  border-radius: var(--border-radius);
}

table {
  margin-bottom: 1rem;
  width: 100%;
  border: 0 solid var(--border-color);
  border-collapse: collapse;
}

td,
th {
  padding: 0.25rem 0.5rem;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-bottom-width: 1px;
}

th {
  text-align: left;
}

thead th {
  border-bottom-color: currentColor;
}

mark {
  padding: 0.15rem;
  background-color: var(--yellow-1);
  border-radius: 0.125rem;
}

pre {
  margin: 2em 1em 2em 4em;
  white-space: pre-wrap;
}

@-webkit-keyframes scaleout {
  0% {
    -webkit-transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 0;
  }
}
@keyframes scaleout {
  0% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    opacity: 0;
  }
}