body {
    background-color: black;
    background-image: url('bk.jpg');
   /*background-size: cover;
    background-color: black;
    background-repeat:no-repeat;*/
}


#interface {
    width: 282px;
    height: 400px;
    /*border: 5.5px solid;
    border-style: outset;*/
    margin-top: 28px;
    margin-left:34px;
    z-index: 98;
    position: fixed;
}

#loading-screen {
    position:fixed;
    font-family: cursive;
    font-size: 20px;
    z-index: 99999999;
    color:black;
    margin-top: 170px;
    margin-left: 110px;
    text-shadow: 2px 2px 5px purple;

    
}

#secondinterface {
    margin-top: 385px;
    margin-left: 10px;
    position:fixed;
    font-size: 10px;
    z-index: 99;
}

#Scndframe {
    width: 55px;
    height: 100px;
    margin-top: 40px;
    margin-left: -12px;
    position: fixed;
    z-index: 99;

    
}

#ScndframeTwo {
    width: 352px;
    height: 20px;
    margin-top: 120px;
    margin-left: 5px;
    position: fixed;
    
}

#ScndframeThree {
    z-index: 99;
    width: 55px;
    height: 100px;
    margin-top: 40px;
    margin-left: 290px;
    position: fixed;
    
}

#introduction {
    position: fixed;
    z-index: 99;
    color: black;
    margin-top: 360px;
    margin-left: 50px;
    font-size: 30px;
    font-family: 'Almendra Display', cursive;
    text-shadow: 2px 2px 5px purple;
}


#lyrics {
    position: fixed;
    z-index: 99;
    margin-top: 340px;
    margin-left: 43px;
    color:black;
    font-size: 25px;
    font-family: 'Tangerine', cursive;
    text-shadow: 4px 0 3px #e426bb, 0 0 5px #9900ff;

}

#lyricsEntiendo {
    position: fixed;
    z-index: 99;
    margin-top: 340px;
    margin-left: 40px;
    color:rgb(255, 255, 255);
    font-size: 25px;
    font-family: 'Tangerine', cursive;
    text-shadow: 4px 0 3px #ffffff, 0 0 5px #e426bb; 
}

#lyricsSynth {
    position: fixed;
    z-index: 99;
    margin-top: 340px;
    margin-left: 43px;
    color:white;
    font-size: 25px;
    font-family: 'Tangerine', cursive;
    text-shadow: 4px 0 3px #e426bb, 0 0 5px white;
}

#lyricsCD {
    position: fixed;
    z-index: 99;
    margin-top: 360px;
    margin-left: 43px;
    color:white;
    font-size: 25px;
    font-family: 'Tangerine', cursive;
    text-shadow: 4px 0 3px #e426bb, 0 0 5px white;
}

#volume-control {
    position: fixed;
    margin-top: -353px;
    margin-left: -22px;

    fill: pink;
    color: violet;
    background-color: violet;
}

input[type="range"] {
    fill: pink;
    color: violet;
    background-color: violet;

    -webkit-appearance: slider-vertical;
    background-color: violet;

  }

#buttons {
    width: 348px;
    height: 80px;
    overflow: scroll;
   /* border: 5.5px solid;
    border-style: outset;*/
    margin-top: 425px;
    margin-left: 10px;
    position: absolute;
    font-family: 'Tangerine', cursive;
    text-shadow: 4px 0 3px #e426bb, 0 0 5px white;


}

p{
    color: red;
    font-size:14px;
    margin-left: 45px;
   
}

a {
    color: white;
    text-decoration: none;} 

a:hover { color:pink;
    text-decoration: none;
 }
.nav a { color:white; };


#first {
    margin-left: 40px;
    margin-top: 0px;
    position: fixed;
}

#firstBtn {
    width: 30px;
    color:white;
   
}

#second {
    margin-left: 150px;
    margin-top: 2px;
    position: fixed;
}

#sBtn {
    width: 30px;
    color:white;
    
}

#third {
    margin-left: 40px;
    margin-top: 36px;
    position: fixed;
}

#tBtn {
    width: 30px;
    color:white;
}

#four {
    margin-left: 150px;
    margin-top: 40px;
    position: fixed;
}

#fBtn {
    width: 30px;
    color:white;
}

#five {    
    margin-left: 250px;
    margin-top: 40px;
    position: fixed;
}

#fiveBtn {
    width: 20px;
    height: 30px;
    color:white;
   

}

#six {    
    margin-left: 250px;
    margin-top: 5x;
    position: fixed;
}

#sixBtn {
    width: 20px;
    
    color:white;
   

}

#txt {
    margin-left: -13px;
    margin-top: 500px;
    position:fixed;
}

