*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* @link https://utopia.fyi/type/calculator?c=360,18,1.25,1024,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --step--2: clamp(0.72rem, 0.6766rem + 0.1928vw, 0.8rem);
  --step--1: clamp(0.9rem, 0.8458rem + 0.241vw, 1rem);
  --step-0: clamp(1.125rem, 1.0572rem + 0.3012vw, 1.25rem);
  --step-1: clamp(1.4063rem, 1.3215rem + 0.3765vw, 1.5625rem);
  --step-2: clamp(1.7578rem, 1.6519rem + 0.4706vw, 1.9531rem);
  --step-3: clamp(2.1973rem, 2.0649rem + 0.5883vw, 2.4414rem);
  --step-4: clamp(2.7466rem, 2.5811rem + 0.7354vw, 3.0518rem);
  --step-5: clamp(3.4332rem, 3.2264rem + 0.9192vw, 3.8147rem);


  /* @link https://utopia.fyi/space/calculator?c=360,18,1.25,1024,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,&g=s,l,xl,12 */
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5286rem + 0.1506vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8411rem + 0.1506vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0572rem + 0.3012vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.5858rem + 0.4518vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.1145rem + 0.6024vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.1717rem + 0.9036vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.2289rem + 1.2048vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.3434rem + 1.8072vw, 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.1431rem + 0.753vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.3592rem + 0.9036vw, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.6717rem + 0.9036vw, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.7184rem + 1.8072vw, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.247rem + 1.9578vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.4367rem + 3.6145vw, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.494rem + 3.9157vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 2.8735rem + 7.2289vw, 7.5rem);

  /* Custom gray's based Tailwind's gray: https://tailwindcss.com/docs/colors#default-color-palette-reference */
  --gray-100: oklch(96.7% 0.003 80);
  --gray-200: oklch(92.8% 0.006 80);
  --gray-300: oklch(87.2% 0.01 75);
  --gray-400: oklch(70.7% 0.022 77);
  --gray-500: oklch(55.1% 0.027 80);
  --gray-600: oklch(44.6% 0.03 70);
  --gray-700: oklch(37.3% 0.034 72);
  --gray-800: oklch(27.8% 0.033 70);
  --gray-900: oklch(21% 0.034 80);

  /*
    Generated via Harmonizer: https://harmonizer.evilmartians.com/#fZMxb8MgEIX_y3W1KrANdjwmlbq0qtR0qzoQ54qtErAwSYco_704bRKgktm4x31674AjHNCOvdHQ0AwUHlCN0LwfQYsdQgOUEMigNdpZMTpomN901uwENOSe5JzxnJHr4hd1JQZo9F6pU3ZF5QmKVhGrLosqQOVzqCJB5YsQRUNLfhVzqDJBlTRC8To0Rco5FEtnVUSo2NR8QJ6gOIsD1lHGWVSVoKpo7JSUUcTZWdUJakGiG6xIEdqic6hF-hhIyPrf-ZFBt8foaT5aRO0hQkvl95STgL-05jsQ61B7xe1NKULlxfoq3sSShUi1D6ScscnUiM71Wnpjx2uaZ7NF5RvE0ArfsO0tts5_sanuy5_yzSwlXDL-Vf3Pm_xu5MooY5962fmpwB0i3qoPwn5NRXIe3kaeT62dsO53ZtOZ9SDaiTcUcDr9AA
*/
  --green-100: oklch(0.95 0.03 160);
  --green-200: oklch(0.84 0.08 160);
  --green-300: oklch(0.76 0.13 160);
  --green-400: oklch(0.68 0.17 160);
  --green-500: oklch(0.61 0.15 160);
  --green-600: oklch(0.52 0.13 160);
  --green-700: oklch(0.42 0.1 160);
  --green-800: oklch(0.29 0.07 160);
  --green-900: oklch(0 0 160);
  --brown-100: oklch(0.95 0.03 80);
  --brown-200: oklch(0.85 0.08 80);
  --brown-300: oklch(0.78 0.13 80);
  --brown-400: oklch(0.71 0.17 80);
  --brown-500: oklch(0.63 0.15 80);
  --brown-600: oklch(0.54 0.13 80);
  --brown-700: oklch(0.44 0.1 80);
  --brown-800: oklch(0.3 0.07 80);
  --brown-900: oklch(0 0 80);
  --red-100: oklch(0.95 0.03 30);
  --red-200: oklch(0.85 0.08 30);
  --red-300: oklch(0.79 0.13 30);
  --red-400: oklch(0.72 0.17 30);
  --red-500: oklch(0.64 0.15 30);
  --red-600: oklch(0.55 0.13 30);
  --red-700: oklch(0.45 0.1 30);
  --red-800: oklch(0.3 0.07 30);
  --red-900: oklch(0 0 30);
  --orange-100: oklch(0.95 0.03 45);
  --orange-200: oklch(0.85 0.08 45);
  --orange-300: oklch(0.79 0.13 45);
  --orange-400: oklch(0.72 0.17 45);
  --orange-500: oklch(0.64 0.15 45);
  --orange-600: oklch(0.55 0.13 45);
  --orange-700: oklch(0.45 0.1 45);
  --orange-800: oklch(0.3 0.07 45);
  --orange-900: oklch(0 0 45);
  --blue-100: oklch(0.95 0.03 255);
  --blue-200: oklch(0.84 0.08 255);
  --blue-300: oklch(0.78 0.13 255);
  --blue-400: oklch(0.7 0.17 255);
  --blue-500: oklch(0.63 0.15 255);
  --blue-600: oklch(0.54 0.13 255);
  --blue-700: oklch(0.44 0.1 255);
  --blue-800: oklch(0.3 0.07 255);
  --blue-900: oklch(0 0 255);

  --base-bg: var(--gray-100);
  --base: var(--gray-500);
  --confirm: var(--green-500);
  --warning: var(--orange-500);
  --error: var(--red-500);
  --accent: var(--blue-500);

  --radius-s: .25rem;
  --radius-m: .5rem;
  --radius-l: 1rem;

  --gap-nav: var(--space-s);

  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: oklch(from var(--gray-500) calc(l + 0.025) c h);
  min-height: 100vh;
  background: var(--base-bg);
  font-size: var(--step-0);
  display: flex;
  justify-content: center;
  margin: 0;
}

