:root {
  --tpad: 0.2rem;
  --spad: 0.4rem;
  --mpad: 1rem;
  --bpad: 2rem;
  --hpad: 3rem;
  --epad: 4rem;
  --srad: 0.4rem;
  --mrad: 1rem;
  --brad: 2rem;
  --white: oklch(100% 0 0);
  --white-a: #ffffff33;
  --white-b: #ffffff66;
  --white-g: #ffffff99;
  --white-d: oklch(98% 0 0);
  --ash: #eee;
  --ash-a: #ddd;
  --ash-b: oklch(.8 0 0);
  --ash-g: #050404;
  --ash-d: #aaa;
  --black-p: #111;
  --black-g: #777;
  --black-d: #888;
  --red: #f55;
  --grey: #3333;
  --black: #3339;
  --b: 0 0 0;
  --shadow: oklch(0% 0 0 / 0.9);
  --shadow-b: oklch(10% 0 0 / 0.5);
  --shadow-g: oklch(10% 0 0 / 0.3);
  --shadow-d: oklch(10% 0 0 / 0.1);
  --fast-in-bezier: cubic-bezier(0.4, 0, 0.2, 1);
  --orange: 0.72 0.17 70;
  --orange-1: oklch(0.94 0.03 70);
  --orange-2: oklch(0.89 0.06 70);
  --orange-3: oklch(0.83 0.1 70);
  --orange-4: oklch(0.78 0.13 70);
  --orange-5: oklch(0.72 0.17 70);
  --orange-6: oklch(0.65 0.16 70);
  --orange-7: oklch(0.58 0.14 70);
  --orange-8: oklch(0.5 0.13 70);
  --orange-9: oklch(0.41 0.1 70);
  --blue: 0.71 0.17 250;
  --blue-1: oklch(0.94 0.03 250);
  --blue-2: oklch(0.88 0.06 250);
  --blue-3: oklch(0.83 0.1 250);
  --blue-4: oklch(0.77 0.13 250);
  --blue-5: oklch(0.71 0.17 250);
  --blue-6: oklch(0.64 0.16 250);
  --blue-7: oklch(0.57 0.14 250);
  --blue-8: oklch(0.5 0.13 250);
  --blue-9: oklch(0.41 0.1 250);
}

#account,
#cart {
  display: none;
}

main {
  width: 100%;
}

canvas#walk {
  position: absolute;
  z-index: -1;
  filter: blur(15px);
}

#container {
  display: grid;
  justify-content: center;
  align-items: center;
  max-width: 1000px;
  gap: var(--mpad);
  padding: var(--mpad);
}
@media screen and (min-width: 550px) {
  #container {
    grid-template-columns: auto auto;
  }
  #container > div:not([id]) {
    grid-column: span 2;
  }
}
#container h3 {
  font-size: larger;
}
#container > div:not([id]) {
  display: grid;
  width: 100%;
  padding: 3rem;
}
#container > div:not([id]) small {
  font-style: italic;
}
#container > div:not([id]) h2 {
  font-weight: 400;
  font-size: xx-large;
}
#container > div:not([id]) hr {
  width: 90%;
  justify-self: center;
  margin-top: 1.5rem;
  border: dotted 2px var(--ash-b);
}
#container > [id] {
  text-align: center;
  padding: var(--mpad);
  border-radius: var(--mrad);
  width: 100%;
  backdrop-filter: blur(10px);
  background-color: var(--white-g);
}
#container > [id]:not(#profile) {
  border: dotted 3px var(--ash-b);
}
#container > [id] ul {
  list-style-position: inside;
  list-style-type: none;
}

main #profile {
  min-width: 200px;
  width: 170px;
}
main #profile img {
  width: 100%;
  border-radius: 50%;
  border: 1rem solid oklch(var(--orange)/0.2);
}
main #profile h2 {
  font-family: Truculenta;
  font-weight: 700;
  font-size: xxx-large;
  margin-top: 0.5rem;
  color: #654;
  text-transform: capitalize;
  background: linear-gradient(45deg, var(--orange-5), var(--orange-9));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#profile-info {
  display: grid;
  justify-items: center;
}
#profile-info > small {
  font-style: italic;
  margin-bottom: 3rem;
}
#profile-info ul {
  display: grid;
  justify-items: center;
  width: 100%;
  list-style-position: outside;
  gap: 1rem;
}
#profile-info li {
  display: grid;
  height: 2rem;
  align-items: space-between;
}
#profile-info span {
  font-weight: 600;
  font-size: large;
}
#profile-info input {
  border: none;
  background-color: rgba(0, 0, 0, 0);
  font-size: large;
  text-align: center;
}
#profile-info input:not([disabled]) {
  border-bottom: solid 1px var(--black);
}
#profile-info input:focus {
  outline: none;
  border-bottom: solid 2px #444;
}
#profile-info input::placeholder {
  color: #222;
}
#profile-info .edit-profile {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 0.5rem;
  cursor: pointer;
  border: solid 2px #ddd;
  border-radius: 1rem;
  padding: 0 var(--srad);
  margin-top: 2rem;
}
#profile-info .edit-profile [icon=pencil] {
  stroke-width: 1px;
  stroke: var(--black);
}
#profile-info button.edit-profile {
  border-radius: 6px;
  background-color: #fca311;
  border: none;
  padding: 0.2rem 0.4rem;
  border-bottom: 2px solid rgb(252.9522821577, 192.2033195021, 92.5477178423);
}
#profile-info button.edit-profile * {
  color: white;
}

/*# sourceMappingURL=profile.css.map */