* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  font-size: 6.25%;

  --c-title: hsla(194, 68%, 15%, 1);
  --c-label: hsla(170, 100%, 14%, 1);
  --c-input: hsla(210, 11%, 15%, 1);
  --c-border: hsla(210, 9%, 31%, 0.3);
  --c-border-focus: hsla(194, 97%, 31%, 1);
  --c-white: hsla(0, 0%, 100%, 1);
  --c-placeholder: hsla(210, 9%, 31%, 0.5);

  --bg-app: hsl(231, 80%, 8%);
  --bg-btn: hsla(194, 97%, 31%, 1);
  --bg-card: hsla(0, 0%, 100%, 1);
  --bg-input: hsla(212, 23%, 89%, 1);
  --bg-notification: hsla(0, 86%, 59%, 1);
  --bg-modal: hsla(0, 0%, 0%, 0.7);
}

body {
  background-color: var(--bg-app);

  font-family: Roboto, sans-serif;

  height: 100vh;

  display: grid;
  place-items: center;
}

main {
  background-color: var(--bg-card);

  width: 100%;
  max-width: 428rem;

  padding: 48rem 64rem 64rem 64rem;
  border-radius: 6px;
}

form,
fieldset,
.input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 32rem;
}

form legend {
  color: var(--c-title);
  font-size: 32rem;
  font-weight: 700;
  line-height: 40rem;
}

fieldset {
  gap: 16rem;

  border: none;
}

.input-wrapper {
  gap: 8rem;
}

.input-wrapper label {
  color: var(--c-label);
  font-size: 14rem;
  line-height: 18rem;
}

.input-wrapper input {
  background: var(--bg-input);

  color: var(--c-input);
  font-size: 16rem;
  line-height: 20rem;

  padding: 16rem;
  border-radius: 4px;
  border: 1px solid var(--c-border);
  outline: none;
}

.input-wrapper input::placeholder {
  color: var(--c-placeholder);
}

.input-wrapper input:focus {
  border: 1px solid var(--c-border-focus);
}

.input-wrapper input::-webkit-outer-spin-button,
.input-wrapper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

form button {
  color: var(--c-white);
  font-size: 16rem;
  font-weight: 700;
  line-height: 20rem;

  background: var(--bg-btn);

  padding: 16rem;
  border: none;
  border-radius: 4px;
  outline: none;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8rem;
}

form button:hover,
form button:focus {
  transform: scale(1.05);
}

.modal-wrapper {
  background-color: var(--bg-modal);

  width: 100%;
  height: 100vh;

  display: grid;
  place-items: center;

  position: absolute;
  inset: 0;

  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear .3s, opacity .3s;
}

.modal-wrapper.open {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear, opacity .3s;
}

.modal-wrapper.open .modal-card {
  animation: show-modal .3s;
}

.modal-wrapper:not(.open) .modal-card {
  animation: close-modal .3s;
}

.modal-card {
  background-color: var(--bg-card);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10);

  max-width: 700rem;

  padding: 48rem 64rem 64rem 64rem;
  border-radius: 6px;

  position: relative;
}

#close {
  background-color: transparent;
  border: 0;

  transition: transform .3s;

  cursor: pointer;

  position: absolute;

  top: 16rem;
  right: 16rem;
}

#close:hover {
  transform: scale(1.1);
}

.modal-card p {
  color: var(--c-title);
  font-size: 32rem;
  font-weight: 700;
  line-height: 40rem;
}

.notification {
  background: var(--bg-notification);

  width: 100%;

  position: absolute;
  top: 0;

  visibility: hidden;
  opacity: 0;

  transform: translateY(-50px);
  transition: transform .3s, opacity .3s;
}

.notification p {
  color: var(--c-white);
  font-size: 16rem;
  font-weight: 700;
  line-height: 20rem;
  text-align: center;

  padding: 8rem 0;

  animation: alternate;
}

.notification.error {
  visibility: visible;
  opacity: 1;

  transform: translateY(0);
  transition: transform .3s, opacity .3s;
}

/* .notification:not(.error) {
  transform: translateY(-100%);
} */

.hide {
  display: none;
}

@keyframes show-modal {
  0% {
    transform: scale(0.1);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes close-modal {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}