@import url("/fonts/helvetica/stylesheet.css");
@import url("/fonts/helvetica/stylesheet.css");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Helvetica Now Display";
}

svg * {
  fill: inherit;
}

.user_message:has(span:empty) {
  display: none;
}

body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  background-color: #f8f8f8;
  min-height: 200vh;
}
body > * {
  width: 100%;
}

nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
nav #nav_left {
  display: flex;
  gap: 0.5rem;
}
nav #nav_left > div {
  font-weight: 800;
  color: #18454c;
}
nav #nav_left > svg {
  height: 3rem;
  width: 3rem;
  fill: #18454c;
}
nav #nav_right > button {
  width: 3.5rem;
  height: 3.5rem;
  background-color: #f8f8f8;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

uk-icon.medium > svg {
  width: 24px;
  height: 24px;
}

main {
  display: flex;
  width: 100%;
  flex-direction: column;
}

footer {
  grid-area: footer;
}

.user_message {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  width: calc(100vw - 2rem);
  background-color: #18454c;
  padding: 0.5rem 1rem;
  color: #f8f8f8;
  border-radius: 0.4rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  z-index: 99;
}
.user_message .bar_wrap {
  position: absolute;
}

#login {
  display: flex;
  width: 100%;
  margin-top: 10rem;
}
#login > form {
  width: 100%;
  display: flex;
  gap: 2rem;
  flex-direction: column;
}
#login > form > .form_group label {
  font-weight: 600;
}
#login > form > .form_group input {
  background-color: #e4e4e4;
  font-size: 1rem;
  padding: 1.5rem 0.5rem;
}
#login > form button {
  background-color: #18454c;
  width: 114.5px;
  height: 50px;
  clip-path: path("M.13,1.34l23.11,38.6c2.99,5,8.39,8.06,14.22,8.06h39.99c5.83,0,11.22-3.06,14.22-8.06L114.78,1.34c.35-.59-.07-1.34-.76-1.34H.89C.2,0-.23.75.13,1.34Z");
  /*transform: translateX(21%);*/
  transform-origin: center;
}
#login > form #login_button_wrap {
  position: relative;
  width: 100%;
  height: 35vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: 1.5rem;
}
#login > form #login_button_wrap > svg {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 358px;
  height: 297px;
  fill: #18454c;
  opacity: 30%;
}
#login > form #login_button_wrap button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #f8f8f8;
  font-weight: 500;
  z-index: 2;
  cursor: pointer;
  gap: 2rem;
}
#login > form #login_button_wrap button * {
  transition: 0.2s;
}
#login > form #login_button_wrap button uk-icon {
  margin-right: -3.5rem;
  transform: scale(0.4);
}
#login > form #login_button_wrap button:hover uk-icon {
  margin-right: 5.2rem;
  transform: scale(1.1);
}

@media (min-width: 577px) {
  main {
    align-items: center;
  }
  #login {
    width: 50vw;
  }
}
@media (min-width: 993px) {
  #login {
    width: 20vw;
  }
}