/* ==UserStyle==
@name           distanthomes.themes
@namespace      git.gay/veryroundbird/distanthomes.themes
@version        1.0.0
@description    Theme set for the Distant Home's Guide Arknights story reader plus some styling tweak options
@author         Carly Smallbird
@var select siteTheme "Site Theme \n Select 'Boring' for a visually-bland work-friendly experience." {
  "default:Default*": "default",
  "moon:Rose Pine Moon": "moon",
  "dawn:Rose Pine Dawn": "dawn",
  "mocha:Catppuccin Mocha": "mocha",
  "latte:Catppuccin Latte": "latte",
  "rhodes:Rhodes Island": "rhodes",
  "rhodesdark:Rhodes Island Dark": "rhodesdark",
  "rhine:Rhine Lab": "rhine",
  "garden:Garden of Grotesqueries": "garden",
  "furnace:Furnaceside Fables": "furnace",
  "avemuji:Ave Mujica": "avemuji",
  "boring:Boring": "boring"
}
@var select font "Font" ["Atkinson Hyperlegible", "Alegreya Sans", "Bree Serif", "Cormorant", "Gentium Book Plus", "Lexend", "Open-Dyslexic", "Space Mono"]
@var select fancyfont "Fancy Font" ["Alegreya", "Bungee", "Castoro Titling", "Climate Crisis", "Contrail One", "Croissant One", "Freehand", "Lemonada", "Megrim", "Metamorphous", "Righteous", "Rubik Dirt", "Rubik Distressed", "Srisakdi", "Unbounded", "Uncial Antiqua"]
@var checkbox colorful "More Colors? \n Makes the interface more colorful." 0
@var checkbox unrounded "Force Unrounded Corners \n Some themes will force unrounded corners regardless." 0
==/UserStyle== */

