@font-face {
  font-family: fontA;
  src: url(../../assets/fontovi/font1.ttf);
}

:root{

  --crna: #222831;
  --roza: #efd7f4;
  --bijela: #eee;
  
  --bojaTeksta: #00ADB5;
  --bojaPozadine: #393E46;
  --bojaObruba: #EEEEEE;
  --bojaPara: #393E46;
  --bojaParaBlijeda: #EEEEEE;

  --gumbP: #222831;
  --gumbS: #eee;

  --strk: 20px;
  --strk2: 10px;
}


html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh; 
  background-color: var(--bojaPozadine); 
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
  
 
 

button{ 
    font-family: fontA;
    font-size: 16px;
    color:var(--roza);
    background-color: var(--crna);
    text-decoration: none; 
    border: none;
    padding: 8px 15px;
    margin: 0;
    border-radius: 0px;
    transition: .2s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/*
button:hover{
    background-color:#efd7f4;
    color: #111;
    transition: .2s;
}
*/


p{
  
  font-family: fontA;
  font-size: 16px;
  color:var(--gumbS); 
  text-decoration: none; 
  border: none;
  padding: 0px;
  margin: 0;
  border-radius: 3px;
  transition: .2s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

input{
  color: var(--gumbS);
  background-color: var(--gumbP);
  height: 15px;
  width: 150px;
} 
 
 
/* Styles the whole slider */
.mojSlider{
  width: 150px;
  background-color: transparent; 
  -webkit-appearance: none;
}


/* These styles affect what happens when the cursor is focused on the slider (i.e. clicking it) */
.mojSlider:focus {
  
  /* Stops the default outline showing up */ 
  outline-width: 3px;
  outline: none;
}
 
.mojSlider::-webkit-slider-runnable-track {
  background: var(--gumbP);
  height: 3px;
  -webkit-appearance: none;
   
  cursor: pointer;
  
}

/* This is the moveable bit of the slider, known as the "thumb"*/
.mojSlider::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  background: var(--roza);
  background: var(--gumbP);
  cursor: pointer;
  -webkit-appearance: none;
   
  margin-top: -12px;
  outline: red;
  border-radius: 0px;
  border-style: solid;
  border-width: 2px;
  border-color:var(--gumbS);
}


#progressBar{ 
  width: 100vw; 
  margin: 0;
  padding: 0;  
  position: absolute;  
  text-align: right;
  color: var(--gumbS);
  font-weight: normal;
  font-family: fontA; 
  transform: translateX(-15px);
  text-transform: none;
}
 
 
 
.g1{ 
  transition: 0.3s;
  color: var(--gumbP);
  background-color: var(--gumbS);
}

.g2{ 
  transition: 0.3s;
  background-color: var(--gumbP);
  color: var(--gumbS);
}

 

.saveg{ 
  transition: 0.4s;
  color: var(--gumbS);
  background-color: var(--gumbP);
}

.saveg:hover{
  
  transition: 0.2s;
  background-color: var(--gumbS);
  color: var(--gumbP);
}
 
   
.oklop-p5js{
  margin: 0;
  padding: 0;  
  position: absolute;
  border: var(--strk2) solid var(--bojaObruba);
  background-color: transparent;
  width: calc(100vw - 400px - var(--strk)); 
  height: calc(100vh - var(--strk)); 
  left: 0;
  top: 0;
  z-index: 0;
}

.oklop-gumbi{
  margin: 0;
  padding: 0;  
  position: absolute;
  border: var(--strk2) solid var(--bojaObruba);
  background-color: transparent;
  width: 100vw;
  height: calc(100vh - var(--strk)); 
  right: 0;
  top: 0;
  z-index: 0;
  display: none;
}