/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --white-050: hsl(192, 15%, 99%);
  --orange2-500: hsl(24, 100%, 41%);
  --grey2-200: hsl(184, 9%, 85%);
  --grey4-500: hsl(206, 28%, 57%);
  --blue2-300: hsl(204, 70%, 72%);
  --blue2-500: hsl(204, 70%, 53%);
  --green2-300: hsl(168, 42%, 61%);
  --green2-500: hsl(168, 76%, 36%);
  --red1-300: hsl(6, 54%, 68%);
  --red1-100: hsla(6, 100%, 83%, 0.493);
  --red1-200: hsl(6, 100%, 70%);
  --red1-500: hsl(6, 63%, 46%);
  --green3-300: hsl(145, 45%, 65%);
  --green3-500: hsl(145, 63%, 42%);
  --back-200: hsl(204, 36%, 18%);
  --base-color: hsl(0, 0%, 26%);
  --btn-color: hsl(200, 71%, 19%);
  --box-shadow-btn: 0 4px 4px -2px rgba(0, 0, 0, 0.6);
  font-family: var(--font-family);
  color: var(--base-color);
}

body {
  min-width: 456px;
}

body:has(.index-logo) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
body:has(.index-logo) main {
  width: min(80%, 26rem);
}
body:has(.index-logo) .cx {
  display: block;
  width: 100%;
  padding: 0.2rem 0.5rem;
}

main.m-prms {
  width: min(80%, 52rem);
  margin-inline: auto;
}

header {
  min-width: 456px;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
  padding: 0.2rem 0.7rem;
  margin-bottom: 1rem;
  background-color: white;
  box-shadow: 0 0 0.3rem 0.3rem rgba(0, 0, 0, 0.3);
}
header img {
  max-height: 3rem;
}

input[type=email],
input[type=number],
input[type=search],
input[type=text],
input[type=tel],
input[type=url],
input[type=password],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box;
}

/* Removes awkward default styles on some inputs for iOS */
input[type=email],
input[type=number],
input[type=search],
input[type=text],
input[type=tel],
input[type=url],
input[type=password],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px;
}

input[type=email]:focus,
input[type=number]:focus,
input[type=search]:focus,
input[type=text]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0;
}

