:root {
  --color-0: hsl(30,59%,53%);
  --color-1: hsl(30,50%,70%);
  --color-2: hsl(30,59%,35%);
  --color-dark: hsl(30,15%,15%);
  --color-light: hsl(30,30%,95%);
}
* {
  outline: none;
}
html, body, dialog {
  font-family: sans-serif;
  color: var(--color-light);
  background-color: var(--color-dark);
}
hr {
  border: 1px solid;
}
html, body {
  margin: 0;
  padding: 0;
}
main.canvas {
  opacity: 0;
  animation: visible 3s ease forwards;
}
@keyframes visible {
  to {
    opacity: 1; 
  }
}
iframe {
  border: 0px;
  width: 100%;
  border-radius: 4px;
}
a{
  color: var(--color-1);
  text-decoration: none;
}
canvas {
  touch-action: none;
}
.btn-container {
  top: 1%;
  left: 1%;
  position: absolute;
  .kofi-button{
    min-width: fit-content;
  }
}
.canvas {
  button {
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    position: absolute;
    color: var(--color-2);
    background-color: var(--color-0);
  }
  .config {
    top: 1.5%;
    right: 1%;
  }
  .info {
    right: 1%;
    top: calc(min(100vw,100vh)/9);
  }
  .match {
    right: 1%;
    top: calc(min(100vw,100vh)/9*1.9);
  }
  .laws {
    left: 1.5%;
    bottom: calc(min(100vw,100vh)/9*1.5);
  }
  .books {
    left: 1.5%;
    bottom: calc(min(100vw,100vh)/9*2.4);
  }
  .user {
    left: 1.5%;
    bottom: 1.5%;
  }
  .icon {
    width: calc(min(100vw,100vh)/9*0.7);
    height: calc(min(100vw,100vh)/9*0.7);
  }
}
dialog {
  border: 0;
  width: 100%;
  max-width: 320px;
  border-radius: 4px;
  max-height: fit-content;
  button, .button, input, textarea {
    width: 100%;
    font: inherit;
    display: block;
    color: inherit;
    border: 1px solid;
    border-radius: 4px;
    margin-block: 0.1em;
    padding: 0.5rem 1rem;
    box-sizing: border-box;
    background-color: inherit;
  }
  .close{
    width: auto;
    float: right;
    padding: 0.3rem 0.5rem;
    &::after {
      content: 'x';
    }
  }
  &::backdrop {
    background-color: #000A;
  }
}