.barlow-thin {
    font-family: "Barlow", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .barlow-extralight {
    font-family: "Barlow", sans-serif;
    font-weight: 200;
    font-style: normal;
  }
  
  .barlow-light {
    font-family: "Barlow", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .barlow-regular {
    font-family: "Barlow", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .barlow-medium {
    font-family: "Barlow", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .barlow-semibold {
    font-family: "Barlow", sans-serif;
    font-weight: 600;
    font-style: normal;
  }
  
  .barlow-bold {
    font-family: "Barlow", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .barlow-extrabold {
    font-family: "Barlow", sans-serif;
    font-weight: 800;
    font-style: normal;
  }
  
  .barlow-black {
    font-family: "Barlow", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .barlow-thin-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 100;
    font-style: italic;
  }
  
  .barlow-extralight-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 200;
    font-style: italic;
  }
  
  .barlow-light-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .barlow-regular-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .barlow-medium-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 500;
    font-style: italic;
  }
  
  .barlow-semibold-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 600;
    font-style: italic;
  }
  
  .barlow-bold-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .barlow-extrabold-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 800;
    font-style: italic;
  }
  
  .barlow-black-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 900;
    font-style: italic;
  }
  

input
{
border-radius: 4px;
width: 44px;
height: 44px;
margin: 4px;



}

input[type="button"]{

    cursor: pointer;

}

#wyswietlacz
{
color: rgb(34, 34, 34);
width: 270px;

}
#kalkulator{

border: solid 4px rgb(178, 178, 178);
width: fit-content;
border-radius: 8px;

}
.centrujacydiv
{
    

display: flex;
justify-content: center;

}



@keyframes TomAnim {
	0%,
	100% {
		transform: rotate(0deg);
		transform-origin: 50% 100%;
	}

	10% {
		transform: rotate(2deg);
	}

	20%,
	40%,
	60% {
		transform: rotate(-4deg);
	}

	30%,
	50%,
	70% {
		transform: rotate(4deg);
	}

	80% {
		transform: rotate(-2deg);
	}

	90% {
		transform: rotate(2deg);
	}
}


#wuj {
    
float: left;
    width: 30%; 
    height: 100%; 
   display: none;
    /*animation: TomAnim 30s cubic-bezier(0.64, 0, 0.78, 0) 0s infinite normal forwards;*/
  }

  #tomIdialog{

    padding: 4px;
    position: fixed; 
    bottom: 0;
    left: 0;
    width: 100%; 
    height: 31%;
    
    margin: 10px;


  }


  #dialog{

display: none;
animation: none;
background-color: white;
width: 44%; 
height: 100%; 
float: left;
border-radius: 10px;
border: rgb(178, 178, 178) solid 4px;
padding-top: 5px;
padding-left: 10px;

font-size: 180%;
font-family: Barlow;

  }


  @keyframes tom_entrance {
    0% {
      animation-timing-function: ease-in;
      opacity: 0;
      transform: translateX(-250px);
    }
  
    38% {
      animation-timing-function: ease-out;
      opacity: 1;
      transform: translateX(0);
    }
  
    55% {
      animation-timing-function: ease-in;
      transform: translateX(-90px);
    }
  
    72% {
      animation-timing-function: ease-out;
      transform: translateX(0);
    }
  
    81% {
      animation-timing-function: ease-in;
      transform: translateX(-30px);
    }
  
    90% {
      animation-timing-function: ease-out;
      transform: translateX(0);
    }
  
    95% {
      animation-timing-function: ease-in;
      transform: translateX(-10px);
    }
  
    100% {
      animation-timing-function: ease-out;
      transform: translateX(0);
    }
  }

  @keyframes dialappear {
    0% {
      transform: scale(0);
    }
  
    100% {
      transform: scale(1);
    }
  }

#PPW{
display: none;
margin: 4px;


animation: PPW_entrance 1s;


}

#UI{

  position: fixed;
  top: 0;
  left: 0;

}
#kolo_fortuny{
position: fixed;

width: fit-content;
height: fit-content;

top: 12%;
left: 75%;
display: none;
/*
width: 20%;
height: 40%;
*/
z-index: -1;
}
#wheel{

  
  width: 70%;
  height: 70%;
  transition-duration: 20s;
  
  
  animation: achomiti_entrance 2s;



}
#pointer{

  width: 100%;
  height: 100%;
  animation: achomiti_entrance 2s;
  position: absolute;
  z-index: 2;
  width: 20%;
  height: 30%;
  top: -20%;
  left: 24%;

}
#spin_button{

  display: none;
  position: fixed;
  z-index: 3;
  top: 29%;
  left: 82%;
  width: fit-content;
  height: fit-content;
  font-size: large;
  border: 4px solid rgb(77, 27, 2);
  background-color: rgb(127, 45, 5);
  color: red;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  animation: achomiti_entrance 2s;
}
#spin_button:hover{

  border:4px solid red;
  background-color: rgb(169, 62, 9);
}


#money_counter{

  border: 5px solid rgb(68, 49, 9);
  background-color:rgb(97, 68, 7);
  margin: 4px;
  border-radius: 3px;
  color:rgb(46, 180, 9);
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  animation: PPW_entrance 1s;


}

@keyframes PPW_entrance{

from{transform: translateX(-400%)};
to{transform: translateX(0%)};

}

#achomiti{

  display: none; 
  position: fixed;
  top: 50%;
  left: 85%;
  width: 10%;
  height: 20%;
  animation: achomiti_entrance 2s;

}

@keyframes achomiti_entrance{

from{transform: translateX(600%)};
to{transform: translateX(0%);}

}

#achomiti_dial{

  font-family: monospace;
  color: darkslategray;
  text-align: center;
  display: none; 
  position: fixed;
  top: 30%;
  left: 65%;
  width: 20%;
  height: 40%;
  animation: achomiti_dial_appear 2s;

}

@keyframes achomiti_dial_appear{

  from{filter: opacity(0%)};
  to{filter: opacity(100%);}
  
  }

  @keyframes achomiti_disappear{

    from{filter: opacity(100%)};
    to{filter: opacity(0%);}
    
    }

#money_lg_ui{
  
  
top: 0;
left: 0;
position: fixed;
align-items: center;
display: flex;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.772);
z-index: 22;

/*
display: none;
filter: opacity(100%);
*/
transition-duration: 1s;
display: none;
}

#money_lg_ui div{

display: block;
width: 100%;
transform: translateY(-30%);

}

#money_lg_ui h1, h2{

z-index: 23;
text-align: center;

}

#gamble_gain{

color: white;


}

body{

  background-color: white;
  
  }