/*
** styles/index.css
**
*/

/******************
** Font Sizes
*******************/

section.settingsFontSizes {
  display: flex;
  flex-direction: row;
  flex: 100%;
  
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

section.settingsFontSizes > div#themeFontSizeDecrease,
section.settingsFontSizes > div#themeFontSizeIncrease {
  flex: calc( 25% - 20px);
  height: 40px;
  margin: 10px 10px 10px 10px;
  
  cursor: crosshair;
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

section.settingsFontSizes > div#themeFontSizeReset {
  flex: calc( 50% - 22px);
  height: 40px;
  margin: 10px 10px 10px 10px;
  
  border: 1px solid var(--color-border-site-020);
  cursor: crosshair;
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

section.settingsFontSizes > div:hover {
  background-color: var(--color-background-theme-010);
}

section.settingsFontSizes > div#themeFontSizeReset > span {
  vertical-align: middle;
  position: relative;
  top: 25%;
  font-size: var(--font-size-12);
}

section.settingsFontSizes > div > span {
  font-size: var(--font-size-18);
}

/******************
** Themes
*******************/

section.settingsThemes {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

section.settingsThemes > div.settingsThemesItem {
  flex: calc( ( 100% - 20px ) / 4 );
  height: 40px;
  cursor: crosshair;
  margin: 10px 10px 10px 10px;
  text-align: center;
}

section.settingsThemes > div.settingsThemesItem > span {
  vertical-align: middle;
  position: relative;
  top: 25%;
}

section.settingsThemes > div.settingsThemesItem#themeWhite {
  color: hsl(0, 0%, 10%);
  background-color: hsl(0, 0%, 100%);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.settingsThemes > div.settingsThemesItem#themeWhite:hover {
  background-color: hsl(0, 0%, 80%);
}

section.settingsThemes > div.settingsThemesItem#themeLight {
  color: hsl(0, 0%, 0%);
  background-color: hsl(0, 0%, 80%);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.settingsThemes > div.settingsThemesItem#themeLight:hover {
  background-color: hsl(0, 0%, 60%);
}

section.settingsThemes > div.settingsThemesItem#themeDark {
  color: hsl(0, 0%, 100%);
  background-color: hsl(0, 0%, 20%);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.settingsThemes > div.settingsThemesItem#themeDark:hover {
  background-color: hsl(0, 0%, 40%);
}

section.settingsThemes > div.settingsThemesItem#themeBlack {
  color: hsl(0, 0%, 90%);
  background-color: hsl(0, 0%, 0%);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.settingsThemes > div.settingsThemesItem#themeBlack:hover {
  background-color: hsl(0, 0%, 20%);
}

/******************
** Theme Colors
******************/

section.settingsThemeColorsGrayscale {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0px 10px 0px 10px;
}

section.settingsThemeColorsGrayscale > div.settingsThemeColorsGrayscaleItem {
  flex: 100%;
  text-align: center;
  margin: 10px 0px 10px 0px;
  height: 20px;
  cursor: crosshair;
}

section.settingsThemeColorsGrayscale > div.settingsThemeColorsGrayscaleItem > span {
  vertical-align: middle;
  position: relative;
  top: 25%;
}

section.settingsThemeColors {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0px 10px 0px 10px;
}

section.settingsThemeColors > div.settingsThemeColorsItem {
  flex: calc( 100% / 72 );
  text-align: center;
  margin: 10px 0px 10px 0px;
  height: 40px;
  cursor: crosshair;
}

section.settingsThemeColors > div.settingsThemeColorsItem > span {
  vertical-align: middle;
  position: relative;
  top: 25%;
}

/******************
** Theme Color Presets
******************/

