@import url('/fonts/comissioner.ttf');

:root {
  --background-light  : #fff;
  --background        : #f0eefb;
  --background-important : #123eab;
  --text              : #020202;
  --text-light        : #fafafa;
  --text-hover        : #fff;
  --text-active       : #d0d0d0;
}


* {
  text-decoration: none;
  outline        : none;
  border         : none;
  color          : var(--text);
  font-family    : 'Commissioner', Roboto, sans-serif;
  transition     : 0.1s ease-out;
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select  : none;
  -khtml-user-select   : none;
  -moz-user-select     : none;
  -ms-user-select      : none;
  user-select          : none;
}

a:hover {
  color: var(--text-hover);
}

a:active {
  color: var(--text-active);
}

body {
  margin               : 0;
  padding-top: 20vh;
  padding-bottom: 10vh;
  display: flex;
  flex-direction: column;
  background-color     : var(--background);
}

aside {
  z-index    : 500;
}

header {
  z-index       : 5000;
  width: 800px;
  height: 80px;
  margin: 0 auto;
  display       : flex;
  border-radius: 3px 3px 0 0;
  background-color: var(--background-important);
}

header>h1 {
  margin: auto;
  font-size: 2rem;
  color: var(--text-light);
}

main {
  z-index    : 1000;
  width: calc(800px - 40px);
  margin: 0 auto;
  padding: 20px;
  border-radius: 0 0 3px 3px;
  background-color: var(--background-light)
}

main>ol {
  margin: 50px 100px;
  font-size: 1.2rem;
}

main>ol>li {
  padding-left: 40px;
  margin-bottom: 8px;
}

main>ol>li::marker {
  /* font-size: 1.3rem; */
}

footer {
  z-index    : 3000;
}
