/* Notes

Figure out hover effect for buttons - could do a second png/swap, but unsure about time for that

Redo the "no" pathway, but will need a lot more pngs prepped - adventurer 








*/




.body{ background-color: black}


.locked-image-strict {
 position: fixed;
  align-content: center;
    margin-left: 6%;

  /* Original export sizes 2560 x 1440, but too big/causes scrolling */
  width:1460px;
  height: 840px;
}
 
.buttonnoway {
   
    position: fixed;
    margin-left: 6%; 
    z-index: 2; /* This works like layers in Krita--the button is the second layer, on top of the img layer */
 
    top: 200px;   
    left: 100px;   

    background-image: url('/img/nowaybutton.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 300px;
    height: 170px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
 
}

.buttonnoway:hover {
 transform: translateY(-10px); /* Add this to all buttons */
/*  box-shadow: 0 4px 12px rgba(0, 0, 0, 15); Don't use this cus it keeps the margin corners */
 
 
 /*This is faster than editing and exporting all the button pngs again and no image lag */
  filter: sepia(1) hue-rotate(300deg) saturate(2); 
 
}






.awesomebutton {
   
    position: fixed;
    margin-left: 6%; 
    z-index: 2; 
 
    top: 200px;   
    left: 1100px;   

    background-image: url('/img/awesomebutton.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 300px;
    height: 170px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
}

.awesomebutton:hover {
 
 transform: translateY(-10px);
 filter: sepia(1) hue-rotate(300deg) saturate(2); 
}




/* Boring/lame buttons*/

.staylamebutton {
   
    position: fixed;
    margin-left: 6%; 
    z-index: 2; /* This works like layers in Krita--the button is the second layer, on top of the img layer */
 
    top: 200px;   
    left: 100px;   

    background-image: url('/img/staylamebutton.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 300px;
    height: 170px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
}

.staylamebutton:hover {
 
 transform: translateY(-10px);
 filter: sepia(1) hue-rotate(300deg) saturate(2); 
}





.tryagainbutton {
   
    position: fixed;
    margin-left: 6%; 
    z-index: 2; 
 
    top: 200px;   
    left: 1100px;   

    background-image: url('/img/tryagainbutton.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 300px;
    height: 170px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
}

.tryagainbutton:hover {
 
 transform: translateY(-10px);
 filter: sepia(1) hue-rotate(300deg) saturate(2); 
}






.startoverbutton{
    position: fixed;
    margin-left: 6%; 
    z-index: 2; 
 
    top: 10px;   
    left: 15px;   

    background-image: url('/img/startoverbutton.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 70px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
 
}

.startoverbutton:hover {
 
 transform: translateY(-10px);
 filter: sepia(1) hue-rotate(400deg) saturate(2); 
}







.creditsbutton{
    position: fixed;
    margin-left: 6%; 
    z-index: 2; 
 
    top: 10px;   
    left: 120px;   

    background-image: url('/img/Creditsbutton.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 70px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
 
}

.creditsbutton:hover{
 
 transform: translateY(-10px);
 filter: sepia(1) hue-rotate(400deg) saturate(2); 
}





.endbuttonagain { 
position: fixed;
    margin-left: 6%; 
    z-index: 2; 
 
    top: 10px;   
    left: 120px;   

    background-image: url('/img/BacktoEndbutton.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 70px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
 
}

.endbuttonagain:hover {
 
 transform: translateY(-10px);
 filter: sepia(1) hue-rotate(400deg) saturate(2); 
}






.videocredits{
 position: fixed;
 z-index: 10;
 
    top: 250px;   
    left: 33%;   
 
 width: 600px;
 height: 350px;
 
 
}

.videocredits:hover{
 
 transform: translateY(-10px);
 filter: sepia(1) hue-rotate(400deg) saturate(2); 
}






.startoverbutton2{
    position: fixed;
    margin-left: 6%; 
    z-index: 2; 
 
    top: 10px;   
    left: 15px;   

    background-image: url('/img/startoverbutton.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 70px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
 
}

.startoverbutton2:hover {
 
 transform: translateY(-10px);
 filter: sepia(1) hue-rotate(400deg) saturate(0); 
}







.creditsbutton2{
    position: fixed;
    margin-left: 6%; 
    z-index: 2; 
 
    top: 10px;   
    left: 120px;   

    background-image: url('/img/Creditsbutton.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 70px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
 
}

.creditsbutton2:hover{
 
transform: translateY(-10px);
 filter: sepia(1) hue-rotate(400deg) saturate(0); 
}


.endbuttonagain2 { 
position: fixed;
    margin-left: 6%; 
    z-index: 2; 
 
    top: 10px;   
    left: 120px;   

    background-image: url('/img/BacktoEndbutton.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 70px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
 
}

.endbuttonagain2:hover {
 
 transform: translateY(-10px);
 filter: sepia(1) hue-rotate(400deg) saturate(0); 
}

.secretbutton{
    position: fixed;
    margin-left: 6%; 
    z-index: 2; 
 
    top: 770px;   
    left: 700px;   

    background-image: url('/img/Secret%20button.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 70px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    opacity: .2;

}



.secretbutton:hover{
   transform: translateY(-10px);
 filter: sepia(1) hue-rotate(400deg) saturate(0); 

}