/* v1.0.2 */

@import './index.css';

:root {
  --midnight: #0f021a;
  --twilight: #6d09c2;
  --orchid: #9313ff;
  --violet: #ae5ef1;
  --lavender: #be9fff;
  --lilac: #d0a2f9;
  --sheet: #e4cdf7;
  --tart: #ffeaff;
  --pink: #f487f6;
  --flower: #f9cdfa;
  --petal: #f8efff;
  --screen: #f4f4fb;
  --whisker: #cac1d2;
  --gray: #9f9f9f;
  --tomato: #fe634a;
  --mango: #ffb947;
  --grass: #33cb5b;
  --leaf: #33cb5b25;
  --sunlight: #f6efe3;
  --moonlight: #efe4f8;
  --note: #ffffeb;
  --bisque: #fff0ed;
  --mochi: #eff7f1;
}

html,
body {
  margin: 0;
  color: var(--midnight);
  font: 400 normal 14px/17px 'Open Sans', sans-serif;
  scrollbar-width: thin;
}

h1, h2, h3, h4, h5, h6 {
  margin: 1rem 0;
  font: 400 normal 1em/1.25em 'Orelega One', serif;
  color: var(--midnight);
}

h1 {
  font-size: 2.4em;
  line-height: 1em;
}

h2 {
  font-size: 2em;
  line-height: 1em;
}

h2.label,
h4.label {
  margin: 0;
  font: normal normal 1em / 1em 'Open Sans', sans-serif;
  color: var(--pink);
}

h3 {
  font-size: 2em;
  line-height: 1em;
}

p,
a,
button,
.button,
input,
.input,
textarea,
select,
option,
.dropdown {
  font: 400 normal 1em 'Open Sans', sans-serif;
}

label {
  cursor: pointer;
}

a,
button.link,
span.link {
  color: var(--orchid);
  cursor: pointer;
  text-decoration: none;
}

a:hover,
button.link:hover,
span.link:hover {
  text-decoration: underline;
}

ul, li {
  margin: 0;
  padding: 0;
}

p, li {
  line-height: 2.25em;
}

button,
.button,
input,
.input,
textarea,
.dropdown {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: .25rem;
  border: 1px solid transparent;
  border-radius: 1rem;
  border: 1px solid var(--sheet);
  box-shadow: 0 1px 0 var(--sheet);
  padding: 1rem 1.25rem;
  transition: all .25s ease;
}

button[disabled],
.button[disabled],
input[disabled],
.input[disabled],
textarea[disabled],
.dropdown[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

input[disabled],
.input[disabled],
textarea[disabled] {
  font-style: italic;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 100vw white inset !important;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: .5rem;
}

input[type="checkbox"] {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .5rem;
  width: 2rem;
  height: 2rem;
  padding: .25rem;
  cursor: pointer;
  color: var(--midnight);
  font-size: 1em;
  text-align: center;
}

input[type="checkbox"]:checked::before {
  content: "✔";
}

textarea {
  display: block;
  resize: none;
}

input:hover,
.input:hover,
textarea:hover {
  border: 1px solid var(--lilac);
  box-shadow: 0 1px 0 var(--lilac);
}

button:hover,
.button:hover {
  background: var(--orchid);
  border: 1px solid var(--twilight);
  box-shadow: 0 1px 0 var(--twilight);
}

input:focus,
.input:has(input:focus),
textarea:focus {
  outline: none;
  border: 1px solid var(--lilac);
}

button,
.button {
  background: var(--violet);
  border: 1px solid var(--orchid);
  box-shadow: 0 1px 0 var(--orchid);
  color: white;
  cursor: pointer;
}

a.button,
.button {
  display: inline-block;
  text-decoration: none;
  width: auto;
  line-height: 1em;
}

button.link,
span.link {
  background: none;
  border: none;
  box-shadow: none;
  display: inline-block;
}

button.link:hover,
span.link:hover {
  text-decoration: underline;
}

button.link.back {
  display: flex;
  align-items: center;
  margin: 2rem 0;
  padding: 0;
  gap: .5rem;
  text-decoration: none;
}

button.primary,
.button.primary,
input.primary,
textarea.primary {
  font-weight: 600;
}

button.primary,
.button.primary {
  padding-left: 3rem;
  padding-right: 3rem;
}

button.cancel,
.button.cancel {
  background: var(--screen);
  border: 1px solid var(--sheet);
  box-shadow: 0 1px 0 var(--sheet);
  color: var(--violet);
}

input,
.input,
textarea {
  background: white;
  color: var(--midnight);
}

.input {
  display: flex;
  align-items: center;
  padding: 0;
  gap: 0;
}

.input > i {
  margin-left: 1rem;
  color: var(--orchid);
  font-weight: 600;
}

.input > input,
.input > textarea {
  background: none;
  box-shadow: none;
  border: none;
  width: 100%;
  height: 100%;
  padding: 1rem 1.25rem 1rem .5rem;
}

.input > textarea {
  height: 3.4rem;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

::placeholder {
  font-style: italic;
  color: var(--gray);
}

.page {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}

.avatar {
  display: block;
  border-radius: 100vw;
  box-shadow: 0 0 1rem var(--lavender);
  box-sizing: border-box;
  background: var(--gray);
}

button.avatar {
  padding: 0;
  box-shadow: none;
}

.avatar > img {
  display: block;
  width: 3rem;
  height: 3rem;
  border-radius: inherit;
}

.button-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 12rem;
  gap: .5rem;
}

.input-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
}

