@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 900;
  font-display: swap;
  src: url("Inter-Black.woff2?v=3.11") format("woff2"),
       url("Inter-Black.woff?v=3.11") format("woff");
}

*,
*:before,
*:after {
 box-sizing:border-box
}

:root {
  --color-primary: #4c2982;
  --color-secondary: #f9d170;
  --color-bg: #f3f3f3;
  --color-text: #252525;
  --color-light: #e9e9e9;
  --color-success: #067973;
  --color-success-bg: #f5fffe;
  --color-error: #b71540;
  --color-error-bg: #fdeff3;
}

body {
  background-color: var(--color-bg);
  color: var(--color-primary);
  font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-weight: 600;
  font-size: 1.1em;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  padding-top: 4.5rem;
  margin: 0;
  align-items: center;
}

main {
  width: 20rem;
}

h1 {
  font-family: Inter, sans-serif;
  font-size: 1.85rem;
  line-height: 1.2;
  max-width: 16rem;
}

h2 {
  font-size: 1rem;
  margin: 0;
}

section {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.signup-wrapper {
  box-shadow: 0 1rem 1rem var(--color-light);
  display: flex;
  width: 100%
}

label {
  display: block;
  margin-bottom: .25rem;
}

input {
  color: var(--color-text);
  font-size: 1rem;
  padding: .6rem;
  margin: 0;
  border: 1px solid var(--color-bg);
  width: 17rem;
}

button {
  background-color: var(--color-secondary);
  border: 1px solid var(--color-secondardy);
  padding: .6rem;
  margin: 0;
  cursor: pointer;
  width: 3rem;
}

.icon {
  width: 2em;
  height: 2em;
  vertical-align: -.125em;
}

.icon-alert {
  width: 1.5em;
  height: 1.5em;
  vertical-align: -.125em;
  margin-right: .25rem;
}

input:focus, button:focus {
  border: 1px solid var(--color-primary);
  outline: none;
}

.alert {
  padding: 1.15rem .75rem;
  margin-top: 1rem;
  font-size: .9rem;
}

.alert-wrapper {
  display: flex;
}

.alert-text {
  margin-left: .25rem;
}

.alert-error {
  background-color: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid var(--color-error);
  display: none;
}

.alert-success {
  background-color: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success);
  display: none;
}

p {
  margin: .2rem 0 0;
  font-weight: 400;
}

.alert-show {
  display: flex;
}

.hide {
  display: none;
}