/* Setup */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

:root {
  --color-brand: hsl(204 88% 53%);
  --color-text-primary: hsl(0 0% 98%);
  --color-text-muted: hsl(210 34% 80%);
  --color-bg-primary: hsl(210 34% 13%);
  --color-bg-secondary: hsl(209, 35%, 15%);
  --color-btn-primary-active: var(--color-brand);
  --color-btn-primary-active-hover: hsl(204 88% 60%);
  --color-btn-primary-inactive: hsl(205 70% 33%);
  --color-btn-secondary: hsl(192 19% 95%);
  --color-border-primary: hsl(0, 0%, 34%);
  --color-link-hover: hsl(209 22% 19%);
  --color-placeholder: hsl(210 34% 80%);
  --clr-input-txt: hsl(177 100% 15%);

  --red: #990000;
  --tomatoOrange: hsla(0, 75%, 60%, 1);
  --redBrown: #633539;
  --blue: #336699;
  --black: #1f273a;
  --white: #fff;
  --grey: #efefef;
  --greyBlue: hsla(222, 9%, 57%, 1);
  --lighterGreyBlue: #6a707e;
  --yellow: #ffc600;
  --light: #ffffff;
  --dark: #000000;
  --lightGrey: #c5c5c5;
  --lightGray: var(--lightGrey);
  --imGoingToFaint: #fbfbfb;
  --redBrown: #633539;
  --maxWidth: 1200px;

  /* Define Colors intentions */
  --primary: var(--greyBlue);
  --secondary: var(--redBrown);
  --background: var(--white);
  --textColor: var(--lighterGreyBlue);
  --buttonTextColor: var(--white);
  --lineColor: var(--grey);
  --cardBg: var(--darkGrey);
  --headerBackground: var(--greyBlue);
  --footerBackground: var(--darkGrey);
  --linkHover: var(--white);
  --lightHairLine: #c5c5c5;

  --radius-base: 1rem;

  /* Type */
  --headingFont: 'Merriweather Sans', sans-serif;
  --bodyFont: 'Work Sans', sans-serif;
  --baseFontSize: 100%;
  --h1: 3.052rem;
  --h2: 2.441rem;
  --h3: 1.953rem;
  --h4: 1.563rem;
  --h5: 1.25rem;
  --h6: 1.8rem;
  --bodyTextSize: 1.8rem;
  --smallText: 1.44rem;
  --lineHeight: 2.25rem;
  --font-serif: 'Inter', sans-serif;
  --font-16: 1.6rem;
  --font-18: 1.8rem;
  --font-24: 2.4rem;
  --font-32: 3.2rem;
  --font-80: 8rem;

  --spacing-4: 0.4rem;
  --spacing-8: 0.5rem;
  --spacing-16: 1.6rem;
  --spacing-20: 2rem;
  --spacing-24: 2.4rem;
  --spacing-32: 3.2rem;

  /* Elevation */
  --level-0: none;
  --level-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --level-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --level-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --level-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Z Indexes */
  --zBase: 1;

  /* Positioning */
  --containerPadding: 2.5%;
  --headerHeight: 8rem;
  --borderRadius: 4px;
  --borderRadiusLarge: 10px;
  --maxWidth: 1200px;

  /* Font */
  --font-sans: 'Poppins', sans-serif;
  --font-serif: 'Arsenica', serif;
  --font-mono: Source Code Pro, monospace;
  --font-dyslexic: OpenDyslexic, sans-serif;
  --font-dyslexic-mono: OpenDyslexic Mono, monospace;

  --font-16: 1.6rem;
  --font-24: 2.4rem;
  --font-32: 3.2rem;
  --font-48: 4.8rem;
  --font-96: 9.6rem;

  /* Spacing */
  --spacing-4: 0.4rem;
  --spacing-8: 0.8rem;
  --spacing-16: 1.6rem;
  --spacing-24: 2.4rem;
  --spacing-32: 3.2rem;
  --spacing-64: 6.4rem;
  --spacing-128: 12.8rem;

  /* Scrollbar */
  --clr-scrollbar-thumb: hsl(173 10% 20%);

  /* Shadows */
  --shadow-sm: 0px 0px 4px 4px hsl(0 0% 0% / 4%);
  --shadow-md: 0px 0px 10px 4px hsl(0 0% 0% / 10%);
  --shadow-lg: 0px 0px 20px 8px hsl(0 0% 0% / 20%);

  /* Border radius */
  --rounded-4: 4px;
  --rounded-20: 20px;

  --toast-background: var(--color-brand);
  --toast-error-background: var(--tomatoOrange);

  /* Media Queryies - Not yet supported in CSS */
  /* 
      --xsmall: 340px;
      --small: 500px;
      --large: 960px;
      --wide: 1200px;
    */

  /* Light Theme Default */
  /* Global */
    --clr-primary: hsl(220 100% 50%);
    --clr-txt: hsl(220 10% 10%);
    --clr-bg: hsl(0 0% 98%);
  
    --bg: radial-gradient(hsl(0 0% 98%), var(--clr-bg));
    --bg-opacity: 0.7;
  
    /* Menu */
    --clr-menu-text: hsl(220 10% 10%);
    --clr-menu-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
    --clr-menu-arrow-bg: hsl(0 0% 98%);
    --clr-menu-border: hsl(0 0% 80%);
  
    --clr-theme-txt: hsl(0 0% 98%);
    --clr-theme-active: hsl(220 100% 60%);
    --clr-switch-on-bg: hsl(220 40% 90%);
    --clr-switch-off-bg: hsl(220 40% 80%);
  
    /* Hero */
    --clr-hero-txt: hsl(220 10% 40%);
    --clr-hero-bg: linear-gradient(270deg, hsl(0 0% 94%) 43%, hsl(0 0% 98%) 66%);
    --clr-hero-divider-bg: hsl(0 0% 80%);
    --clr-input-txt: hsl(220 10% 98%);
    --clr-input-bg: hsl(0 0% 98%);
    --clr-input-placeholder-txt: hsl(220 10% 60%);
    --clr-input-border: hsl(0 0% 80%);
  
    /* Card */
    --clr-card-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
    --clr-card-txt: hsl(220 10% 40%);
  
    /* Link */
    --clr-link-txt: hsl(220 10% 10%);
    --clr-link-background: hsl(0 0% 100%);
  
    /* Footer */
    --clr-footer-txt: hsl(220 10% 10%);
    --clr-footer-bg: hsl(0 0% 98%);
  
    /* Post */
    --post-overlay-bg: radial-gradient(hsl(0 0% 100% / 60%), var(--clr-bg));
    --post-blockquote-txt: hsl(0 0% 40%);
    --post-blockquote-bg: hsl(0 0% 98%);
    --post-blockquote-border: hsl(0 0% 84%);
  
    --clr-code-bg: hsl(0 0% 98%);
    --clr-code-title: hsl(0 0% 40%);
    --clr-code-border: hsl(0 0% 84%);
    --clr-code-line-number: hsl(0 0% 60%);
    --clr-code-line-highlight: hsl(0 0% 94%);
    --clr-code-inline-txt: hsl(0 0% 98%);
    --clr-code-inline-bg: hsl(0 0% 20%);
  
    --clr-token-1: hsl(220 100% 50%);
    --clr-token-2: hsl(220 60% 50%);
    --clr-token-3: hsl(220 100% 50%);
    --clr-token-4: hsl(0 0% 20%);
    --clr-token-5: hsl(0 0% 60%);
  
    /* Input Fields */
    --input-bg: #181a1b;
}

