:root {
  --background-blur: 32px;

  --border-radius: 15px;
  --border-radius-large: 45px;

  --base-font-size: 18px;
  --font-size: clamp(var(--base-font-size), min(4vh, 4vw), 50px);
  --font-size-larger: clamp(25px, max(3.5vh, 3.5vw), 50px);
  --font-size-smaller: smaller;
  --font-size-tiny: 16px;
  --form-font-size: clamp(var(--base-font-size), var(--font-size), 28px);

  /* new theme colors */
  --color-black: #000;
  --color-blue: #72d3ff;
  --color-darker-blue: #b7c5d5;
  --color-bright-green-rgb: 72, 228, 125;
  --color-bright-green: rgb(var(--color-bright-green-rgb));
  --color-gray: #cecece;
  --color-navy-blue-rgb: 42, 54, 78;
  --color-navy-blue: rgb(var(--color-navy-blue-rgb));
  --color-off-white-rgb: 246, 248, 250;
  --color-off-white: rgb(var(--color-off-white-rgb));
  --color-orange-rgb: 255, 173, 48;
  --color-orange: rgb(var(--color-orange-rgb));
  --color-powder-blue-rgb: 174, 188, 210;
  --color-powder-blue: rgb(var(--color-powder-blue-rgb));
  --color-purple-rgb: 130, 56, 204;
  --color-purple: rgb(var(--color-purple-rgb));
  --color-red-rgb: 228, 77, 77;
  --color-red: rgb(var(--color-red-rgb));
  --color-yellow-rgb: 236, 203, 43;
  --color-yellow: rgb(var(--color-yellow-rgb));

  --accent--ui: var(--color-navy-blue);
  --theme-background-color: var(--color-navy-blue);
  --theme-transparent-bar: rgba(var(--color-off-white-rgb), 0.25);
}

@media (orientation: portrait) {
  :root {
    --font-size-larger: clamp(25px, 4vh, 50px);
  }
}

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

html {
  font-size: var(--base-font-size);
}

body {
  background-color: var(--color-navy-blue);
  color: var(--color-off-white);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  line-height: 1.1;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: var(--color-off-white);
}

.layout-section-top a {
  color: inherit;
}

[hidden],
[hidden="true"] {
  display: none !important;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}