:root {
  --color-primary-main: #0871c4;
  --color-primary-dark: #023864;
  --color-primary-ultra-light: #eff4ff;
  --color-grey-light: #d3d3d3;
  --color-grey-ultra-light: #f4f4f4;
  --color-grey-dark: #373737;
  --color-grey-main: #706f6f;
  --color-success-main: #286327;
  --color-error-main: #a72514;
  --color-error-light: #fee5e4;
  --color-text: var(--color-grey-dark);
  --font-size-body2: 14px;
  --font-size-body1: 16px;
  --font-size-heading2: 32px;
  --font-size-heading3: 24px;
  --font-size-subtitle: 18px;
  --line-height: 1.4;
  --input-height: 46px;
  --border-radius-s: 4px;
  --border-radius-xs: 2px;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("https://cdn.packlink.com/brand/packlink_cons/fonts/ProximaNova-RegularWeb.woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("https://cdn.packlink.com/brand/packlink_cons/fonts/ProximaNova-SemiboldWeb.woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("https://cdn.packlink.com/brand/packlink_cons/fonts/ProximaNova-BoldWeb.woff2");
  font-weight: 700;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

h1, h2, h3 {
  margin: 0;
  color: var(--color-text);
}

.heading2 {
  font-size: var(--font-size-heading2);
  letter-spacing: 0.01em;
  line-height: 48px;
}

.heading3 {
  font-size: var(--font-size-heading3);
  letter-spacing: 0.03em;
  line-height: 48px;
}

.subtitle1 {
  font-size: var(--font-size-body1);
  letter-spacing: 0.03em;
  line-height: 24px;
  font-weight: 600;
}

.body2 {
  font-size: var(--font-size-body2);
  letter-spacing: 0.03em;
  line-height: 20px;
}

body {
  font-family: "Proxima Nova", sans-serif;
  display: flex;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-body1);
  line-height: 20px;
  color: var(--color-text);
}

p {
  margin: 0;
  line-height: var(--line-height);
  text-wrap: pretty;
}

input[type="email"], input[type="password"] {
  border: 1px solid var(--color-grey-main);
  border-radius: var(--border-radius-s);
  height: var(--input-height);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--font-size-body2);
  font-weight: bold;
  width: 100%;
  padding: 0 16px;
}

input[type="email"]::placeholder, input[type="password"]::placeholder {
  color: var(--color-grey-main);
}

input[type="email"]:focus, input[type="password"]:focus {
  outline: none;
  border: 1px solid #000;
}

input[type="email"]:hover, input[type="password"]:hover {
  box-shadow: 0 0 8px rgba(0 0 0 / 10%);
}

input[type="email"]:user-invalid, input[type="password"]:user-invalid {
  outline: none;
  border: 1px solid var(--color-error-main);
  background-color: var(--color-error-light);
}

label {
  display: flex;
  margin-bottom: 8px;
}

button {
  color: white;
  background-color: var(--color-primary-main);
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-body1);
  font-weight: bold;
  border: 0;
  width: 100%;
  border-radius: var(--border-radius-s);
  cursor: pointer;
  padding: 12px 16px;
  transition: 0.2s ease-in-out;
}

button:hover {
  background-color: var(--color-primary-dark);
}

.button-secondary {
  background-color: white;
  border: 2px solid var(--color-primary-main);
  color: var(--color-primary-main);
}

.button-secondary:hover {
  background-color: white;
  border: 2px solid var(--color-primary-dark);
  color: var(--color-primary-dark);
}

.button-secondary:active {
  background-color: var(--color-primary-ultra-light);
}

.background {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  background-color: var(--color-grey-ultra-light);
}

.container {
  box-shadow: 0 0 12px rgba(0 0 0 / 10%);
  width: 500px;
  border-radius: var(--border-radius-s);
  background-color: white;
  padding: 40px;
  margin: 32px;
}

.form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.container-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.button-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.inline-notification {
  position: relative;
  display: flex;
  border-radius: var(--border-radius-xs);
  padding: 16px;
}

.inline-notification h3 {
  font-size: var(--font-size-body2);
  line-height: 20px;
  font-weight: bold;
}

.inline-notification p {
  font-size: var(--font-size-body2);
  margin-top: 8px;
}

.inline-notification svg {
  flex-shrink: 0;
}

.inline-notification-content {
  margin-left: 8px;
}

.inline-notification-error {
  background-color: var(--color-error-light);
}

.inline-notification-error h3, .inline-notification-error svg {
  color: var(--color-error-main);
}

@media (max-width: 540px) {
  .background {
    background-color: transparent;
    align-items: start;
    height: auto;
  }

  .container {
    box-shadow: none;
    margin: 0;
  }
}