p {
  margin-top: 0;
  max-width: 70ch;
}

nav ul, nav ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul, ol {
  margin: 0 1.5rem;
  padding: 0;
  font-size: var(--step-0);
}

main ul a:visited, main ol a:visited, .button-add {
  color: var(--base);
}

#container {
  --container-color: var(--brown-300);
  background: oklch(from var(--container-color) l c h / 10%);
  box-shadow: 4px 12px 12px -8px oklch(from var(--container-color) l c h / 30%);
  padding: var(--space-s);
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  width: 100%;
}

main {
  padding: 0 var(--space-s);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.flow-hz {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-m);
}

nav ul {
  display: flex;
  align-items: center;
  gap: var(--gap-nav);
}

nav ul a {
  text-decoration: none;
  color: oklch(from var(--base) calc(l + 0.1) c h);
  font-size: var(--step--1);
  font-weight: 600;
  border-bottom: 2px solid transparent;
}

nav ul a:hover {
  border-bottom: 4px solid oklch(from var(--base) calc(l + 0.2) c h / 80%);
  transition: border-bottom .15s ease-in;
}

nav ul a.current-route:hover {
  border-bottom: 4px solid oklch(from var(--base) calc(l - 0.2) c h / 80%);
  transition: border-bottom .15s ease-in;
}

nav ul .current-route {
  color: oklch(from var(--base) calc(l - 0.1) calc(c + 0.03) h);
}

#nav-right {
  display: flex;
  gap: var(--space-s);
}

#globe svg {
  height: 3rem;
  width: 3rem;
  vertical-align: center;
  border-bottom: none;
}

#globe {
  border-bottom: none;
}

#globe:hover {
  border-bottom: red;
  transition: none;
}

hr {
  margin: 0 var(--space-m);
  border: 4px dashed oklch(from var(--base) calc(l + 0.2) c h);
}

img {
  width: 100%;
  border-radius: var(--radius-m);
}

button, .button-link {
  --button-color: oklch(from var(--base) calc(l + 0.1) c h);
  display: flex;
  gap: var(--space-2xs);
  align-items: center;
  color: var(--button-color);
  background-color: oklch(from var(--button-color) l c h / 10%);
  padding: var(--space-3xs) var(--space-2xs);
  font-size: var(--step--1);
  border-radius: 8px;
  border: 2px solid oklch(from var(--button-color) l c h / 40%);
  box-shadow: 2px 6px 6px -4px oklch(from var(--button-color) l c h / 50%);
  text-align: center;
  font-weight: 600;
  text-decoration: none;
  text-wrap: nowrap;
}

