:root {
  --color-win: #4e4;
  --color-lose: #f22;
  --color-pause: #444; 
  --color-turn: #00aaef;
  --color-icon-stop: invert(30%);
  --color-icon-active: invert(90%);
}

*{
  font-family:  Arial, monospace; 
  padding: 0;
  margin: 0;
} 

.container {
  width: 100%; 
  height: 100vh;
  background-color: #222;  
  box-sizing: border-box; 
  display: flex;
  padding: 15px; 
  overflow: hidden;
  min-width: 275px; 
}
.bar {
  flex-grow: 1; 
  display: flex;
  flex-direction: column-reverse;
  margin: 5px;  
}
.function-btn {  
  background-color: inherit;  
  flex-grow: 1;
  border: none; 
  transition: background-color .1s;
}

.function-btn:hover {
  background-color: #333;   
}

.function-btn:active { 
  background-color: #444;   
}
img { 
  filter:var(--color-icon-active);   
}
.player {
  color: black; 
  flex-grow: 3; 
  border-radius: 10px; 
  border: none; 
  font-size: 5rem;  
  background-color: var(--color-pause); 
  font-weight: bold; 
  box-shadow: 2px 3px black; 
  overflow: hidden; 
}
button {
  cursor: pointer; 
} 
dialog {
  font-size: 50px; 
  position: fixed;
  margin: auto; 
  width: 400px;
  height: 200px;
  background-color: #666;   
}
.modal-container {
  padding: 10px; 
}

.functions-container{
  width: 300px;
  height: 150px;  
  padding: 10px; 
}
dialog > div > div > div { 
  background-color: #222;
  margin: 10px; 
  padding: 5px; 
  display: flex;
}
label {
  flex: 1; 
  color: #ccc;     
  font-size: 30px; 
  margin: 0 5px 0 0;
}
select {
  flex: 2; 
  background-color: #222;
  border: none;
  font-size: 20px;  
  color: white; 
  text-align: center; 
  text-align-last: center; 
} 
dialog > div > button { 
  background-color: inherit;  
  border: none;
}
.cancel {
  position: absolute;
  right: 0px;   
  top: 0px;      
}
.accept {
  position: absolute; 
  right: 20px;   
  bottom: 10px;      
}
@media screen and (width < 795px) {
  .container {
    flex-direction: column;  
  } 
  .bar {
    flex-direction: row; 
  }
}