@font-face {
  font-family: 'NunitoSans-Light';
  src: url('/assets/fonts/NunitoSans-Light.ttf') format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: 'NunitoSans-SemiBold';
  src: url('/assets/fonts/NunitoSans-SemiBold.ttf') format('truetype');
  font-weight: 500;
}

@font-face {
  font-family: 'NunitoSans-Regular';
  src: url('/assets/fonts/NunitoSans-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'NunitoSans-Bold';
  src: url('/assets/fonts/NunitoSans-Bold.ttf') format('truetype');
  font-weight: 700;
}

@font-face {
  font-family: 'NunitoSans-Black';
  src: url('/assets/fonts/NunitoSans-Black.ttf') format('truetype');
  font-weight: 900;
}

input, textarea, button{
  outline: none;
}

#app-root > div {
  height: 100dvh;
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

.modal {
  outline: none;
  border: 0;
  padding: 2rem;
  position: relative;
  box-shadow: hsl(0 0% 0% / 10%) 0 0 0.5rem 0.25rem;
}

.modal::backdrop {
  background: hsl(0 0% 0% / 50%);
}

.modal-button {
  margin-top: 1rem;
  margin-right: 1rem;
  display: table;
  cursor: pointer;
  padding: .6rem .8rem;
  text-transform: uppercase;
  border-radius: .4rem;
  color: #0000EE;
}

.modal-button:hover {
  background-color: grey;
}

div[aria-modal="true"][role="dialog"]{
  background-color: rgba(0, 0, 0, 0.3);
}