* {
   margin: 0;
   padding: 0;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

:root {
   --bg: hsl(0, 0%, 100%);
   --clr: hsl(0, 0%, 15%);
   --link: hsl(235, 100%, 50%);
   --btn: hsl(0, 0%, 80%);
}

.dark {
   --bg: hsl(0, 0%, 10%);
   --clr: hsl(0, 0%, 100%);
   --link: hsl(230, 100%, 75%);
   --btn: hsl(0, 0%, 30%);
}

body {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   gap: 2rem;
   width: 100vw;
   height: 100vh;
   background-color: var(--bg);
   color: var(--clr);
}

a {
   color: var(--link);
}

form {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}

input {
   min-width: 360px;
   padding: 0.4rem 0.5rem;
   background-color: var(--bg);
   color: var(--clr);
   border: 1px solid var(--btn);
}

button {
   padding: 0.4rem;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 0.3rem;
   min-height: 18px;
   cursor: pointer;
   border: 1px solid var(--btn);
   background-color: var(--btn);
   color: var(--clr);
}

button.loading .spinner {
   display: inline-block;
}

.spinner {
   display: none;
   border: 2px solid var(--link);
   border-radius: 50%;
   border-top: 2px solid var(--btn);
   width: 1rem;
   height: 1rem;
   animation: spin 1.3s linear infinite;
}

@keyframes spin {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}

#theme-btn {
   position: fixed;
   top: 0;
   right: 0;
   margin: 1rem;
}