@font-face {
  font-family: CascadiaMono;
  src: url(CascadiaMono.woff2);
}

:root {
   /* PaleBloom Theme Colors */
  --palebloom-shade-0: #1F1F26;
  --palebloom-shade-1: #24242D;
  --palebloom-shade-2: #282832;
  --palebloom-shade-3: #343440;
  --palebloom-shade-4: #494957;
  --palebloom-shade-5: #88889A;
  --palebloom-shade-6: #B2B2C9;
  --palebloom-shade-7: #EAEAFF; 
  --palebloom-pink: #FFCFFE;
  --palebloom-purple: #CDBBFF;
  --palebloom-blue: #AACEFA;
  --palebloom-cyan: #BCEDF9;
  --palebloom-green: #B9E1C6;
  --palebloom-yellow: #F0FFBA;
  --palebloom-orange: #F7D3B7;
  --palebloom-red: #FFA1B1;

  /* Mossglade Theme Colors */
  --mossglade-shade-0: #151E1F;
  --mossglade-shade-1: #192224;
  --mossglade-shade-2: #1E2A2D;
  --mossglade-shade-3: #273C3D;
  --mossglade-shade-4: #395A5C;
  --mossglade-shade-5: #7BA09E;
  --mossglade-shade-6: #9DBFB9;
  --mossglade-shade-7: #E1EBE8; 
  --mossglade-pink: #FDD9D9;
  --mossglade-purple: #EDD7FF;
  --mossglade-blue: #D6E0FF;
  --mossglade-cyan: #B2EDE8;
  --mossglade-green: #C1F7C4;
  --mossglade-yellow: #EDF3CC;
  --mossglade-orange: #F0D8BC;
  --mossglade-red: #FFA1B1;
}

[data-theme="palebloom"] {
  --background: var(--palebloom-shade-0);
  --surface: var(--palebloom-shade-2);
  --text: var(--palebloom-shade-7);
  --text-secondary: var(--palebloom-shade-6);
  --red: var(--palebloom-red);
  --orange: var(--palebloom-orange);
  --yellow: var(--palebloom-yellow);
  --green: var(--palebloom-green);
  --cyan: var(--palebloom-cyan);
  --blue: var(--palebloom-blue);
  --purple: var(--palebloom-purple);
  --pink: var(--palebloom-pink);
}

[data-theme="mossglade"] {
  --background: var(--mossglade-shade-0);
  --surface: var(--mossglade-shade-2);
  --text: var(--mossglade-shade-7);
  --text-secondary: var(--mossglade-shade-6);
  --red: var(--mossglade-red);
  --orange: var(--mossglade-orange);
  --yellow: var(--mossglade-yellow);
  --green: var(--mossglade-green);
  --cyan: var(--mossglade-cyan);
  --blue: var(--mossglade-blue);
  --purple: var(--mossglade-purple);
  --pink: var(--mossglade-pink);
}

h1, h2, h3, h4, h5, h6, p, ul, li {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

#app {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--background);
  font-family: CascadiaMono;
}

.main-content {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  padding: 4rem 0;
  color: var(--text);
  overflow-y: scroll;
}

.theme-switcher {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  outline: none;
  transition: transform .2s ease-in-out;
}
.theme-switcher:hover {
  cursor: pointer;
  transform: scale(1.1);
}

#title {
  font-size: 3rem;
  font-weight: bold;
  transition: color .5s ease;
}

.text-primary {
  font-size: 1.2rem;
  color: var(--text);
}
.text-secondary {
  color: var(--text-secondary);
}
a {
  color: var(--blue);
}

.theme {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  border-radius: 1rem;
  gap: 2rem;
}

.theme-heading {
  font-size: 2rem;
  font-weight: bold;
}

.theme-palebloom {
  --light-color: var(--palebloom-shade-7);
  --dark-color: var(--palebloom-shade-0);
  background: linear-gradient(var(--palebloom-shade-3), var(--palebloom-shade-1));
  color: var(--light-color);
}

.theme-mossglade {
  --light-color: var(--mossglade-shade-7);
  --dark-color: var(--mossglade-shade-0);
  background: linear-gradient(var(--mossglade-shade-3), var(--mossglade-shade-1));
  color: var(--light-color);
}

.theme-content {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.theme-color-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  border-radius: .5rem;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.theme-color-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1rem 2rem;
  color: var(--dark-color);
}
.theme-color-item.is-dark {
  color: var(--light-color);
}

.theme-image {
  width: 40rem;
  margin-bottom: -3rem;
  margin-right: -3rem;
  border-radius: .5rem;
  transition: transform .3s ease-in-out;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}