body{background-color: #9babc5;color:#f0eee9;font-family: monospace;}
.mache {display: grid;grid-template-columns: repeat(5, 1fr);gap: 0px; padding: 0px;background-color: #836953;border-radius: 0px 0px 10px 10px;
    max-height: 450px;}
.navi {background-color:  #9babc5;padding: 0px;
    border-radius: 0px 0px 20px;
    text-align: center;border:3px solid #9babc5;}
.subh {
    grid-column: span 4 / span 4;text-align: center;
    color: #9babc5;padding: 0%;margin: 0%;}
.cover {
    grid-column: span 3 / span 3;
    grid-row-start: 2;
    padding:20px;
    max-height: 300px;
    overflow-y:scroll;
    position: relative;}
.com {display: grid;grid-template-columns: 1fr 1fr;grid-template-rows:auto;grid-auto-flow: row;align-content: center;}
.com div {margin: 5px;border: 1px solid #836953;border-radius: 3px;height: 50px;}
.list {grid-column: span 2 / span 2;
    grid-column-start: 4;
    grid-row-start: 2;
    max-height: 350px;
    padding:5%;
    overflow-y:auto;}
.text {
    grid-column: span 5 / span 5;
    grid-row-start: 3;
}
a {
    color:#f0eee9;
    text-decoration: none;
    border-bottom: 1px #836953;}
input{
    background-color:#f0eee9;
    color:#836953;
    font-family: monospace;
    font-size: 11px;
    border: none;
    border-radius: 20px;
    cursor: pointer;}
::-webkit-scrollbar {width:0.1px;height:0.1px;background-color:red;border:1px solid #836953;}
::-webkit-scrollbar-thumb {background-color:#9babc5;}
.title {
    font-family:'myrtille_pixel';
    color:#9babc5;
    font-size:40px;}
.ascii {
    font-family:'jgs5';
    color:#f0eee9;
    font-size:11px;}
summary {
    list-style-type:'';
    cursor: pointer;
    font-family:myrtille_pixel; 
    color:#9babc5; 
    font-size: 40px;
    text-align: center;
} 
#watadrag {
    position: absolute;
    z-index: 9;
    background-color: #836953;
    border: 0px solid #836953;
    border-radius: 20px 20px 20px 20px ;
    text-align: center;
    top: 20%; left: 10%;

}
#watadragheader {
    padding:0px 5px 0px 0px;
    font-family:jgs5;
    cursor: move;
    z-index: 10;
    background-color:#836953;
    color: #f0eee9;
    border:10px solid #836953;
    border-radius: 30px 30px 0px 0px;
    text-align: center;
}
#watavid {
    z-index: 11;
    background-color: #836953;
    border: 0px solid #836953;
    border-radius: 20px 20px 20px 20px ;
    bottom: 20%; right: 10%;
    width: 250px;
    position: absolute;

}
#watavidheader {
    padding:0px 5px 0px 0px;
    font-family:jgs5;
    z-index: 10;
    background-color:#836953;
    color: #f0eee9;
    border:10px solid #836953;
    border-radius: 30px 30px 0px 0px;
    text-align: center;
}
.musicplayer{
    font-family:monospace;
    font-size:11px;
    background:transparent;
    border:1px;width:90%;
    padding:5px;
    text-align:center;
    display:flex;
    flex-direction:column;
    gap:5px;
}
.songtitle, .track-info, .now-playing{padding:2px;}
.controls{display:flex; flex-direction:column;}
.buttons{display:flex;justify-content:center;align-items:center;width:100%;}
.buttons div{width:100%;}
.seeking, .volume{display:flex;flex-direction:row;align-items:center;gap:10px;}
.now-playing, .track-info{background-color:transparent;}
.now-playing{font-weight:normal;}
.material-icons{cursor: pointer;}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;background-color:inherit;}
input[type=range]:focus{outline:none;}
input[type=range]::-webkit-slider-runnable-track{width:100%;height:0.6px;background:#9babc5;}
input[type=range]::-webkit-slider-thumb{height:9px;width:3px;border-radius:5;background:#9babc5;-webkit-appearance:none;margin-top:-3px;}
input[type=range]::-moz-range-track{width:100%;height:4px;background:#9babc5;}
input[type=range]::-moz-range-thumb{height:10px;width:10px;border-radius:0;background:#9babc5;border:none;}

@media only screen and (max-width: 1000px){
    glue{margin-top: 15%;}
    .com div{min-height: 150px;}
    #watadrag{top: 75%;left: 60%;}
    #watavid{display:none;}
}