:root {
    --bodyBackground: rgba(46, 42, 35, 1.0);
    --button: rgba(255,255,255,.2);
    --text: rgba(255, 255, 255, 0.8);
    --div: rgba(0,0,0,.15);
    --task:  rgba(153, 217, 250, 0.8);
    /*--tip: rgb(0,0, 0,0.2);*/
    --tip: rgb(208, 142, 39,1);
    /*--tip: rgb(208, 142, 39,0.8);*/
    /*--solution: rgb(94, 214, 90, 0.8);*/
    --solution: rgb(94, 214, 90, 0.8);
    --shortcutInfo: rgb(100, 100, 100, 0.5);
    --example: rgb(208, 142, 39,1);
  }
@font-face {
    src: url(FredokaOne-Regular.ttf);
    font-family: 'myImportedFont';
}
html, body, * { touch-action: manipulation; }
body {
  margin: 0;
  padding: 0;
  overflow-y: hidden;
  background: var(--bodyBackground);
  display: grid;
  place-items: center;
}
body * {
  font-family: 'myImportedFont', sans-serif;
  font-size: 1.2rem;
  color: var(--text);
}
button,select {
    margin: 5px;
    border-radius: 10px;
    border: none;
    background: var(--button);
    padding: 12px 20px;
  }

option {
  background-color:  var(--bodyBackground);
}

input{
  border: none;
  border-radius: 10px;
   border-color: transparent;
     /*outline: none;*/

}
/*
option:checked, option:hover {
    color: red;
    background: green;
      background-color: #488f8f; 
}

option:hover {
  background-color: #488f8f; 
} 


::selection {
  color: red;
  background: yellow;
}*/