@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

*{font-family: 'Press Start 2P' ,sans-serif;}
span{margin-right:2em;}
#slider-distortion{position:relative;top:.7em;}

body {
  background-image: linear-gradient(to bottom, darkslategray, white);
}

h1, h2 {
  color: rgb(23, 30, 48);
}

#container {
  padding-left: 50px;
  padding-right: 50px;
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-areas: 
  "canvas       control-panel";
}

canvas {
  margin-left: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
  background: #fafafa;
}

#control-panel{
  background: rgb(211, 211, 211, 0.4);
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 15px;
  font-size: 1em;
}

#checkboxes {
  display: flex;
  flex-direction: column;
}

label {
  font-size: 14px;
  display: inline-block;
}

#label-volume{
  margin-left: 1rem;
}

section{
  margin-bottom: 1rem;
}

#btn-play{
  font-size: 1.2rem;
  width: 6rem;
  margin-bottom: 15px;
}

button[data-playing="yes"]:after{
  content: "Pause";
}

button[data-playing="no"]:after{
  content: "Play";
}

#btn-fs{
  font-size: 1.2rem;
  width: 15rem;
  margin-bottom: 15px;
}