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

@keyframes key_rotate {
  100% {
    rotate: -60deg;
  }
}

:root {
  --background-light-inner  : #f7f7f8;
  --background-light  : #fff;
  --background        : #f0eefb;
  --background-important : #123eab;
  --text-light        : #fafafa;
  --text              : #020202;
  --text-dark: #bcb1ca;
  --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;
}

button:hover {
  cursor: pointer;
}

.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: 500px;
  height: 60px;
  margin: 0 auto;
  display       : flex;
  border-radius: 3px 3px 0 0;
  background-color: var(--background-important);
}

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

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

main>form#panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

main>form#panel>label {
  padding: 0 7px;
  display: flex;
  align-items: center;
  position: relative;
  height: 30px;
}

main>form#panel>label>input {
  width: 100%;
  padding: 0 5px;
  border-bottom: 2px solid var(--background-light-inner);
  height: 100%;
}

main>form#panel>label>svg {
  margin-right: 7px;
}

main>form#panel>label>svg#icon_key {
  rotate: -50deg;
  animation-duration       : .6s;
  animation-direction: alternate;
  animation-name           : key_rotate;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.65,.05,.36,1);
}

main>form#panel>section#result {
  min-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  background-color: var(--background-light-inner);
}
main>form#panel>label>button[type="submit"] {
  margin-left: 20px;
  height: 100%;
  padding: 0 20px;
  border-radius: 3px;
}

main>form#panel>section#result>svg#icon_result *,
main>form#panel>label>svg * {
  color: var(--text-dark);
}

main>form#panel>section#result.inactive {
  cursor: not-allowed;
}

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;
}

