/******************************************************************************  
START Glitch hello-app default styles

The styles in this section do some minimal CSS resets, set default fonts and 
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/  
/* Our default values set as CSS variables */  
:root {  
  --color-bg: #f3f9fc;             /* updated to match Settings, Index, etc. */  
  --color-text-main: #000000;  
  --color-text-header: #2800FF;  
  --color-primary: #AFECE0;  
  --wrapper-height: 87vh;  
  --image-max-width: 300px;  
  --image-margin: 3rem;  
  --font-family: "HK Grotesk";  
  --font-family-header: "HK Grotesk";  
}  

/* Basic page style resets */  
* {  
  box-sizing: border-box;  
}  
[hidden] {  
  display: none !important;  
}  

/* Import fonts */  
@font-face {  
  font-family: HK Grotesk;  
  src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Regular.otf?v=1603136326027")  
    format("opentype");  
}  
@font-face {  
  font-family: HK Grotesk;  
  font-weight: bold;  
  src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Bold.otf?v=1603136323437")  
    format("opentype");  
}  

/* Our remix on glitch button */  
.btn--remix {  
  font-family: HK Grotesk;  
  padding: 0.75rem 1rem;  
  font-size: 1.1rem;  
  line-height: 1rem;  
  font-weight: 500;  
  height: 2.75rem;  
  align-items: center;  
  cursor: pointer;  
  background: #FFFFFF;  
  border: 1px solid #000000;  
  box-sizing: border-box;  
  border-radius: 4px;  
  text-decoration: none;  
  color: #000;  
  white-space: nowrap;  
  margin-left: auto;  
}  
.btn--remix img {  
  margin-right: 0.5rem;  
}  
.btn--remix:hover {  
  background-color: #D0FFF1;  
}  

/* Navigation grid */  
.footer {  
  display: flex;  
  justify-content: space-between;  
  margin: 1rem auto 0;  
  padding: 1rem 0 0.75rem 0;  
  width: 100%;  
  flex-wrap: wrap;  
  border-top: 4px solid #fff;  
}  

.footer a:not(.btn--remix):link,  
.footer a:not(.btn--remix):visited {  
  font-family: HK Grotesk;  
  font-style: normal;  
  font-weight: normal;  
  font-size: 1.1rem;  
  color: #000;  
  text-decoration: none;  
  border-style: none;  
}  
.footer a:hover {  
  background: var(--color-primary);  
}  

.footer .links {  
  padding: 0.5rem 1rem 1.5rem;  
  white-space: nowrap;  
}  

.divider {  
  padding: 0 1rem;  
}  
/******************************************************************************  
END Glitch hello-app default styles  
******************************************************************************/  

/* === NAVBAR (universal) === */  
.dashboard-nav {  
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --nav-pad-y: 0.5rem;
  --nav-pad-x: 1rem;
  --nav-font-size: 1rem;
  --nav-height: 2.5rem;
  --nav-radius: 0.5rem;
  --nav-icon-size: 24px;
  position: sticky;  
  top: 0.5rem;  
  transition: top 0.2s ease;  
  background: #fff;  
  z-index: 100;  
  display: flex;  
  width: max-content;  
  margin: 0.5rem auto 1rem;  
  border: 1px solid #ccc;  
  border-radius: var(--nav-radius);  
  overflow: visible;    /* allow dropdowns to overflow */  
  align-items: stretch; /* ensure flex items fill height */  
  font-size: var(--nav-font-size);
  max-width: calc(100vw - 1rem);
  flex-wrap: nowrap;
}  
.dashboard-nav.is-compact {
  --nav-pad-y: 0.4rem;
  --nav-pad-x: 0.7rem;
  --nav-font-size: 0.9rem;
  --nav-height: 2.2rem;
  --nav-radius: 0.45rem;
  --nav-icon-size: 20px;
}
.dashboard-nav.is-tight {
  --nav-pad-y: 0.3rem;
  --nav-pad-x: 0.55rem;
  --nav-font-size: 0.82rem;
  --nav-height: 2rem;
  --nav-radius: 0.4rem;
  --nav-icon-size: 18px;
}
.dashboard-nav.is-mini {
  --nav-pad-y: 0.25rem;
  --nav-pad-x: 0.45rem;
  --nav-font-size: 0.75rem;
  --nav-height: 1.85rem;
  --nav-radius: 0.35rem;
  --nav-icon-size: 16px;
}
.dashboard-nav a,
.dashboard-nav button {
  padding: var(--nav-pad-y) var(--nav-pad-x);  
  text-decoration: none;  
  color: #333;  
  background: #fff;  
  border-right: 1px solid #ccc;  
  transition: background .2s, color .2s;  
  display: flex;  
  align-items: center;  
  height: 100%;  
  align-self: stretch;  
  min-height: var(--nav-height);  
  white-space: nowrap;
}  
.dashboard-nav a,
.dashboard-nav button,
.dashboard-nav .dropdown .dropdown-toggle,
.dashboard-nav .dropdown .menu-toggle {
  font-size: var(--nav-font-size);
  white-space: nowrap;
}
.dashboard-nav button {
  appearance: none;
  border-top: none;
  border-left: none;
  border-bottom: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}