section.settingsThemeColorPresets {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem {
  flex: calc( 100% - 20px );
  margin: 10px 10px 10px 10px;
  height: 40px;
  text-align: center;
  cursor: crosshair;
}

section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem > span {
  vertical-align: middle;
  position: relative;
  top: 25%;
}

/* Fire */
section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetFire1 {
  color: hsl(0, 0%, 10%);
  background: linear-gradient(to bottom left, hsl(20, 100%, 40%), hsl(50, 100%, 40%), hsl(0, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetFire1:hover {
  background: linear-gradient(to bottom left, hsl(20, 100%, 50%), hsl(50, 100%, 50%), hsl(0, 100%, 50%));
}

section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetFire2 {
  color: hsl(0, 0%, 90%);
  background: linear-gradient(to bottom left, hsl(0, 100%, 40%), hsl(20, 100%, 40%), hsl(50, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetFire2:hover {
  background: linear-gradient(to bottom left, hsl(0, 100%, 50%), hsl(20, 100%, 50%), hsl(50, 100%, 50%));
}

section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetFire3 {
  color: hsl(0, 0%, 90%);
  background: linear-gradient(to bottom left, hsl(50, 100%, 40%), hsl(0, 100%, 40%), hsl(20, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetFire3:hover {
  background: linear-gradient(to bottom left, hsl(50, 100%, 50%), hsl(0, 100%, 50%), hsl(20, 100%, 50%));
}

/* Water */
section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetWater1 {
  color: hsl(0, 0%, 90%);
  background: linear-gradient(to bottom left, hsl(240, 100%, 40%), hsl(265, 100%, 40%), hsl(180, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetWater1:hover {
  background: linear-gradient(to bottom left, hsl(240, 100%, 50%), hsl(265, 100%, 50%), hsl(180, 100%, 50%));
}

section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetWater2 {
  color: hsl(0, 0%, 90%);
  background: linear-gradient(to bottom left, hsl(180, 100%, 40%), hsl(240, 100%, 40%), hsl(265, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetWater2:hover {
  background: linear-gradient(to bottom left, hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(265, 100%, 50%));
}

section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetWater3 {
  color: hsl(0, 0%, 10%);
  background: linear-gradient(to bottom left, hsl(265, 100%, 40%), hsl(180, 100%, 40%), hsl(240, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetWater3:hover {
  background: linear-gradient(to bottom left, hsl(265, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%));
}

/* Earth */
section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetEarth1 {
  color: hsl(0, 0%, 10%);
  background: linear-gradient(to bottom left, hsl(35, 100%, 40%), hsl(65, 100%, 40%), hsl(120, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetEarth1:hover {
  background: linear-gradient(to bottom left, hsl(35, 100%, 50%), hsl(65, 100%, 50%), hsl(120, 100%, 50%));
}

section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetEarth2 {
  color: hsl(0, 0%, 10%);
  background: linear-gradient(to bottom left, hsl(120, 100%, 40%), hsl(35, 100%, 40%), hsl(65, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetEarth2:hover {
  background: linear-gradient(to bottom left, hsl(120, 100%, 50%), hsl(35, 100%, 50%), hsl(65, 100%, 50%));
}

section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetEarth3 {
  color: hsl(0, 0%, 10%);
  background: linear-gradient(to bottom left, hsl(65, 100%, 40%), hsl(120, 100%, 40%), hsl(35, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetEarth3:hover {
  background: linear-gradient(to bottom left, hsl(65, 100%, 50%), hsl(120, 100%, 50%), hsl(35, 100%, 50%));
}

/* Valentines */
section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetValentines1 {
  color: hsl(0, 0%, 90%);
  background: linear-gradient(to bottom left, hsl(305, 100%, 40%), hsl(275, 100%, 40%), hsl(350, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetValentines1:hover {
  background: linear-gradient(to bottom left, hsl(305, 100%, 50%), hsl(275, 100%, 50%), hsl(350, 100%, 50%));
}

section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetValentines2 {
  color: hsl(0, 0%, 90%);
  background: linear-gradient(to bottom left, hsl(350, 100%, 40%), hsl(305, 100%, 40%), hsl(275, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetValentines2:hover {
  background: linear-gradient(to bottom left, hsl(350, 100%, 50%), hsl(305, 100%, 50%), hsl(275, 100%, 50%));
}

section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetValentines3 {
  color: hsl(0, 0%, 90%);
  background: linear-gradient(to bottom left, hsl(275, 100%, 40%), hsl(350, 100%, 40%), hsl(305, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetValentines3:hover {
  background: linear-gradient(to bottom left, hsl(275, 100%, 50%), hsl(350, 100%, 50%), hsl(305, 100%, 50%));
}

/* Easter */
section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetEaster1 {
  color: hsl(0, 0%, 10%);
  background: linear-gradient(to bottom left, hsl(60, 100%, 40%), hsl(180, 100%, 40%), hsl(300, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetEaster1:hover {
  background: linear-gradient(to bottom left, hsl(60, 100%, 50%), hsl(180, 100%, 50%), hsl(300, 100%, 50%));
}

section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetEaster2 {
  color: hsl(0, 0%, 10%);
  background: linear-gradient(to bottom left, hsl(300, 100%, 40%), hsl(60, 100%, 40%), hsl(180, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetEaster2:hover {
  background: linear-gradient(to bottom left, hsl(300, 100%, 50%), hsl(60, 100%, 50%), hsl(180, 100%, 50%));
}

section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetEaster3 {
  color: hsl(0, 0%, 10%);
  background: linear-gradient(to bottom left, hsl(180, 100%, 40%), hsl(300, 100%, 40%), hsl(60, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetEaster3:hover {
  background: linear-gradient(to bottom left, hsl(180, 100%, 50%), hsl(300, 100%, 50%), hsl(60, 100%, 50%));
}

/* Halloween */
section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetHalloween1 {
  color: hsl(0, 0%, 10%);
  background: linear-gradient(to bottom left, hsl(35, 100%, 40%), hsl(55, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetHalloween1:hover {
  background: linear-gradient(to bottom left, hsl(35, 100%, 50%), hsl(55, 100%, 50%));
}

section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetHalloween2 {
  color: hsl(0, 0%, 10%);
  background: linear-gradient(to bottom left, hsl(55, 100%, 40%), hsl(35, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetHalloween2:hover {
  background: linear-gradient(to bottom left, hsl(55, 100%, 50%), hsl(35, 100%, 50%));
}

/* Christmas */
section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetChristmas1 {
  color: hsl(0, 0%, 90%);
  background: linear-gradient(to bottom left, hsl(0, 100%, 40%), hsl(120, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetChristmas1:hover {
  background: linear-gradient(to bottom left, hsl(0, 100%, 50%), hsl(120, 100%, 50%));
}

section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetChristmas2 {
  color: hsl(0, 0%, 90%);
  background: linear-gradient(to bottom left, hsl(120, 100%, 40%), hsl(0, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.settingsThemeColorPresets > div.settingsThemeColorPresetsItem#presetChristmas2:hover {
  background: linear-gradient(to bottom left, hsl(120, 100%, 50%), hsl(0, 100%, 50%));
}