@-moz-document domain("distanthomes.guide") {
  @import url(https://fonts.bunny.net/css?family=alegreya-sans:400,400i,700,700i|atkinson-hyperlegible:400,400i,700,700i|cascadia-code:400,400i,700,700i|lexend:400,700|space-mono:400,400i,700,700i|alegreya:400|croissant-one:400|freehand:400|lemonada:400|righteous:400|srisakdi:400|unbounded:400|open-dyslexic:400,400i,700,700i|climate-crisis:400|contrail-one:400|bungee:400|uncial-antiqua:400|bree-serif:400,400i,700,700i|cormorant:400,400i,700,700i|gentium-book-plus:400,400i,700,700i|castoro-titling:400|megrim:400|metamorphous:400|rubik-dirt:400|rubik-distressed:400);
  
  @import url('https://fonts.cdnfonts.com/css/open-dyslexic');
  
  /* FORTHCOMING:
  - Caerula Arbor
  - Crimson Solitaire
  - Dahuang
  - Black Flow
  - Expeditioners' Jǫklumarkar
  - ...and more?
  */
  
  html {
    container: html;
  }
  
  @container html style(--colorful: 1) {
    h2 {
      color: var(--autumn-red) !important;
    }
  
    h3 {
      font-style: italic;
      color: var(--autumn-orange) !important;
    }
    
    .my-8:has(.bg-cover) {
      border: 3px var(--autumn-amber) solid !important;
    }
    
    .my-3.animate-fadeIn.relative {
      padding-left: calc(var(--spacing) * 4);
      padding-right: calc(var(--spacing) * 4);
      
      &:nth-child(2n+2) {
        padding: calc(var(--spacing) * 4);
        border-radius: var(--radius-xl);
        background-color: color-mix(in srgb-linear, var(--background), transparent 40%);
      }
    }
    
    .rounded-full.overflow-hidden {
      border-color: var(--autumn-orange) !important;
    }
    
    [class*="max-w-[95vw]"] {
      position: fixed !important;
    }
  }
  
  @container html style(--unrounded: 1) {
    * {
      --radius-2xl: 0;
      --radius-xl: 0;
      --radius-lg: 0;
    }
  }
  
  @container html style(--siteTheme: dawn) {
    * {
      --background: #faf4ed;
      --background-gradient: linear-gradient(135deg, #faf4ed 0%, #f2e9e1 50%, #fffaf3 100%);
      --foreground: #797593;
      --foreground-dark: #464261;
      --accent: #b4637a;
      --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
      --card-bg: color-mix(in srgb-linear, #fffaf3, transparent 40%);
      --card-border: #cecacd;
      --muted: #9893a5;
      --autumn-red: #286983;
      --autumn-orange: #56949f;
      --autumn-amber: #907aa9;
      --autumn-rust: #b4637a;
      --autumn-gold: #ea9d34;
    }
    
    body:before {
      content: "";
      display: block;
      width: 576px;
      height: 240px;
      border-radius: 100%;
      background-image: linear-gradient(to right, color-mix(in srgb-linear, var(--autumn-gold), transparent 50%) 30%, color-mix(in srgb-linear, var(--autumn-rust), transparent 30%) 70%, var(--autumn-amber) 100%);
      filter: blur(64px);
      position: fixed;
      transform: rotate(-25deg);
      left: 50%;
      top: -176px;
    }
    
    body:after {
      content: "";
      display: block;
      width: 1030px;
      height: 640px;
      border-radius: 100%;
      background-image: linear-gradient(to left, color-mix(in srgb-linear, var(--autumn-gold), transparent 50%) 30%, color-mix(in srgb-linear, var(--autumn-rust), transparent 30%) 70%, var(--autumn-amber) 100%);
      filter: blur(64px);
      position: fixed;
      transform: rotate(-25deg);
      right: 50%;
      bottom: -176px;
    }
    
    .fixed.inset-0.z-0.bg-cover.bg-center.transition-all.duration-1000 {
      background-color: var(--background);
      background-blend-mode: color-burn;
    }
  }
  
  @container html style(--siteTheme: moon) {
    * {
      --background: #232136;
      --background-gradient: linear-gradient(135deg, #232136 0%, #393552 50%, #2a273f 100%);
      --foreground: #908caa;
      --foreground-dark: #e0def4;
      --accent: #eb6f92;
      --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
      --card-bg: color-mix(in srgb-linear, #2a273f, transparent 40%);
      --card-border: #56526e;
      --muted: #6e6a86;
      --autumn-red: #3e8fb0;
      --autumn-orange: #9ccfd8;
      --autumn-amber: #c4a7e7;
      --autumn-rust: #eb6f92;
      --autumn-gold: #f6c177;
    }
    
    body:before {
      content: "";
      display: block;
      width: 576px;
      height: 240px;
      border-radius: 100%;
      background-image: linear-gradient(to right, color-mix(in srgb-linear, var(--autumn-gold), transparent 50%) 30%, color-mix(in srgb-linear, var(--autumn-rust), transparent 30%) 70%, var(--autumn-amber) 100%);
      filter: blur(64px);
      position: fixed;
      transform: rotate(-25deg);
      left: 50%;
      top: -176px;
    }
    
    body:after {
      content: "";
      display: block;
      width: 1030px;
      height: 640px;
      border-radius: 100%;
      background-image: linear-gradient(to left, color-mix(in srgb-linear, var(--autumn-gold), transparent 50%) 30%, color-mix(in srgb-linear, var(--autumn-rust), transparent 30%) 70%, var(--autumn-amber) 100%);
      filter: blur(64px);
      position: fixed;
      transform: rotate(-25deg);
      right: 50%;
      bottom: -176px;
    }
    
    .fixed.inset-0.z-0.bg-cover.bg-center.transition-all.duration-1000 {
      background-color: var(--background);
      background-blend-mode: soft-light;
    }
  }
  
  @container html style(--siteTheme: mocha) {
    * {
      --background: #1e1e2e;
      --foreground: #cdd6f4;
      --foreground-dark: #bac2de;
      --accent: #89dceb;
      --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
      --card-bg: color-mix(in srgb-linear, #313244, transparent 50%);
      --card-border: #f2cdcd;
      --muted: #a6adc8;
      --autumn-red: #f38ba8;
      --autumn-orange: #fab387;
      --autumn-amber: #f9e2af;
      --autumn-rust: #a6e3a1;
      --autumn-gold: #b4befe;
      --background-gradient: linear-gradient(120deg, color-mix(in srgb-linear, var(--background), var(--autumn-orange) 5%), color-mix(in srgb, var(--background), var(--autumn-gold) 10%));
    }
    
    body:before {
      content: "";
      width: 100%;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      background-image: var(--background-gradient);
      z-index: 2;
      mix-blend-mode: overlay;
    }
  }
  
  @container html style(--siteTheme: latte) {
    * {
      --background: #eff1f5;
      --foreground: #4c4f69;
      --foreground-dark: #5c5f77;
      --accent: #209fb5;
      --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
      --card-bg: color-mix(in srgb-linear, #ccd0da, transparent 50%);
      --card-border: #dc8a78;
      --muted: #6c6f85;
      --autumn-red: #d20f39;
      --autumn-orange: #fe640b;
      --autumn-amber: #df8e1d;
      --autumn-rust: #40a02b;
      --autumn-gold: #7287fd;
      --background-gradient: linear-gradient(120deg, color-mix(in srgb-linear, var(--background), var(--autumn-orange) 5%), color-mix(in srgb, var(--background), var(--autumn-gold) 10%));
    }
    
    body:before {
      content: "";
      width: 100%;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      background-image: var(--background-gradient);
      z-index: 2;
      mix-blend-mode: overlay;
    }
  }
  
  @container html style(--siteTheme: rhodes) {
    * {
      --background: #18d1ff;
      --background-gradient: linear-gradient(135deg, #404040 0%, #404040 50%, #404040 100%);
      --foreground: #333333;
      --foreground-dark: #111111;
      --accent: #ffe800;
      --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
      --card-bg: #DDDDDD;
      --card-border: var(--accent);
      --muted: #666666;
      --autumn-red: #ffa700;
      --autumn-orange: #ffe800;
      --autumn-amber: #a6a6a6;
      --autumn-rust: #fff;
      --autumn-gold: #f00;
    }
    
    [style="background: var(--background-gradient);"] {
      background: none !important;
    }
    
    body {
      &:before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(https://img.veryroundbird.house/userstyle-assets/ri-day.webp) !important;
        background-size: cover;
        pointer-events: none;
        z-index: 1 !important;
      }
      
      &:after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--background);
        opacity: .5;
        mix-blend-mode: soft-light;
        pointer-events: none;
        z-index: 3 !important;
      }
    }
    
    main {
      position: relative;
    }
    
    main > :first-child {
      border: none !important;
      background-color: var(--card-bg);
      padding: calc(var(--spacing) * 8);
      
      &:before {
        content: "";
        position: absolute;
        display: block;
        width: 90%;
        height: 8px;
        top: 0;
        left: 5%;
        background-color: var(--autumn-red);
      }
      
      > :first-child {
        position: relative;
        padding-bottom: calc(var(--spacing) * 8);
        border-bottom: none !important;
        
        &:after {
          content: "";
          box-sizing: border-box;
          width: 30px;
          height: 30px;
          border: 3px var(--autumn-red) solid;
          transform-origin: center;
          transform: translate(-50%, -50%) rotate(-45deg);
          position: absolute;
          top: 100%;
          left: 50%;
          z-index: 2;
        }
        
        h2, h3, p {
          text-align: center;
        }
        
        h2, h3 {
          text-transform: uppercase;
        }
        
        h2 {
          font-size: 1.2rem;
          margin-bottom: 0;
        }
        
        h3 {
          font-size: 1.5rem;
          color: var(--foreground-dark) !important;
          margin-top: 0;
        }
        
        h3, p {
          font-style: normal;
        }
        
        h2, p {
          color: var(--foreground) !important;
        }
        
        p {
          letter-spacing: 2px;
          &:before {
            content: "[ ";
          }
          
          &:after {
            content: " ]";
          }
        }
      }
    }
    
    .fixed.inset-0.z-0.bg-cover.bg-center.transition-all.duration-1000 {
      z-index: 2;
    }
    
    .w-full.p-4.rounded-2xl.transition-all.text-left {
      border-color: var(--background) !important;
      
      h3 {
        color: var(--foreground-dark) !important;
      }
    }
    
    .text-2xl.font-serif.lowercase.transition-all {
      color: var(--background) !important;
    }
    
    .text-xs.px-3.rounded-lg.transition-all.lowercase {
      border-color: var(--background) !important;
      
      &[style*="background: var(--accent);"] {
        background-color: var(--background) !important;
      }
    }
    
    h3.text-xl.font-serif.leading-snug.lowercase {
      color: var(--foreground-dark) !important;
    }
    
    .block.p-6.rounded-2xl.transition-all.shadow-lg {
      border-color: var(--background) !important;
    }
    
    .fixed.bottom-4.right-4.z-50.gap-3 {
      color: var(--foreground-dark) !important;
      border-left: 5px var(--background) solid;
      
      button.text-xl {
        color: var(--foreground-dark) !important;
      }
    }
    nav.items-center {
      border-color: var(--background) !important;
    }
    nav button.rounded-xl {
      color: var(--foreground-dark) !important;
    }
    
    footer {
      color: var(--card-bg) !important;
    }
  }

  @container html style(--siteTheme: rhodesdark) {
    * {
      --background: #1e7f98;
      --background-gradient: linear-gradient(135deg, #404040 0%, #404040 50%, #404040 100%);
      --foreground: #DDDDDD;
      --foreground-dark: #EEEEEE;
      --accent: #ffe800;
      --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
      --card-bg: #111111;
      --card-border: var(--accent);
      --muted: #AAAAAA;
      --autumn-red: #ffa700;
      --autumn-orange: #ffe800;
      --autumn-amber: #a6a6a6;
      --autumn-rust: #fff;
      --autumn-gold: #f00;
    }
    
    [style="background: var(--background-gradient);"] {
      background: none !important;
    }
    
    body {
      &:before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(https://img.veryroundbird.house/userstyle-assets/ri-night.webp) !important;
        background-size: cover;
        pointer-events: none;
        z-index: 1 !important;
      }
      
      &:after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--background);
        opacity: .5;
        mix-blend-mode: soft-light;
        pointer-events: none;
        z-index: 3 !important;
      }
    }
    
    main > :first-child {
      border: none !important;
      background-color: var(--card-bg);
      padding: calc(var(--spacing) * 8);
      
      &:before {
        content: "";
        position: absolute;
        display: block;
        width: 90%;
        height: 8px;
        top: 0;
        left: 5%;
        background-color: var(--autumn-red);
      }
      
      > :first-child {
        position: relative;
        padding-bottom: calc(var(--spacing) * 8);
        border-bottom: none !important;
        
        &:after {
          content: "";
          box-sizing: border-box;
          width: 30px;
          height: 30px;
          border: 3px var(--autumn-red) solid;
          transform-origin: center;
          transform: translate(-50%, -50%) rotate(-45deg);
          position: absolute;
          top: 100%;
          left: 50%;
          z-index: 2;
        }
        
        h2, h3, p {
          text-align: center;
        }
        
        h2, h3 {
          text-transform: uppercase;
        }
        
        h2 {
          font-size: 1.2rem;
          margin-bottom: 0;
        }
        
        h3 {
          font-size: 1.5rem;
          color: var(--foreground-dark) !important;
          margin-top: 0;
        }
        
        h3, p {
          font-style: normal;
        }
        
        h2, p {
          color: var(--foreground) !important;
        }
        
        p {
          letter-spacing: 2px;
          &:before {
            content: "[ ";
          }
          
          &:after {
            content: " ]";
          }
        }
      }
    }
    
    .fixed.inset-0.z-0.bg-cover.bg-center.transition-all.duration-1000 {
      z-index: 2;
    }
    
    .fixed.bottom-4.right-4.z-50.gap-3 {
      color: var(--card-bg) !important;
      border-left: 5px var(--background) solid;
      
      button.text-xl {
        color: var(--card-bg) !important;
      }
    }
    nav.items-center {
      border-color: var(--background) !important;
    }
    nav button.rounded-xl {
      color: var(--card-bg) !important;
    }
  }
  
  @container html style(--siteTheme: rhine) {
    * {
      --radius-2xl: 0 !important;
      --radius-xl: 0 !important;
      --radius-lg: 0 !important;
      --background: #111111;
      --background-gradient: repeating-linear-gradient(to bottom, #111111aa 0 2px, #D7C7A511 3px 4px, #111111aa 5px);
      --foreground: #D7824E;
      --foreground-dark: #111111;
      --accent: #E8B359;
      --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
      --card-bg: #E3DACA;
      --card-border: var(--accent);
      --muted: #333333;
      --autumn-red: #E8B359;
      --autumn-orange: #963A37;
      --autumn-amber: #94BFAF;
      --autumn-rust: #F7EFE0;
      --autumn-gold: #D7C7A5;
    }
    
    body:before {
      content: "";
      width: 100%;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      background-image: var(--background-gradient);
    }
    
    main > :first-child {
      border-left: 0 !important;
      border-right: 0 !important;
      
      &:before,
      &:after {
        content: "";
        width: 100%;
        left: 0;
        height: 5px;
        position: absolute;
        background-image: linear-gradient(to right, var(--autumn-red), var(--autumn-red) 33.2%, var(--autumn-orange) 33.3%, var(--autumn-orange) 66.5%, var(--autumn-amber) 66.6%, var(--autumn-amber));
      }
      
      &:before {
        top: -2px;
      }
      
      &:after {
        bottom: 2px;
      }
      
      h2 {
        color: var(--foreground-dark) !important;
        text-transform: uppercase;
        text-align: center;
      }
      
      h3 {
        text-transform: uppercase;
        text-align: center;
        font-style: normal;
      }
      
      .text-xs.mt-2.italic.opacity-70.lowercase {
        text-align: center;
      }
      
    }
    
    .flex.flex-col.gap-2.items-center.mb-6 {
      padding: calc(var(--spacing) * 4) 0;
      
      h2 {
        color: var(--card-bg) !important;
      }
    }
    
    @container html style(--colorful: 1) {
      .my-3.animate-fadeIn.relative:nth-child(2n+2) {
        .font-bold,
        .leading-relaxed {
          color: var(--autumn-rust) !important;
        }
      }
    
    }
  }
  
  @container html style(--siteTheme: garden) {
    /* background image credit: https://unsplash.com/@ksushlapush */
    * {
      --background: #E96995;
      --background-gradient: linear-gradient(135deg, #E96995 0%, #E96995 50%, #E96995 100%);
      --foreground: #555555;
      --foreground-dark: #333233;
      --accent: #5adeff;
      --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
      --card-bg: #FEFEFE;
      --card-border: var(--accent);
      --muted: #8A8B8A;
      --autumn-red: #B47890;
      --autumn-orange: #4FA0B4;
      --autumn-amber: #8A8B8A;
      --autumn-rust: #a6a6a6;
      --autumn-gold: #f00;
    }
    
    body {
      &:before,
      &:after {
        content: "";
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        position: fixed;
        background-image: url(https://img.veryroundbird.house/userstyle-assets/kseniya-lapteva-6iUiRv_RX8w-unsplash.webp);
        background-size: cover;
        background-attachment: fixed;
        opacity: .8;
        pointer-events: none;
        filter: saturate(1.5) contrast(2);
      }
      
      &:before {
        background-color: var(--background);
        background-blend-mode: screen;
        mix-blend-mode: soft-light;
      }
      
      &:after {
        background-color: var(--accent);
        background-blend-mode: screen;
        transform: rotate(180deg) scaleX(-1);
        mix-blend-mode: multiply;
      }
    }
    
    .max-w-3xl h2 {
      color: var(--card-bg) !important;
    }
    
    main > :first-child {
      background-color: color-mix(in srgb-linear, var(--card-bg), transparent 40%) !important;
      backdrop-filter: blur(5px);
      border-radius: 0 !important;
      border-width: 0 !important;
    }
    
    main > :first-child > :first-child.mb-6.pb-4 {
      background-color: var(--foreground);
      padding: calc(var(--spacing) * 4);
      border-bottom: none !important;
      margin: calc(var(--spacing) * -4);
      margin-bottom: calc(var(--spacing) * 4);
      
      h2, h3, p {
        color: var(--card-bg) !important;
      }
      
      h2, h3 {
        text-transform: uppercase;
      }
      
      h3 {
        font-style: normal;
      }
     
      & > * {
        color: var(--card-bg);
      }
    }
  }
  
  @container html style(--siteTheme: dahuang) {
    
  }
  
  @container html style(--siteTheme: avemuji) {
    /* Background Image Credit: https://unsplash.com/@splashabout */
    * {
      --one: #c12a54;
      --two: #a12347;
      --three: #80827f;
      --four: #231e1d;
      --five: #f2f7f6;
      --six: #c48193;
      --seven: #1d1618;
      --eight: #f3a033;
      --nine: #5c1c2d;
      
      --radius-2xl: 0 !important;
      --radius-xl: 0 !important;
      --radius-lg: 0 !important;
      
      --background: #1d1618;
      --background-gradient: linear-gradient(to bottom, #5c1c2d, var(--background) 50%);
      --foreground: #dce2e1;
      --foreground-dark: #f2f7f6;
      --accent: #c12a54;
      --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
      --card-bg: #231e1d;
      --card-border: #a12347;
      --muted: #80827f;
      --autumn-red: #c48193;
      --autumn-orange: #f3a033;
      --autumn-amber: #5c1c2d;
      --autumn-rust: #8f0000;
      --autumn-gold: #968500;
    }
    
    body:before {
      content:"";
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-size: cover;
      background-image: url(https://img.veryroundbird.house/userstyle-assets/nareeta-martin-S_06N663vig-unsplash.webp), var(--background-gradient);
      background-blend-mode: multiply;
      mix-blend-mode: multiply;
      opacity: 0.75;
      z-index: 1;
    }
    
    main > :first-child {
      > :first-child {
        border-color: var(--autumn-orange) !important;
        
        > h2, > h3, > p {
          text-align: center;
          text-transform: none;
        }

        > h2 {
          font-size: 1rem;
          font-family: var(--font-rubik);
        }

        > h3 {
          font-size: 2rem;
          font-style: normal;
        }
      }
    }
    
    main > :first-child:before {
      content: "";
      width: 50px;
      height: 50px;
      position: absolute;
      top: 0;
      left: 0;
      background-image: url(https://img.veryroundbird.house/userstyle-assets/corner.webp);
      background-size: contain;
      transform: rotate(90deg);
    }
    
    main > :first-child:after {
      content: "";
      width: 50px;
      height: 50px;
      position: absolute;
      top: 0;
      right: 0;
      background-image: url(https://img.veryroundbird.house/userstyle-assets/corner.webp);
      background-size: contain;
      transform: rotate(180deg);
    }
    
    .fixed.bottom-4.right-4.z-50 {
      color: var(--foreground-dark) !important;
    }
  }
  
  @container html style(--siteTheme: crimson) {
    
  }
  
  @container html style(--siteTheme: furnace) {
    /* BG Image Credits: https://unsplash.com/@colinwatts, https://unsplash.com/@anniespratt, some diy photobashing */
    * {
      --background: #762D3E;
      --background-gradient: linear-gradient(135deg, #762D3E 0%, #393B3C 50%, #4367AB 100%);
      --foreground: #E3D7AC;
      --foreground-dark: #F3F2E8;
      --accent: #4367AB;
      --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
      --card-bg: #333534;
      --card-border: var(--accent);
      --muted: #8A8B8A;
      --autumn-red: #A76251;
      --autumn-orange: #3c6164;
      --autumn-amber: #b19531;
      --autumn-rust: #517BAF;
      --autumn-gold: #9C3327;
      --radius-xl: 0;
      --radius-2xl: 0;
      --radius-lg: 0;
    }
    
    body:before {
      content: "";
      position: fixed;
      width: 100%;
      height: 100vh;
      top: 0;
      left: 0;
      background-size: cover;
      background-image: var(--background-gradient);
      mix-blend-mode: hard-light;
    }
    body:after {
      content: "";
      position:fixed;
      background-image: url(https://img.veryroundbird.house/userstyle-assets/scrungled-gold.webp);
      width: 100%;
      height: 100vh;
      top: 0;
      left: 0;
      background-size: cover;
    }
    
    main > :first-child {
      background-color: color-mix(in srgb-linear, var(--card-bg), transparent 15%) !important;
      border: 1px var(--accent) solid;
      
      & > :first-child {
        text-align: center;
        border-color: var(--foreground);
        
        h2, h3 {
          font-style: normal;
        }
        
        h2 {
          font-size: 1.5rem;
        }
        
        h3 {
          font-size: 2rem;
        }
      }
    }
    
    main {
      background-image: url(https://img.veryroundbird.house/userstyle-assets/colin-watts-Hjp111tSqKc-unsplash.webp);
      background-attachment: fixed;
      padding: calc(var(--spacing) * 2);
      border: 1px var(--background) solid;
    }
    
    .fixed.bottom-4.right-4.z-50.px-4.py-3.rounded-lg {
      color: var(--foreground) !important;
      
      button {
        color: var(--foreground) !important;
      }
    }
    
    .my-8.rounded-lg.overflow-hidden.shadow-2xl {
      border: none !important;
      padding: calc(var(--spacing) * 2);
      background-image: url(https://img.veryroundbird.house/userstyle-assets/colin-watts-Hjp111tSqKc-unsplash.webp);
      background-size: cover;
    }
  }
  
  @container html style(--siteTheme: caerula) {
    
  }
  
  @container html style(--siteTheme: sami) {
    
  }
  
  @container html style(--siteTheme: blackflow) {
    
  }
  
  @container html style(--siteTheme: boring) {
    * {
      --background: #FFFFFF;
      --background-gradient: linear-gradient(135deg, #FFFFFF 0%);
      --foreground: #222222;
      --foreground-dark: #000000;
      --accent: #1a539a;
      --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
      --card-bg: #FFFFFF;
      --card-border: #DDDDDD;
      --muted: #666666;
      --autumn-red: #687e9a;
      --autumn-orange: #4FA0B4;
      --autumn-amber: #8A8B8A;
      --autumn-rust: #8f0000;
      --autumn-gold: #968500;
      --tw-shadow-color: transparent;
    }
    
    body:before {
      content: "";
      width: 100%;
      height: 100vh;
      background-color: var(--background);
      z-index: 2;
      position: fixed;
    }
  }
  :root {
    --font-rubik: var(--font);
    --font-rye: var(--fancyfont);
  }

  body {
    --font-rubik: var(--font) !important;
    --font-rye: var(--fancyfont) !important;
    font-family: var(--font), ui-sans-serif, system-ui, sans-serif;
    
    &:before,
    &:after {
      z-index: 2;
    }
  }
  
  @container html not style(--siteTheme: default) {
    .flex.flex-wrap.px-2 {
      justify-content: center;
      margin-top: calc(var(--spacing) * 8) !important;
    }

    .fixed.inset-0.z-0.bg-cover.bg-center.transition-all.duration-1000 {
      z-index: 1;
    }

    header, main, footer {
      z-index: 5;
      position: relative;
    }

    main > :first-child {
      backdrop-filter: blur(20px);
    }

    .fixed.top-4.left-4.z-50.w-10.h-10 {
      background-color: var(--card-bg) !important;
    }

    .fixed.bottom-4.right-4.z-50 {
      background-color: var(--card-border) !important;
      color: var(--background) !important;

      button {
        color: var(--background) !important;
      }
    }
  }
}