site-rules/mirzaev/site/rules/system/public/css/main.css

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

@keyframes koshka_dancing {
  100% {
    bottom: -20px;
  }
}

@keyframes hand_dancing {
  100% {
    bottom: -20px;
  }
}

@keyframes knife_dancing {
  100% {
    bottom: calc(-273px + 88px + 20px);
  }
}


:root {
  --button-light-red-active: #eee4e4;
  --button-light-red-hover: #ddcbcb;
  --button-light-red: #eadada;
  --background-light  : #fff;
  --background        : #f00;
  --background-dark   : #000;
  --text              : #020202;
  --text-light              : #fafafa;
  --text-hover        : #fff;
  --text-active       : #d0d0d0;
  --red-light-1       : #dc4343;
  --red-light         : #bf3737;
  --red               : #a43333;
  --red-dark          : #8d2a2a;
}


* {
  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);
}

button {
  cursor: pointer;
  background-color: var(--button-light-red);
}

button:hover {
  background-color: var(--button-light-red-hover);
}

button:active {
  background-color: var(--button-light-red-active);
}

button[disabled]:is(:hover, :active) {
  cursor: unset;
  background-color: var(--button-light-red);
}

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

aside {
  z-index    : 500;
}

div#wrap {
  margin-top: -394px;
  margin-left: 50vw;
  height: 394px;
  position: absolute;
  display: flex;
}

div#wrap>img#masha {
  z-index: 1500;
  bottom: 0px;
  width: 333px;
  height: 394px;
  position: relative;
  animation-duration       : 1s;
  animation-direction: alternate;
  animation-name           : koshka_dancing;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.65,.05,.36,1);
}

div#wrap>img#hand{
  z-index: 500;
  left: -30px;
  bottom: -5px;
  width: 70px;
  height: 88px;
  position: absolute;
  display: flex;
  animation-duration       : .8s;
  animation-direction: alternate;
  animation-name           : hand_dancing;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.65,.05,.36,1);
}

div#wrap>img#knife {
  z-index: 100500;
  left: calc(-112px + 70px - 40px);
  bottom: calc(-273px + 88px + 35px);
  width: 112px;
  height: 273px;
  position: absolute;
  animation-duration       : .8s;
  animation-direction: alternate;
  animation-name           : knife_dancing;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.65,.05,.36,1);

}

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

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

main {
  z-index    : 1000;
  width: 800px;
  margin: 0 auto;
  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;
}