button:hover, .button-link:hover {
  background-color: oklch(from var(--button-color) l c h / 25%);
  box-shadow: 2px 6px 6px -4px oklch(from var(--button-color) l c h / 70%);
}

[data-button="login"] {
  --button-color: var(--gray-500);
}

[data-button="confirm"] {
  --button-color: var(--confirm);
}

[data-button="warning"] {
  --button-color: var(--warning);
}

[data-button="error"] {
  --button-color: var(--error);
}

[data-button="accent"] {
  --button-color: var(--accent);
}

[data-button-link="add"] {
  --content: url("/static/res/img/plus-circle.svg");
}

[data-button-link="edit"] {
	--content: url("/static/res/img/pencil-square.svg");
}

h1, h2, h3 {
  font-size: var(--step-3);
  letter-spacing: -.05em;
  margin-bottom: var(--space-2xs);
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
}

label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

input, textarea {
  --input-color: var(--brown-300);
  display: block;
  border: 2px solid oklch(from var(--gray-300) l c h);
  padding: var(--space-xs);
  border-radius: var(--radius-m);
  background: oklch(from var(--input-color) l c h / 5%);
  width: 100%;
  font-size: var(--step--1);
}

a:focus, button:focus, input:focus, textarea:focus {
  outline: 2px solid oklch(from var(--gray-400) l c h);
}

pre {
  font-family: monospace;
  max-width: 60ch;
  line-height: 1.5;
}

pre {
  white-space: pre-wrap;
}

figure {
  margin: 0;
}

figcaption {
  font-style: italic;
}

.current-route {
  border-bottom: 2px solid var(--color-primary-light);
}

form {
  display: flex;
  gap: var(--space-m);
  flex-direction: column;
  align-items: flex-start;
}

form > div.required, form > div.optional {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
}

form > div.required input {
  width: 100%
}

#trip-info-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
}

#trip-info-header #edit {
  margin-left: auto;
}

#login-container {
  --container-color: var(--brown-300);
  padding: var(--space-s);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  background: oklch(from var(--container-color) l c h / 10%);
}

#login-container main {
  padding: 0;
}

#login-container input, #login-container label, #login-container button {
  width: 100%;
}

#login-container button {
  padding: var(--space-s);
  display: inline-block;
  align-text: center;
}

.button-link::before {
	content: var(--content);
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
}

#login-msg {
  margin-top: 2rem;
}

#header-image {
  max-width: 512px;
  border-radius: 0;
}

#image-gallery, #image-gallery-edit {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style-type: none;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}

#image-gallery-edit img {
  max-width: 256px;
}

.error {
  display: flex;
  gap: 2rem;
  padding: 2rem;
  border-radius: .5rem;
  border: 1px solid var(--color-gray-5);
  color: black;
  background: #e8e8e8;
  font-family: monospace;
}

.error svg {
  min-width: 4rem;
  height: 4rem;
  background: #fb8b8b;
  border-radius: 50%;
  padding: .5rem;
  border: 1px solid #c47373;
  color: #7d1010;
}

#pagination {
  display: flex;
  justify-content: space-between;
}

#welcome-img, #login-container img {
	--img-base: var(--base);
	max-width: 32rem;
	border-radius: var(--radius-l);
	border: var(--radius-s) solid oklch(from var(--img-base) calc(l + 0.3) c h);
}

@media (min-width: 30em) {
  body {
    padding: var(--space-xl);
  }

  #container {
    border: 2px solid oklch(from var(--brown-700) l c h / 30%);
    border-radius: var(--radius-l);
    padding: var(--space-l);
    width: 1024px;
  }

  #login-container {
    border: 2px solid oklch(from var(--brown-700) l c h / 30%);
    border-radius: var(--radius-l);
    padding: var(--space-m);
    box-shadow: 4px 12px 12px -8px oklch(from var(--container-color) l c h / 30%);
  }

  nav ul a {
    font-size: var(--step-0);
  }

  #nav-right {
    margin-left: auto;
    display: flex;
    gap: var(--gap-nav);
  }

  input, textarea {
    max-width: 50%;
  }

  label input {
    max-width: 100%;
  }

  .flow-hz {
    flex-direction: row;
  }
}