@charset "utf-8";
/* CSS Document */
body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100vh;
            background-color: #FFEC01;
            flex-direction: column;
        }

#canvasWrap { height: calc( 100svh - 160px); position: fixed; top:0; left: 0; width: 100%;}
        canvas {
            width: 100%; height: 100%; object-fit: contain;
            max-width: 800px; position:absolute; top:50%; left: 50%; transform: translate(-50%,-50%);
           
            display: block;
        }
h1 { text-align: center; width: 100%; margin: 0; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); color: #000;font-family: "Pixelify Sans", sans-serif; font-weight: 600; letter-spacing: .5em; font-size: 6vw;}
h1 span { display: block;}
        #playButton,#stopButton {
            margin-top: 0;
            padding: 0; width: 80px; height: 80px;
            border: none;
             border-radius: 50%;
            cursor: pointer;
            font-size: 16px; background-size: 50px;
        }
#playButton { background-image: url("../img/play.svg");}
#stopButton { background-image: url("../img/pause.svg");}
#nextButton {background-image: url("../img/next.svg");}
        .parameters {position: fixed; top:0; left: 0; color: rgba(0,0,0,1.00); opacity: .1; font-size: 2.6svh;font-family: "Pixelify Sans", sans-serif;}
.parameter { display: flex;}

button { width: 60px; height: 60px; background: none; background-color:rgba(0,0,0,1); border: none; border-radius: 50%;background-position: center; background-repeat: no-repeat; background-size: 25px; text-indent: -9999px; margin: 0 10px;}
        button:disabled{ display: none; }
button.disabled { display: none;}
button:disabled+button.disabled { display: block; opacity: 0;}
button.space { opacity: 0;}

#controls { display: flex;justify-content: center; width: 100%; position:fixed; bottom: 40px; left: 0;align-items: center;
}

@media (orientation: landscape) {
	#canvasWrap { height: calc( 100svh - 0px);}
    h1 { font-size: 3vw;}
}