/* ==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",
  "dahuang:Dahuang": "dahuang",
  "crimson:Crimson Solitaire": "crimson",
  "caerula:Caerula Arbor": "caerula",
  "garden:Garden of Grotesqueries": "garden",
  "sami:Expeditioners' Jǫklumarkar": "sami",
  "furnace:Furnaceside Fables": "furnace",
  "blackflow:Black Flow": "blackflow",
  "avemuji:Ave Mujica": "avemuji",
  "boring:Boring": "boring"
}
@var select font "Font" ["Atkinson Hyperlegible", "Alegreya Sans", "Bree Serif", "Cormorant", "Lexend", "Open-Dyslexic", "Space Mono"]
@var select fancyfont "Fancy Font" ["Alegreya", "Bungee", "Climate Crisis", "Contrail One", "Croissant One", "Freehand", "Lemonada", "Righteous", "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);
  
  @import url('https://fonts.cdnfonts.com/css/open-dyslexic');
  
  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;
      z-index: 1;
    }
    
    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;
      z-index: 1;
    }
  }
  
  @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;
      z-index: 1;
    }
    
    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;
      z-index: 1;
    }
  }
  
  @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%));
    }
  }
  
  @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%));
    }
  }
  
  @container html style(--siteTheme: rhodes) {
    * {
      --background: #404040;
      --background-gradient: linear-gradient(135deg, #404040 0%, #404040 50%, #404040 100%);
      --foreground: #FFFFFF;
      --foreground-dark: #DDDDDD;
      --accent: #18d1ff;
      --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
      --card-bg: #555555;
      --card-border: var(--accent);
      --muted: #CCCCCC;
      --autumn-red: #ffa700;
      --autumn-orange: #ffe800;
      --autumn-amber: #a6a6a6;
      --autumn-rust: #fff;
      --autumn-gold: #f00;
    }
  }
  
  @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;
    }
    
    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;
        z-index: 1;
        opacity: .8;
        filter: saturate(1.5) contrast(2);
      }
      
      &:before {
        
        mix-blend-mode: screen;
      }
      
      &: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 {
      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);
      mix-blend-mode: multiply;
      opacity: 0.5;
      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) {
    * {
      --background: #762D3E;
      --background-gradient: linear-gradient(135deg, #762D3E 0%, #393B3C 50%, #333534 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: #9C3327;
      --autumn-amber: #517BAF;
      --autumn-rust: #762D3E;
      --autumn-gold: #4367AB;
    }
  }
  
  @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;
    }
  }
  
  :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;
  }
  
  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;
    }
  }
}