@charset "utf-8";
/* CSS Document */
body {
            margin: 0;
            overflow: hidden;
            background: #feb47b;
        }
        canvas {
            display: block;
        }
.container {
	width: 100%; box-sizing: border-box;
            max-width: 100%;
            margin: 20px auto 0px auto;
            padding: 20px;
            font-family: sans-serif; position: fixed; bottom: 0;
        }
        .controls {
    margin: 20px 0;
    display: flex;
    /* gap: 10px; */
    align-items: center;
    align-content: flex-end;
    justify-content: center;
}
        button {
            padding: 10px 20px;
            /*background: #eb4c34;*/
			background: none; background-color: transparent;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:disabled {
            background: #93c5fd;
            cursor: not-allowed; display: none;
        }
        #visualizer {
            width: 100%;
            height: 100px;
            position: fixed; top:50%; left: 0; transform: translateY(-50%); background-color:transparent;
        }
        .progress {
            width: 100%;
            height: 4px;
            background: rgba(255,255,255,.4);
            margin-top: 10px;
            position: relative;
        }
        #progress-bar {
            height: 100%;
            background: #eb4c34;
            width: 0%;
            transition: width 0.1s linear;
        }
        #current-section {
            margin-top: 10px;
            font-weight: bold; display: none;
        }

#playButton,#stopButton {
			width: 100px; height: 100px; background-position: center; background-repeat: no-repeat; background-size: 70px;
			text-indent: -9999px;
		}
		#playButton { background-image: url("../img/play.svg");}
		#stopButton { background-image: url("../img/pause.svg");}

#book { width: 70px; height: 70px; position: fixed; top:0; right: 0; background-image: url("../img/book.svg"); background-repeat: no-repeat; background-position: center; background-size: 30px; cursor: pointer;}
#modal { width: 100%; height: 100svh; background-color: #FFF; border-radius: 0em; position: fixed; top:50%; left: 50%; transform: translate(-50%,-50%); z-index: -1; opacity: 0; transition: all .4s ease 0s;}
.open #modal { z-index: 99; opacity: 1; }
#modal #close { width: 60px; height: 60px; position: absolute; top:0; right: 0; cursor: pointer; background-image: url("../img/close.svg"); background-repeat: no-repeat; background-position: center; background-size: 25px;}
#modal .inner { width: 100%; position: absolute; top:60px; height: calc( 100% - 60px );}
#modal .inner iframe { width: 100%; height: 100%; border: none;}
#overlay { width: 100%; height: 100svh; position: fixed; top:0; left: 0; background-color: rgba(0,0,0,.6); z-index: -1; opacity: 0; transition: all .4s ease 0s;}
.open #overlay { opacity: 1; z-index: 99;}

h2 {
  font-family: "Shafarik", serif;
  font-weight: 400;
  font-style: normal; color: #3C1A08;
font-size:240%;
}