@import '_vars.css';

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
}

main {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  display: flex;
  gap: var(--spacer);
  padding: 0 var(--spacer);
  align-items: center;
  border-bottom: 1px solid black;
}

#logo {
  max-width: 40px;
  max-height: 40px;
}
#logo.loading {
  animation: rotation 10s infinite linear;  
}

h1 {
  font-weight: 300;
}

nav>ul {
  display: flex;
  flex-direction: row;
  gap: var(--spacer);
}

nav>ul>li {
  list-style: none;
}

a {
  color: black;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}