@charset "utf-8";
/* CSS Document */
body {
 font-family: "Raleway", sans-serif;
            height: 100svh;
            margin: 0;
            
        }
        .card { 
            background-color:rgba(255,255,255,0.45);
            padding: 40px 20px;
            width: 100%; position: fixed; left: 0; bottom: 0; box-sizing: border-box; z-index: 1;
        }
        .card-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .info {
            position: fixed; top:60px; left: 0; padding: 4vw;
        }
        .info p {
            margin: 5px 0;
        }
        .label {
            font-size: 3vw;;
            
        }
        .value {
            font-size: 3.5vw;
            font-weight: bold;
        }

@media (orientation: landscape) {
			.label {
            font-size: 1.5vw;;
            
        }
        .value {
            font-size: 1.75vw;
        }
	.info {
           padding: 2vw; max-height: calc( 100svh - 60px); box-sizing: border-box; overflow: auto;
        }
		}
		canvas { width: 100%; height: 100%; object-fit: cover; object-position: center; position: fixed; top:0; left: 0; z-index: -1;}
		
		.button {
            width: 80px; height: 80px; margin: 0 1em; text-indent: -9999px; appearance:none; background:none; background-color: transparent; border: none; background-position: center; background-repeat: no-repeat; background-size: 42px; border-radius: 50%; background-color: rgba(235,235,235,0.43);
        }
		
		#controls { display: flex;justify-content: center;align-items: center;}
		#playPauseButton { background-image: url("../img/play.svg");}
		#playPauseButton.pause { background-image: url("../img/pause.svg");}
		#nextButton { background-image: url("../img/next.svg"); background-size: 32px;width: 60px; height: 60px;}
		#controls div { opacity: 0;}

header { height: 60px; width: 100%; position: fixed; top:0; left: 0;background-color: rgba(255, 255, 255, 0.45); z-index: 1;}
header nav { display: flex; height: 100%;}
header nav a { display: block; width: 50%; height: 100%; color: #000; text-align: center; line-height: 60px; text-decoration: none;}
header nav a.seleted { font-weight: bold; border-bottom: 2px solid #4CAF50;}