/* ==UserStyle==
@name           distanthomes.guide
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
@var select siteTheme "Site Theme" {
  "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",
  "rhine:Rhine Lab": "rhine",
  "dahuang:Dahuang": "dahuang",
  "avemuji:Ave Mujica": "avemuji"
}
@var select font "Font" ["Atkinson Hyperlegible", "Lexend", "Space Mono"]
==/UserStyle== */

@-moz-document domain("distanthomes.guide") {
  html {
    container: html;
  }
  
  @container html style(--siteTheme: dawn) {
    * {
      --background: #faf4ed;
      --background-gradient: linear-gradient(135deg, #faf4ed 0%, #f2e9e1 50%, #fffaf3 100%);
      --foreground: #464261;
      --foreground-dark: #797593;
      --accent: #b4637a;
      --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
      --card-bg: #fffaf3;
      --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;
    }
  }
  
  @container html style(--siteTheme: moon) {
    * {
      --background: #232136;
      --background-gradient: linear-gradient(135deg, #232136 0%, #393552 50%, #2a273f 100%);
      --foreground: #e0def4;
      --foreground-dark: #908caa;
      --accent: #eb6f92;
      --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
      --card-bg: #2a273f;
      --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;
    }
  }
  
  @container html style(--siteTheme: mocha) {
    * {
      --background: #1e1e2e;
      --background-gradient: linear-gradient(135deg, #1e1e2e 0%, #181825 50%, #11111b 100%);
      --foreground: #cdd6f4;
      --foreground-dark: #bac2de;
      --accent: #89dceb;
      --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
      --card-bg: #313244;
      --card-border: #b4befe;
      --muted: #a6adc8;
      --autumn-red: #f38ba8;
      --autumn-orange: #fab387;
      --autumn-amber: #f9e2af;
      --autumn-rust: #a6e3a1;
      --autumn-gold: #b4befe;
    }
  }
  
  @container html style(--siteTheme: latte) {
    * {
      --background: #eff1f5;
      --background-gradient: linear-gradient(135deg, #eff1f5 0%, #e6e9ef 50%, #dce0e8 100%);
      --foreground: #4c4f69;
      --foreground-dark: #5c5f77;
      --accent: #209fb5;
      --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
      --card-bg: #ccd0da;
      --card-border: #7287fd;
      --muted: #6c6f85;
      --autumn-red: #d20f39;
      --autumn-orange: #fe640b;
      --autumn-amber: #df8e1d;
      --autumn-rust: #40a02b;
      --autumn-gold: #7287fd;
    }
  }
  
  @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) {
    
  }

  body {
    font-family: var(--font-rubik), ui-sans-serif, system-ui, sans-serif;
  }
}