/** CSS Variables **/
:root {
  /** colors **/
  /** https://coolors.co/palette/e63946-f1faee-a8dadc-457b9d-1d3557 **/
  --primary: #1D3557;
  --secondary: #39e656;
  --thirdly: #457B9D;
  --dark: #2f2f2f;
  --red: #DC3545;
  --page-bg-light: #F1FAEE;
  --page-bg-dark: #A8DADC;
  --page-bg-grey: #f4f4f4;
  --grey: #9f9f9f;

  /** fonts **/
  --font-xxs: 10px;
  --font-xs: 12px;
  --font-sm: 14px;
  --font-md: 16px;
  --font-lg: 20px;
  --font-xl: 24px;
  --font-xxl: 30px;
  --font-xxxl: 40px;
  --font-xxxxl: 60px;
  --font-xxxxxl: 100px;
  --font-xxxxxxl: 200px;
  --font-xxxxxxxl: 300px;

  /** box shadow **/
  --bs: 0px 21px 40px -15px #616161a3;

  /** border radius **/
  --br-sm: 5px;
  --br-md: 8px;
  --br-lg: 12px;
  --br-xl: 20px;
}

* {
  padding: 0px;
  margin: 0px;
  font-family: Helvetica-Light, sans-serif;
  color: var(--dark);
}

div, section, header, footer {
  box-sizing: border-box;
}

button {
  background: none;
  padding: 0px;
  border: none;
  cursor: pointer;
}

p, li {
  line-height: 1.2;
}

input,
textarea,
button,
select,
a {
  -webkit-tap-highlight-color: transparent;
}

input {
  background: #fff;
  outline: 1px solid var(--page-bg-primary);
  border: none;
  border-radius: 8px;
  box-shadow: var(--bs);
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}
input:focus {
  outline: 1px solid var(--primary);
}