@font-face {
  font-family: Montserrat;
  src: url(../Fonts/Montserrat-Medium.ttf);
}
@font-face {
  font-family: Documan;
  src: url(../Fonts/DocumanSemiBold.otf);
}
@font-face {
  font-family: Pixel;
  src: url(../Fonts/PixelifySans-VariableFont_wght.ttf);
}
      :root {
          --bet1: #222f3e;
          --bet2: #576574;
      }

  * {
    color: white;
    font-family: Montserrat;
    box-sizing: border-box;
  }

  html {
      position: relative;
      height: 100%;
      width: 100vw;
      overflow: hidden !important;
  }

      body {
          height: 100%;
          width: auto;
          overflow: hidden !important;
          background: none;
          display: flex;
          flex-direction: column;
      }

        @keyframes appear {
          0% { opacity: 0; }
          100% { opacity: 1; }
        }
        @keyframes info_appear {
          0% { opacity: 0;transform: translate(-50%,-30px) scale(0.9); }
          100% { opacity: 1;transform: translate(-50%,0px) scale(1); }
        }
        @keyframes hide_infos {
          0% { opacity: 1;display: block;transform: translate(-50%,0px) scale(1); }
          99% { opacity: 0;display: block;transform: translate(-50%,-30px) scale(0.9); }
          100% { opacity: 0;display: none; }
        }

      #info {
        position: absolute;
        top: 0px;
        left: 50%;
        transform: translate(-50%,0px);
        min-width: 75%;
        max-width: 95%;
        display: table;
        font-size: 0.9em;
        text-align: center;
        border-radius: 10px 10px 10px 10px;
        background: rgb(255 255 255 / 100%);
        color: black;
        padding: 1em;
        opacity: 0;
        animation: info_appear .5s 1s forwards, hide_infos 1s 6s forwards;
        z-index: 2;
      }

      #main_game {
        height: 50vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      #mise {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        flex-direction: column;
        z-index: 2;
      }

        #input_mise {
          display: flex;
          flex-direction: column;
          margin: 0px 0px 5px 0px;
        }


        #mise_btns {
          display: flex;
          width: 100%;
          justify-content: flex-start;
          height: 2.75em;
        }
          #mise_btns > input {
            margin: 0px auto 0px 0px;
            outline: none;
            border: none;
            border-radius: 7px 7px 7px 7px;
            /*background: linear-gradient(90deg, rgb(1 1 1 / 40%), rgb(1 1 1 / 0%));*/
            background: rgb(1 1 1 / 15%);
            font-size: 1em;
            font-weight: bold;
            padding: 0px 0px 0px 1em;
            transition: background .1s, border .1s;
            filter: grayscale(1);
          }
            #mise_btns > input::placeholder {
              color: rgb(255 255 255 / 100%);
            }
            #mise_btns > input:focus {
              background: linear-gradient(360deg, rgb(1 1 1 / 10%), transparent);
              border-radius: 0px;
              border-bottom: 4px solid white;
            }
          #mise_btns > button {
            display: flex;
            border: none;
            align-items: center;
            justify-content: center;
            width: 5em;
            border-radius: 5px;
            margin: 0px 0px 0px 3px;
            font-size: 1em;
            font-weight: bold;
            background: var(--bet1);
            transition: background .1s;
          }
            #mise_btns > button:hover {
              background: var(--bet2);
            }

      #bet {
        margin: 1em auto 0px auto;
        width: 100%;
        padding: 1em;
        font-size: 1.5em;
        font-weight: bold;
        border-radius: 0.75em;
        outline: none;
        border: none;
        box-shadow: 0px 14px 5px rgb(1 1 1 / 30%);
        background: var(--bet1);
        transition: background .1s, box-shadow .1s, transform .1s;
        text-transform: capitalize;
      }
        #bet:active {
          box-shadow: 0px 0px 0px rgb(1 1 1 / 30%);
          transform: translate(0px,14px);
        }