input {
    border-radius: 2px;
    margin: 3px;
}
body {
      background: rgba(0, 0, 0, 0.91);
      color: white;
      font-family: Calibri, sans-serif;
      font-size: 1.15em;
      text-align:center;
}
.main-menu {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 20px 0;
}

.main-menu * {
    box-sizing: border-box;
    margin: 0;
}

#main-button {
      background-color: #431717 ;
      color: #F5E8E8 ;
      padding: 12px;
      font-size: 17px;
}
#generator-button {
      background-color: #431717 ;
      color: #F5E8E8 ;
      padding: 12px;
      font-size: 17px;
}
#rules-button{
      background-color: #431717 ;
      color: #F5E8E8 ;
      padding: 12px;
      font-size: 17px;

}
#about-button{
      background-color: #431717 ;
      color: #F5E8E8 ;
      padding: 12px;
      font-size: 17px;
}
.generator {
      padding-left: 45px;
      padding-top: 30px;
}
.kecy {
      background: rgba(0, 0, 0, 0.92);
      width: min(90%, 620px);
      padding: 10px 30px;
      margin-bottom: 20px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.92), 0 6px 6px rgba(0, 0, 0, 0.80);
      margin: auto;
      text-align: justify;
}
.tlacitka_generator {
      width: 500px;
      margin: auto;
}
.formular {
      background: hsl(10, 0%, 100%);
}
.menu_pravidla {
      width: 500px;
      margin: auto;
}

input[type='button'],input[type='submit']{
      background: hsl(0, 0%, 100%);
      border-radius: 8px;
    border:none;
    cursor: pointer;
}
input[type='button']:hover ,input[type='submit']:hover {
      animation-name: background-color-2;
      animation-duration: 200ms;
      animation-fill-mode: forwards;
}
@keyframes background-color-2 {
                   100% {
                             background-color: hsl(0, 0%, 65%);
                         }
}

#bottom-bar {
      background-color: #060606;
      position: fixed;
      bottom: 0px;
      left: 30%;/*37%*/
      width: 40%;/*26%*/
      padding: 5px;
      border-radius: 2px;


}
#bottom-bar .bottombuttons {
      background-color: #060606;
      color: white;
      border: none;
      height: 100%;
      border-radius: 0%;
      display: inline-block;
}
.parent {
      position: relative;
      width: min(90%, 620px);
      padding: 50px 0px;

      margin: auto;
}
.child{
      position: absolute;
      left: 0;
      top: 0;
}
h1,h2{
      margin-top: 0;
      margin-bottom: 24px;
}

/*hides spinners on number type inputs*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; /* <-- Some margins still there even though hidden */
}
input[type=number] {
    -moz-appearance:textfield;
}

input:invalid {
      /*background-color: #8bc766;TODO*/
}

#mainForm {
      margin-bottom: 40px;
      /*TODO when narrow window the bottom of minimized colors is affected by bottom menu expanding; also mobile phones*/
}

input:disabled{

}

select {
      /* for Firefox */
      -moz-appearance: none;
      /* for Chrome */
      -webkit-appearance: none;
}

input[type='color'].color-filler {
      background-color: #000000;
}

.minimized {
      width: min(98%, 650px);/*sync with map and especially colorsMain; ?mobile tests*/
      margin: 0 auto;
}