label,
legend {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

fieldset {
  padding: 0;
  border-width: 0;
}

input[type=checkbox],
input[type=radio] {
  display: inline;
}

label > .label-body {
  display: inline-block;
  margin-left: 0.5rem;
  font-weight: normal;
}

.tc {
  text-align: center;
}

form {
  margin-block: 2rem;
}
form.c {
  display: flex;
  width: min(90%, 25rem);
  margin-inline: auto;
  flex-direction: column;
  gap: 1rem;
}
form input {
  width: 100%;
}
form button {
  width: 100%;
}

body {
  max-height: 100vh;
  max-height: 100dvh;
  overflow: auto;
}

.app {
  display: contents;
}

/* <button class="button-16" role="button">Button 16</button>

CSS */
.btn {
  background-color: var(--btn-bg-color, #f8f9fa);
  border: 1px solid var(--btn-bd-color, #f8f9fa);
  box-shadow: var(--btn-bd-box-shadow, rgba(0, 0, 0, 0) 0 1px 1px);
  border-radius: 4px;
  color: var(--btn-font-color, #3c4043);
  cursor: pointer;
  font-family: var(--btn-font-family, inherit);
  font-size: var(--btn-font-size, 14px);
  height: var(--btn-height, 36px);
  line-height: var(--btn-line-height, 27px);
  padding: var(--btn-padding, 0 16px);
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: pre;
  text-decoration: none;
}
.btn:hover {
  background-color: var(--btn-bg-hover-color, #f8f9fa);
  border-color: var(--btn-bd-hover-color, #dadce0);
  box-shadow: var(--btn-bd-hover-box-shadow, rgba(0, 0, 0, 0.1) 0 1px 1px);
  color: var(--btn-font-hover-color, #202124);
}
.btn:focus {
  background-color: var(--btn-bg-focus-color, #f8f9fa);
  border-color: var(--btn-bd-focus-color, #4285f4);
  box-shadow: var(--btn-bd-focus-box-shadow, rgba(0, 0, 0, 0.1) 0 1px 1px);
  color: var(--btn-font-focus-color, #4285f4);
  outline: none;
}
.btn-primary {
  --btn-bg-color: #1a73e8;
  --btn-bd-color: #1a73e8;
  --btn-bd-box-shadow: rgba(0, 0, 0, .1) 0 1px 1px;
  --btn-font-color: #fff;
  --btn-font-hover-color: #fff;
  --btn-font-focus-color: #fff;
  --btn-bg-hover-color: #1669c1;
  --btn-bd-hover-color: #1669c1;
  --btn-bd-hover-box-shadow: rgba(0, 0, 0, .2) 0 1px 2px;
  --btn-bg-focus-color: #1669c1;
  --btn-bd-focus-color: #1669c1;
  --btn-bd-focus-box-shadow: rgba(66, 133, 244, .3) 0 1px 2px, rgba(66, 133, 244, .3) 0 0 0 3px;
}

/* <button class="button-16" role="button">Button 16</button>

CSS */
.btn {
  background-color: var(--btn-bg-color, #f8f9fa);
  border: 1px solid var(--btn-bd-color, #f8f9fa);
  box-shadow: var(--btn-bd-box-shadow, rgba(0, 0, 0, 0) 0 1px 1px);
  border-radius: 4px;
  color: var(--btn-font-color, #3c4043);
  cursor: pointer;
  font-family: var(--btn-font-family, inherit);
  font-size: var(--btn-font-size, 14px);
  height: var(--btn-height, 36px);
  line-height: var(--btn-line-height, 27px);
  padding: var(--btn-padding, 0 16px);
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: pre;
  text-decoration: none;
}
.btn:hover {
  background-color: var(--btn-bg-hover-color, #f8f9fa);
  border-color: var(--btn-bd-hover-color, #dadce0);
  box-shadow: var(--btn-bd-hover-box-shadow, rgba(0, 0, 0, 0.1) 0 1px 1px);
  color: var(--btn-font-hover-color, #202124);
}
.btn:focus {
  background-color: var(--btn-bg-focus-color, #f8f9fa);
  border-color: var(--btn-bd-focus-color, #4285f4);
  box-shadow: var(--btn-bd-focus-box-shadow, rgba(0, 0, 0, 0.1) 0 1px 1px);
  color: var(--btn-font-focus-color, #4285f4);
  outline: none;
}
.btn-primary {
  --btn-bg-color: #1a73e8;
  --btn-bd-color: #1a73e8;
  --btn-bd-box-shadow: rgba(0, 0, 0, .1) 0 1px 1px;
  --btn-font-color: #fff;
  --btn-font-hover-color: #fff;
  --btn-font-focus-color: #fff;
  --btn-bg-hover-color: #1669c1;
  --btn-bd-hover-color: #1669c1;
  --btn-bd-hover-box-shadow: rgba(0, 0, 0, .2) 0 1px 2px;
  --btn-bg-focus-color: #1669c1;
  --btn-bd-focus-color: #1669c1;
  --btn-bd-focus-box-shadow: rgba(66, 133, 244, .3) 0 1px 2px, rgba(66, 133, 244, .3) 0 0 0 3px;
}

.nav-container {
  position: relative;
}

nav {
  position: relative;
  --size-w: 32px;
  --size-h: 26px;
}
nav .nav-container li {
  list-style: none;
}
nav .nav-container a {
  text-decoration: none;
  color: #0e2431;
  font-weight: 500;
  font-size: 1.2rem;
  padding: 0.7rem;
}
nav .nav-container a:hover {
  font-weight: bolder;
}
nav input[type=checkbox] {
  position: absolute;
  display: block;
  height: var(--size-w);
  width: var(--size-w);
  top: calc(50% - var(--size-w) / 2);
  left: calc(50% - var(--size-w) / 2);
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}
nav input[type=checkbox]:checked ~ .menu-items {
  transform: translateX(0);
}
nav input[type=checkbox]:checked ~ .hamburger-lines .line1 {
  transform: rotate(45deg);
}
nav input[type=checkbox]:checked ~ .hamburger-lines .line2 {
  transform: scaleY(0);
}
nav input[type=checkbox]:checked ~ .hamburger-lines .line3 {
  transform: rotate(-45deg);
}
nav .hamburger-lines {
  display: block;
  height: var(--size-h);
  width: var(--size-w);
  position: absolute;
  top: calc(50% - var(--size-h) / 2);
  left: calc(50% - var(--size-w) / 2);
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
nav .hamburger-lines .line {
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 10px;
  background: #0e2431;
}
nav .hamburger-lines .line.line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}
nav .hamburger-lines .line.line2 {
  transition: transform 0.2s ease-in-out;
}
nav .hamburger-lines .line.line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}
nav .menu-items {
  position: absolute;
  z-index: 10;
  padding: var(--size-h) 1rem 1rem 1rem;
  top: 1rem;
  box-shadow: inset 0 0 2000px rgba(255, 255, 255, 0.5);
  height: min-content;
  width: min-content;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transform: translateX(-100%);
  transform: translateY(-100vh);
  transition: transform 0.5s ease-in-out;
  text-align: center;
}

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