.dashboard-nav img {
  width: var(--nav-icon-size);
  height: var(--nav-icon-size);
}
.dashboard-nav a img {  
  display: block;  
}  
.dashboard-nav a:last-child {  
  border-right: none;  
}  
.dashboard-nav a.active,
.dashboard-nav button.active {  
  background: #72c8f1;  
  color: #fff;  
}  
.dashboard-nav .dropdown.is-active > .dropdown-toggle,
.dashboard-nav .dropdown.is-active > .menu-toggle {
  background: #72c8f1;
  color: #fff;
}
.dashboard-nav a:hover,
.dashboard-nav button:hover {  
  background: #cc3366;  
  color: #fff;  
}  
.dashboard-nav button.menu-toggle {  
  font-size: 1.2rem;  
}  
/* round the “house” and “gear” buttons */  
.dashboard-nav a.home-btn {  
  border-top-left-radius: var(--nav-radius);  
  border-bottom-left-radius: var(--nav-radius);  
}  
.dashboard-nav .kebab-dropdown > .menu-toggle {  
  border-top-right-radius: var(--nav-radius);  
  border-bottom-right-radius: var(--nav-radius);  
  border-right: none;
}  
.dashboard-nav .dropdown {  
  position: relative;  
  display: inline-flex;  
  align-items: stretch;  
  border-right: 1px solid #ccc;  
  min-height: var(--nav-height);  
}  
.dashboard-nav .kebab-dropdown {
  border-right: none;
  border-top-right-radius: var(--nav-radius);
  border-bottom-right-radius: var(--nav-radius);
  background: #fff;
  color: #333;
  overflow: visible;
}
.dashboard-nav .kebab-dropdown:hover,
.dashboard-nav .kebab-dropdown.is-active,
.dashboard-nav .kebab-dropdown.is-open {
  background: #72c8f1;
  color: #fff;
}
.dashboard-nav .kebab-dropdown:hover {
  background: #cc3366;
}
.dashboard-nav .dropdown .dropdown-toggle {
  display: flex;
  align-items: center;
  height: 100%;
  padding: var(--nav-pad-y) var(--nav-pad-x);
  border-right: none;
  cursor: pointer;
}
.dashboard-nav .dropdown .dropdown-toggle::after {  
  content: "";  
  margin-left: 0.35rem;  
  display: inline-block;  
  border-left: 4px solid transparent;  
  border-right: 4px solid transparent;  
  border-top: 5px solid currentColor;  
  opacity: 0.85;  
}  
.dashboard-nav .dropdown .dropdown-toggle:hover {  
  background: #cc3366;  
  color: #fff;  
}  
.dashboard-nav .kebab-dropdown .menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--nav-height) + 0.35rem);
  padding-left: calc(var(--nav-pad-x) - 0.1rem);
  padding-right: calc(var(--nav-pad-x) - 0.1rem);
  border-radius: 0;
  background: transparent;
  color: inherit;
}
.dashboard-nav .kebab-dropdown .menu-toggle.active,
.dashboard-nav .kebab-dropdown .menu-toggle:hover,
.dashboard-nav .dropdown.is-active > .menu-toggle,
.dashboard-nav .dropdown.is-open > .menu-toggle {
  background: transparent;
  color: inherit;
}
.dashboard-nav .kebab-dropdown .menu-toggle span {
  display: block;
  font-size: 1.35em;
  line-height: 0.65;
  transform: translateY(-0.3em);
}
.dashboard-nav .dropdown-menu {  
  display: none;  
  position: absolute;  
  top: 100%;  
  right: 0;
  background: #fff;  
  border: 1px solid #ccc;  
  border-radius: 4px;  
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);  
  min-width: 150px;  
  z-index: 200;  
}  
.dashboard-nav .dropdown-menu a {  
  display: flex;  
  padding: var(--nav-pad-y) var(--nav-pad-x);  
  color: #333;  
  text-decoration: none;  
  font-size: var(--nav-font-size);
  border-right: none;
  min-height: 0;
}  
.dashboard-nav .dropdown-menu a.active {  
  background: #72c8f1;  
  color: #fff;  
}  
.dashboard-nav .dropdown-menu a:not(.active):hover {  
  background: #cc3366;  
  color: #fff;  
}  
.dashboard-nav .dropdown.is-open .dropdown-menu {  
  display: block;  
}  

