@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');

:root {

    --bg: hsl(225deg 6% 13% / 80%);
    --text: black;
    --button: #ffffff;
    --button-hv: darkred;
    --mode: white;
    --ripple: #c3c3c3d1;
    --facade:#ffffff14;
    --rounded: 10em;

}






* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  
  
  html {
    -webkit-text-size-adjust: 100%;
    font-family: 'Play', sans-serif;
    line-height: 1.15;
  }
  
  
  a {
      color: var(--text);
      text-decoration: none;
      transition: color 150ms ease;
  }
  
  
  body>* {
      margin-left: 1em;
  }
  
  
  body {
      background: var(--cover) center;
      color: var(--text);
      display: flex;
      justify-content: center;
      align-items: center;
      background-size: cover;
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
      background-attachment: fixed;
      background-image: url("https://desu.shikimori.one/system/user_images/original/639050/1505858.jpg");
  }
  
  
  
  body:after {
      background: var(--bg);
      position: fixed;
      width: 100%;
      height: 100%;
      content: '';
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
       z-index: -1;
  }
  
  
  /* Меню  */
  
  
  li {
      list-style: none;
  }
  
  
  
   .menu:hover {
      background: var(--button-hv);
      margin-top: 0.2em;
  }
  
  
  .menu {
      display: inline-block;
      vertical-align: top;
      min-width: 92px;
      padding: 0.375rem 1rem;
      margin: 0.375rem 0.5rem 0.375rem 0;
      background: var(--button);
      border: 0;
      border-radius: 3px;
      font-size: .875rem;
      font-weight: bold;
      line-height: 1.5rem;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      transition: .2s all;
      user-select: none;
  }
  .menu a:hover {
    background: var(--button-hv);
    margin-top: 0.2em;
}


.menu a {
    display: inline-block;
    vertical-align: top;
    min-width: 92px;
    padding: 0.375rem 1rem;
    margin: 0.375rem 0.5rem 0.375rem 0;
    background: var(--button);
    border: 0;
    border-radius: 3px;
    font-size: .875rem;
    font-weight: bold;
    line-height: 1.5rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: .2s all;
    user-select: none;
}
  .menu_head:hover {
    background: var(--button-hv);
  }
  .menu_head {
    display: inline-block;
    vertical-align: top;
    min-width: 92px;
    padding: 0.375rem 1rem;
    margin: 0.375rem 0.5rem 0.375rem 0;
    background: var(--button);
    border: 0;
    border-radius: 3px;
    font-size: .875rem;
    font-weight: bold;
    line-height: 1.5rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: .2s all;
    user-select: none;
  }