h2 {
    margin-left: 30px;
    margin-top: 25px;
    font-size: 10px;
    color: black;
    position:fixed;
}


.button{
    color:white;

}

#frame {    
    width: 32px;
    height: 420px;
    margin-top: 0px;
    margin-left: 0px;
    position: fixed;
    z-index: 99;
}

#frame_two {    
    width: 352px;
    height: 32px;
    margin-top: 0px;
    margin-left: 0px;
    position: fixed;
    z-index: 99;
}

#frame_three {    
    width: 32px;
    height: 420px;
    margin-top: 0px;
    margin-left: 320px;
    position: fixed;
    z-index: 99;
}

#frame_four {    
    width: 281px;
    height: 38px;
    margin-top: 390px;
    margin-left: 35px;
    position: fixed;
    z-index: 98;
}

#yes {
    margin-left: 30px;
    margin-top: 20px;
    position:fixed;

}

#no {
    margin-left: 240px;
    margin-top: 20px;
    position:fixed;
    /*font-family: 'Press Start 2P', cursive;*/

}

#yodeantes {
    margin-left: 120px;
    margin-top: 20px;
    position:fixed;
}


/*PASADO.HTML*/

#rtLeft {
    margin-top: 30px;
    margin-left: 60px;
    position: fixed;
}

#mvForward {
    margin-top: 30px;
    margin-left: 160px;
    position: fixed;
}

#rtRight {
    margin-top: 30px;
    margin-left: 260px;
    position: fixed;
}

#time {
    position: fixed;
    margin-top: 10px;
    margin-left: 260px;
}


h1 {
    font-size: 15px;
}

#menu{
    position: fixed;
    z-index: 99;
    margin-top: -30px;
    margin-left: 20px;
}

#lft {
    width: 30px;
}

#front {
    width: 30px;
}

#right {
    width: 30px;
}

/*INFERNO*/

#play {
    margin-left: 140px;
    margin-top: 25px;
    position: fixed;
    z-index: 90;
}

#play_two {
    margin-left: 140px;
    margin-top: 25px;
    position: fixed;
    z-index: 95;
}

#myVideo {
    width: 252;
    height: 620;
    position: fixed;
    margin-left: 10px;
    margin-top: 20px;
    z-index: 90px;
}

#bocina {
    position: fixed;
    z-index: 99;
    width: 35px;
    height: 900;
    margin-top: 353px;
}

#bocina2 {
    position: fixed;
    z-index: 99;
    width: 35px;
    height: 900;
    margin-top: 353px;
    margin-left: 316px;
}

#luz {
    position: fixed;
    z-index: 99;
    width: 75px;
    height: 900;
    margin-top: 18px;
    margin-left: 80px;

}

#luz2 {
    position: fixed;
    z-index: 99;
    width: 75px;
    height: 900;
    margin-top: 18px;
    margin-left:144px;
}

#speaker {
    position: fixed;
    z-index: 999;
    width: 35px;
    height: 900;
    margin-top: 10px;
    margin-left:10px;
}

#luz3 {
    position: fixed;
    z-index: 99;
    width: 75px;
    height: 900;
    margin-top: 18px;
    margin-left:210px;
}

#logo {
    position: fixed;
    z-index: 99;
    width: 35px;
    height: 900;
    margin-top: 358px;
    margin-left: 270px;
}

#logo2 {
    position: fixed;
    z-index: 99;
    width: 35px;
    height: 900;
    margin-top: 326px;
    margin-left: 270px;
}

#logo3 {
    position: fixed;
    z-index: 99;
    width: 35px;
    height: 900;
    margin-top: 280px;
    margin-left: 270px;
}





#art {
    position: fixed;
    z-index: 98;
    width: 35px;
    height: 522px;
}

#RghtArt {
    position: fixed;
    z-index: 98;
    width: 36px;
    height: 522px;
    margin-left: 316px;
}

#top {
    position: fixed;
    z-index: 99;
    width: 353px;
    height: 28px;

}

#but1 {
    position: fixed;
    z-index: 99;
    width: 80px;
    height: 80px;
    margin-top: 170px;
    margin-left: 140px;


}

#but2 {
    position: fixed;
    z-index: 99;
    width: 80px;
    height: 80px;
    margin-top: 270px;
    margin-left: 230px;


}




@media screen and (min-width: 601px) {
    #play {
        margin-left: 140px;
        margin-top: 25px;
        position: fixed;
        z-index: 96;
    }
    
    #play_two {
        margin-left: 140px;
        margin-top: 25px;
        position: fixed;
        z-index: 90;
    }
}