:root {
  --primary: hsl(338, 84%, 49%);
  --primary-light: hsl(338, 84%, 75%);
  --dark: hsl(224, 52%, 10%);
  --muted: rgba(20, 30, 58, 1);
  --light: rgba(164, 216, 237, 1);
  --teal: rgba(87, 242, 228, 1);
  --white: rgba(255, 255, 255, 1);
  --deep-purple: rgba(55, 53, 126, 1);
  --validation: rgba(242, 87, 87, 1);

  --heading: "Prompt", sans-serif;
  --body: "Open Sans", sans-serif;
}

*,
*::after,
*::before {
  box-sizing: border-box;
  outline: none !important;
  font-family: var(--body);
  -webkit-tap-highlight-color: transparent;
}

body {
  padding: 0;
  margin: 0;
}

::-moz-selection {
  background-color: var(--primary);
  color: var(--white);
  border-radius: 8px;
}

::selection {
  background-color: var(--primary);
  color: var(--white);
  border-radius: 8px;
}

@media print {
  .hide-print {
    visibility: hidden;
  }
}

.button {
  --button-background: var(--primary);
  --button-border: var(--primary);
  --button-text: var(--white);
  --button-font-weight: 700;

  display: inline-block;
  text-decoration: none;
  background: none;
  border: none;
  background: var(--button-background);
  border: solid 2px var(--button-border);
  color: var(--button-text);
  padding: 10px 30px;
  line-height: 22px;
  font-family: var(--body);
  font-weight: var(--button-font-weight);
  border-radius: 50px;
}

.button:hover {
  --button-background: var(--white);
  --button-text: var(--primary);
}

.button.invert {
  --button-background: var(--white);
  --button-text: var(--dark);
  --button-border: var(--white);
}

.button.light-font {
  --button-font-weight: normal;
}

p:empty {
  display: none;
}