.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  width: 100%;
  gap: .5rem;
  padding: 2rem 0;
}

.card-list > li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: .75rem 1.25rem;
  border-radius: 1rem;
  background: var(--lavender);
  color: white;
}

.card-list > li h3,
.card-list > li p {
  color: white;
}

.card-list > li h3 {
  text-shadow: 0 1px 0 var(--orchid);
}

.card-list > li p {
  font-size: .9em;
}

.card-list > li.promo {
  position: relative;
  background: var(--petal);
  border: 1px solid var(--sheet);
  width: 100%;
}

.card-list > li.promo p {
  color: var(--whisker);
  text-transform: uppercase;
  font-weight: 600;
}

.card-list > li.promo h3 {
  position: relative;
  color: var(--orchid);
  font-size: 3.6em;
}

.card-list > li.promo h3:before {
  content: "4th of July";
  position: absolute;
  width: 100%;
  margin: 1px 1px;
  color: var(--petal);
}

 .card-list > li.promo h3:after {
  content: "4th of July";
  position: absolute;
  width: 100%;
  margin: 1px 1px;
  color: var(--midnight);
  left: 1px;
  top: 1px;
}

.card-list > li.promo h3 + p {
  color: var(--pink);
  flex-direction: row;
  justify-content: flex-start;
  gap: .5rem;
}

.card-list > li.promo div[role="presentation"] {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.card-list > li.promo div[role="presentation"] > img {
  display: block;
  position: absolute;
  right: -2.5rem;
  top: -2.25rem;
  width: 10rem;
  height: 9.07rem;
  z-index: 500;
}

.card-list > li p {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  line-height: 1.5em;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
}

.error,
.link.error {
  color: var(--tomato);
}

.link.error:hover {
  background: none;
  text-decoration: none;
}

.overlay {
  position: fixed;
  z-index: 9000;
  background: rgba(255, 255, 255, .5);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay.hide {
  display: none;
}

.overlay > * {
  box-shadow: 0 0 3rem var(--sheet);
}

.disclaimer {
  padding: 0;
  font-size: .9em;
}

button.disclaimer {
  text-align: left;
  font-style: italic;
}

.br {
  display: block;
  width: 100%;
  border-top: 1px solid var(--gray);
  margin: 1rem 0;
  padding: 1rem 0;
}

.menu-wrapper {
  position: relative;
}

.dropdown {
  position: absolute;
  right: 0;
  top: calc(1rem + 100%);
  background: var(--petal);
  border: 1px solid var(--sheet);
  box-shadow: none;
  padding: 0;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  overflow-y: auto;
  gap: 0;
  z-index: 8000;
}

.dropdown.full {
  width: 100%;
  max-height: 18rem;
}

.dropdown > a,
.dropdown > button.link,
.dropdown > .item {
  display: block;
  text-decoration: none;
  text-align: left;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 1rem 1.25rem;
  color: var(--orchid);
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.dropdown > a:hover,
.dropdown > .link:hover,
.dropdown > .item:hover {
  color: var(--petal);
  background: var(--orchid);
}

.dropdown > a,
.dropdown > button.link,
.dropdown > .item {
  border: none;
  border-radius: 0;
}

.dropdown > .link:first-of-type {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.dropdown > .link:last-of-type {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.hr {
  display: block;
  width: 100%;
  flex: 1;
  border-bottom: 1px solid var(--petal);
  padding-bottom: 1.5rem;
  margin-bottom: 1rem;
}

@media (max-width: 1000px) {
  .card-list {
    display: flex;
    flex-direction: column-reverse;
  }

  .card-list > li.promo {
    overflow: hidden;
  }

  .overlay > aside {
    max-width: 90%;
  }
}