html {
  width: 100%;
  // background-color: var(--seaFoamBlue);
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  // line-height: var(--lineHeight);
  color: var(--primary);
  padding: 0;
  margin: 0;
  font-size: var(--bodyTextSize);
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
  scrollbar-width: thin;
}

html,
body {
  height: 100%;
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-brand);
  border-radius: var(--radius-base);
}

::selection {
  background: var(--primary);
  color: var(--white);
}

body {
  font-family: var(--font-serif);
  font-size: var(--font-16);
  // color: var(--color-text-primary);
  // background-color: var(--color-bg-primary);
  color: var(--clr-txt);
  background-color: var(--clr-bg);
  opacity: var(--bg-opacity);
  // background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 60'%3E%3Cg %3E%3Crect fill='%23555555' width='11' height='11'/%3E%3Crect fill='%23565656' x='10' width='11' height='11'/%3E%3Crect fill='%23575757' y='10' width='11' height='11'/%3E%3Crect fill='%23575757' x='20' width='11' height='11'/%3E%3Crect fill='%23585858' x='10' y='10' width='11' height='11'/%3E%3Crect fill='%23595959' y='20' width='11' height='11'/%3E%3Crect fill='%235a5a5a' x='30' width='11' height='11'/%3E%3Crect fill='%235b5b5b' x='20' y='10' width='11' height='11'/%3E%3Crect fill='%235c5c5c' x='10' y='20' width='11' height='11'/%3E%3Crect fill='%235c5c5c' y='30' width='11' height='11'/%3E%3Crect fill='%235d5d5d' x='40' width='11' height='11'/%3E%3Crect fill='%235e5e5e' x='30' y='10' width='11' height='11'/%3E%3Crect fill='%235f5f5f' x='20' y='20' width='11' height='11'/%3E%3Crect fill='%23606060' x='10' y='30' width='11' height='11'/%3E%3Crect fill='%23616161' y='40' width='11' height='11'/%3E%3Crect fill='%23626262' x='50' width='11' height='11'/%3E%3Crect fill='%23626262' x='40' y='10' width='11' height='11'/%3E%3Crect fill='%23636363' x='30' y='20' width='11' height='11'/%3E%3Crect fill='%23646464' x='20' y='30' width='11' height='11'/%3E%3Crect fill='%23656565' x='10' y='40' width='11' height='11'/%3E%3Crect fill='%23666666' y='50' width='11' height='11'/%3E%3Crect fill='%23676767' x='60' width='11' height='11'/%3E%3Crect fill='%23686868' x='50' y='10' width='11' height='11'/%3E%3Crect fill='%23686868' x='40' y='20' width='11' height='11'/%3E%3Crect fill='%23696969' x='30' y='30' width='11' height='11'/%3E%3Crect fill='%236a6a6a' x='20' y='40' width='11' height='11'/%3E%3Crect fill='%236b6b6b' x='10' y='50' width='11' height='11'/%3E%3Crect fill='%236c6c6c' x='70' width='11' height='11'/%3E%3Crect fill='%236d6d6d' x='60' y='10' width='11' height='11'/%3E%3Crect fill='%236e6e6e' x='50' y='20' width='11' height='11'/%3E%3Crect fill='%236e6e6e' x='40' y='30' width='11' height='11'/%3E%3Crect fill='%236f6f6f' x='30' y='40' width='11' height='11'/%3E%3Crect fill='%23707070' x='20' y='50' width='11' height='11'/%3E%3Crect fill='%23717171' x='80' width='11' height='11'/%3E%3Crect fill='%23727272' x='70' y='10' width='11' height='11'/%3E%3Crect fill='%23737373' x='60' y='20' width='11' height='11'/%3E%3Crect fill='%23747474' x='50' y='30' width='11' height='11'/%3E%3Crect fill='%23747474' x='40' y='40' width='11' height='11'/%3E%3Crect fill='%23757575' x='30' y='50' width='11' height='11'/%3E%3Crect fill='%23767676' x='90' width='11' height='11'/%3E%3Crect fill='%23777777' x='80' y='10' width='11' height='11'/%3E%3Crect fill='%23787878' x='70' y='20' width='11' height='11'/%3E%3Crect fill='%23797979' x='60' y='30' width='11' height='11'/%3E%3Crect fill='%237a7a7a' x='50' y='40' width='11' height='11'/%3E%3Crect fill='%237b7b7b' x='40' y='50' width='11' height='11'/%3E%3Crect fill='%237c7c7c' x='90' y='10' width='11' height='11'/%3E%3Crect fill='%237c7c7c' x='80' y='20' width='11' height='11'/%3E%3Crect fill='%237d7d7d' x='70' y='30' width='11' height='11'/%3E%3Crect fill='%237e7e7e' x='60' y='40' width='11' height='11'/%3E%3Crect fill='%237f7f7f' x='50' y='50' width='11' height='11'/%3E%3Crect fill='%23808080' x='90' y='20' width='11' height='11'/%3E%3Crect fill='%23818181' x='80' y='30' width='11' height='11'/%3E%3Crect fill='%23828282' x='70' y='40' width='11' height='11'/%3E%3Crect fill='%23838383' x='60' y='50' width='11' height='11'/%3E%3Crect fill='%23848484' x='90' y='30' width='11' height='11'/%3E%3Crect fill='%23848484' x='80' y='40' width='11' height='11'/%3E%3Crect fill='%23858585' x='70' y='50' width='11' height='11'/%3E%3Crect fill='%23868686' x='90' y='40' width='11' height='11'/%3E%3Crect fill='%23878787' x='80' y='50' width='11' height='11'/%3E%3Crect fill='%23888888' x='90' y='50' width='11' height='11'/%3E%3C/g%3E%3C/svg%3E");
  // background-attachment: fixed;
  // background-size: cover;
}