@media (hover: hover) and (pointer: fine) {
  .dashboard-nav .kebab-dropdown:hover .dropdown-menu {
    display: block;
  }
}

body {  
  font-family: HK Grotesk;  
  background-color: var(--color-bg);  
}  

/* Page structure */  
.wrapper {  
  min-height: var(--wrapper-height);  
  display: grid;  
  place-items: center;  
  margin: 0 1rem;  
}  
.content {  
  display: flex;  
  flex-direction: column;  
  align-items: left;  
  justify-content: left;  
}  

p {  
  font-size: 1.25rem;  
}  

/* Title h1 style */  
.title {  
  color: var(--color-text-header);  
  font-family: HK Grotesk;  
  font-style: normal;  
  font-weight: bold;  
  font-size: 2rem;  
  line-height: 105%;  
  margin: 2rem 0 0;  
}  

/* Very light scaling for our illustration */  
.illo-container {  
  display: flex;  
  justify-content: flex-end;  
}  
.illustration {  
  max-width: 100%;  
  max-height: 150px;  
  margin-top: 1rem;  
}  

/* Styles for our custom color form and its results */  
.color-info {  
  margin-left: 5px;  
}  
.color-search {  
  margin-top: 3rem;  
}  
.color-form {  
  width: 90%;  
  max-width: 500px;  
  margin-left: 5px;  
}  
.color-form a:not(.btn--remix) {  
  font-weight: bold;  
  color: var(--color-text-main);  
  margin-top: 8px;  
}  
.color-form button {  
  margin-top: 8px;  
}  
.color-form button:hover {  
  cursor: pointer;  
  box-shadow: -8px 4px 20px #9BE7D8;  
}  
form {  
  margin: 0.75rem 0;  
}  
button,  
input {  
  font-family: inherit;  
  font-size: 100%;  
  background: #FFFFFF;  
  border: 1px solid #000000;  
  box-sizing: border-box;  
  border-radius: 4px;  
  padding: 0.5rem 1rem;  
}  
label {  
  color: #000000;  
  font-weight: bold;  
}  

/* Instructions */  
.instructions {  
  margin: 1rem auto 0;  
}  
.instructions p {  
  font-size: 1rem;  
}  
h2 {  
  color: var(--color-text-header);  
}  

.flowers {  
  margin: 2em auto;  
  max-width: 928px;  
}