a {
  text-decoration: none;
  color: var(--clr-txt);
}

fieldset {
  border: 0;
  border-radius: 4px;
  padding: 0;

  &[disabled] {
    opacity: 0.5;
  }
}

label {
  display: block;
  margin: var(--spacing-8) 0;
  font-size: var(--font-24);
  color: var(--clr-txt);
}

input {
  padding: var(--spacing-8);
  font-size: var(--font-16);
  border-radius: var(--radius-base);
  background-color: var(--clr-input-bg);
  border: solid 2px var(--clr-theme-active);

  &:focus {
    outline: 0;
    border-color: var(--clr-primary);
  }
}

.btn {
  padding: var(--spacing-4) var(--spacing-8);
  font-size: var(--font-18);
  font-weight: bold;
  color: var(--color-text-primary);
  background-color: var(--color-btn-primary-active);
  border-radius: var(--radius-base);
  border: none;
  cursor: pointer;
}

.btn:hover {
  background-color: var(--color-btn-primary-active-hover);
}

.btn:disabled {
  color: var(--color-text-muted);
  background-color: var(--color-btn-primary-inactive);
  cursor: not-allowed;
}

.remove {
  background-color: var(--warning);

  &:hover {
    background-color: var(--warning-hover);
  }
}

ul,
ol {
  list-style: none;
}

/* Utils */

.responsive {
  resize: both;
  overflow: scroll;
  border: 1px solid hsl(0 0% 0%);
}

.placeholder {
  padding: var(--spacing-20) 0;
  background-color: var(--color-placeholder);
  border-radius: var(--radius-base);
}

.icon {
  width: 24px;
  height: 24px;
}