@import url('https://fonts.googleapis.com/css?family=Anonymous+Pro');
@import url('https://fonts.cdnfonts.com/css/arcade-classic');
@import url('https://fonts.cdnfonts.com/css/lvdc-game-over');


/* START SCREEN */
.start-screen {
    position:fixed;
    margin:0;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    width: auto;
    height: calc(100vh - 8em);
    padding: 4em;
    color: rgba(251, 253, 255, 0.75);
    font-family: 'Anonymous Pro', monospace;  
    background-color: #1a46a6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.knock-yourself-out-button {
    position: absolute;
    top: 90%;
    left: 5%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #ad3636;
    color: rgb(3, 3, 3);
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    visibility: visible;
    z-index: inherit;
}

.start-button {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #555;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

.menu-title {
    position: absolute;
    top: 10%;
    margin-top: 13vmin;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: white;
    font-size: 110px;
    text-align: center;
}

.start-img {
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 100%;
    /* Set up proportionate scaling */
    width: 100%;
    height: 100%;
    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
}


@media screen and (max-width: 1024px) { /* Specific to this particular image */
    img.bg {
        left: 50%;
        margin-left: -512px;   /* 50% */
    }
}

/* AFTER START SCREEN MESSAGE
https://css-tricks.com/snippets/css/typewriter-effect/     How I got the typewriter CSS
*/

html{
    min-height: 100%;
    overflow: hidden;
}

.continue-button , .continue-button2 , .continue-button3 , .continue-button5 {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #555;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    z-index: inherit;
}

.continue-button4 {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #555;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    z-index: inherit;
}


.reset-button , .reset-button2 {
    position: absolute;
    top: 19%;
    left: 93%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #8336ad;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    z-index: inherit;
}


.skip-button , .skip-button2 , .skip-button3 , .skip-button4 , .skip-button5 {
    position: absolute;
    top: 95%;
    left: 95%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #ad3636;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    visibility: visible;
    z-index: inherit;
}


.first-message , .second-message {
    width: auto;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 4em;
    color: rgba(249, 249, 249, 0.75);
    font-family: 'Anonymous Pro', monospace;  
    background-color: #191919;
    display: flex;
    align-items: center;
    justify-content: center;
}

.third-message , .forth-message , .fifth-message {
    width: auto;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 4em;
    color: rgba(249, 249, 249, 0.75);
    font-family: 'Anonymous Pro', monospace;  
    background-color: #191919;
    display: flex;
    align-items: center;
    justify-content: center;
}



.line-1 , .line-3 , .line-5 , .line-9 , .line-11 {
    position: fixed;
    top: 50%;  
    width: 24em;
    margin: 0 auto;
    border-right: 2px solid rgba(0, 0, 0, 0);
    font-size: 180%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);    
}

.line-2 , .line-4 , .line-6  , .line-10 , .line-12 {
    position: fixed;
    top: 55%;  
    width: 24em;
    margin: 0 auto;
    border-right: 2px solid rgba(0, 0, 0, 0);
    font-size: 180%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%); 
}

.line-7 {
    position: fixed;
    top: 25%;  
    width: 24em;
    margin: 0 auto;
    border-right: 2px solid rgba(0, 0, 0, 0);
    font-size: 180%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);    
}

.line-8 {
    position: fixed;
    top: 30%;  
    width: 24em;
    margin: 0 auto;
    border-right: 2px solid rgba(0, 0, 0, 0);
    font-size: 180%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%); 
}

  /* Animation */
.anim-typewriter , .anim-typewriter3 , .anim-typewriter5 , .anim-typewriter7 , .anim-typewriter9 {
    animation: typewriter 4s steps(44) 1s 1 normal both,
    blinkTextCursor 0ms steps(44) infinite normal;
    animation-play-state: paused;
}

.anim-typewriter2, .anim-typewriter4, .anim-typewriter6 , .anim-typewriter8 , .anim-typewriter10 {
    animation: typewriter 4s steps(44) 4.5s 1 normal both,
    blinkTextCursor 0ms steps(44) infinite normal;
    animation-play-state: paused;
}

.play-animation .anim-typewriter,
.play-animation .anim-typewriter2,
.play-animation2 .anim-typewriter3,
.play-animation2 .anim-typewriter4,
.play-animation3 .anim-typewriter5,
.play-animation3 .anim-typewriter6,
.play-animation4 .anim-typewriter7,
.play-animation4 .anim-typewriter8,
.play-animation5 .anim-typewriter9,
.play-animation5 .anim-typewriter10 {
    animation-play-state: running;
}

@keyframes typewriter {
    from{width: 0;}
    to{width: 24em;}
}

@keyframes blinkTextCursor {
    from{border-right-color: #191919;}
    to{border-right-color: transparent;}
}


/* BATTLE SCREEN */

.battle-screen , .battle-screen2 , .battle-screen3 , .battle-screen4 , .battle-screen5{
    position:fixed;
    margin:0;
    top:0;
    left:0;
    width: 100%;
    height: calc(100vh - 8em);
    padding: 0;
    color: rgba(248,31,27,0.85);
    font-family: 'Anonymous Pro', monospace;  
    background-color: #1a46a6;
}

.first-battle-img , .second-battle-img , .third-battle-img , .fourth-battle-img , .fifth-battle-img {
    background-size: cover;
    width: 100%;
    height: 121.5%;
}

.knight {
    position: fixed;
    margin:0;
    top: 40vmin;;
    left: 65vmin;
    width: 10%;
    padding: 0;
    animation-name: fadeOut;
    -webkit-animation-duration: 3s;animation-duration: 3s;
    -webkit-animation-fill-mode: both;animation-fill-mode: both;
    animation-play-state: paused;
}

.knight-attack {
    position: fixed;
    margin:0;
    top: 32vmin;;
    left: 51vmin;
    width: 10%;
    padding: 0;
    width: 25%;
}

.golem {
    position: fixed;
    margin:0;
    top: 0vmin;
    left: 100vmin;
    width: 50%;
    padding: 0;
    animation-name: fadeOut;
    -webkit-animation-duration: 3s;animation-duration: 3s;
    -webkit-animation-fill-mode: both;animation-fill-mode: both;
    animation-play-state: paused;
}

.fight-button {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #555;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    z-index: inherit;
}

.combat-log , .combat-log2 , .combat-log3 , .combat-log4 , .combat-log5 {
    display: flex;
    flex-direction: column;
    position: fixed;
    height:20%;
    width:100%;
    border:1px solid #4e4e4e;
    font:16px;
    line-height: 24px;
    text-shadow: 2px 2px #191919;
    font-family: 'Press Start 2P', cursive;
    overflow:auto;
    left: 00%;
    top: 80%;
    white-space: pre-line;
    background-color: rgba(25,25,25,0.5);
}

::-webkit-scrollbar {
    width: 14px;
    background: #868686;
}

::-webkit-scrollbar-thumb {
    background: rgba(205, 73, 36, .85);
    -webkit-border-radius: 0.5ex;
    -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.75);
}

.you-win-message {
    position: absolute;
    font-family: 'ArcadeClassic', sans-serif;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: white;
    text-shadow: -6px -6px #f81f1b;
    font-weight: bold;
    word-spacing: 30px;
    font-size: 75px;
}

.mute-button , .mute-button2 {
    position: absolute;
    top: 7%;
    left: 93%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #555;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    z-index: inherit;
}

/* SHOWS UP AFTER ENEMY IS DEFEATED */
.forward1-button , .forward2-button , .forward3-button , .forward4-button{
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #555;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    z-index: inherit;
}

#win-overlay {
    position: absolute;
    visibility: visible;
    display: block;
    width: 100%;
    height: 100%; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #c3c547; /* Black background with opacity */
    z-index: -100; 
    cursor: default;
}

.win-over-message {
    position: absolute;
    font-family: 'ArcadeClassic', sans-serif;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: white;
    font-size: 35vmin;
    font-weight: bold;
    line-height: 25vmin;
    -webkit-text-stroke: 4px #191919;
    text-shadow: -8px -10px #191919;
    animation-duration: 3.7s;
    animation-name: slidein2;
    animation-play-state: paused;
}

.treasure-room {
    min-height: 100%;
    min-width: 100%;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
/* GAME OVER SCREEN */

#overlay {
    position: absolute;
    visibility: visible;
    display: block;
    width: 100%;
    height: 100%; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #393939; /* Black background with opacity */
    z-index: -100; 
    cursor: default;
}

.game-over-message {
    position: absolute;
    font-family: 'LVDC Game Over 2', sans-serif;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: white;
    font-size: 100px;
    font-weight: bold;
    line-height: 17vmin;
    -webkit-text-stroke: 4px #191919;
    text-shadow: -8px -10px #191919;
    animation-duration: 3.7s;
    animation-name: slidein;
    animation-play-state: paused;
}

.play-game-over-animation {
    animation-play-state: running;
}

@keyframes slidein {
    from {
        top: -70%;
        left: 50%;
    }

    to {
        top: 20%;
        left: 50%;
    }
}

@keyframes slidein2 {
    from {
        top: -70%;
        left: 50%;
    }

    to {
        top: 0%;
        left: 50%;
    }
}


.game-over-mute-button {
    position: absolute;
    top: 9%;
    left: 92%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #555;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    z-index: inherit;
}

.game-over-mute-button2 {
    position: absolute;
    top: 9%;
    left: 92%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #555;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    z-index: inherit;
}

.game-over-reset-button {
    position: fixed;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #8336ad;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    z-index: inherit;
}

.game-over-reset-button2 {
    position: fixed;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #8336ad;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    z-index: inherit;
}

.star1 {
    position: fixed;
    margin:0;
    top: 30vmin;
    left: 115vmin;
    width: 8%;
    padding: 0;
}

/* SECOND MESSAGE SCREEN */


 /* BATTLE 2 SCREEN */


   /* YOU MAY NEED TO INSERT KEYFRAMES BELOW TO MAKE ANIMATION WORK */
.knight2 {
    position: fixed;
    margin:0;
    top: 50vmin;;
    left: 62vmin;
    width: 10%;
    padding: 0;
    animation-name: fadeOut;
    -webkit-animation-duration: 3s;animation-duration: 3s;
    -webkit-animation-fill-mode: both;animation-fill-mode: both;
    animation-play-state: paused;
}

.knight2-attack {
    position: fixed;
    margin:0;
    top: 43vmin;;
    left: 48vmin;
    width: 10%;
    padding: 0;
    width: 25%;
}

.bringer-of-death {
    position: fixed;
    margin:0;
    top: 33vmin;
    left: 125vmin;
    width: 20%;
    padding: 0;
    animation-name: fadeOut;
    -webkit-animation-duration: 3s;animation-duration: 3s;
    -webkit-animation-fill-mode: both;animation-fill-mode: both;
    animation-play-state: paused;
}

.star2 {
    position: fixed;
    margin:0;
    top: 25vmin;
    left: 119vmin;
    width: 8%;
    padding: 0;
}

.star3 {
    position: fixed;
    margin:0;
    top: 40vmin;
    left: 115vmin;
    width: 8%;
    padding: 0;
}

 /* THIRD MESSAGE SCREEN */


/* THIRD BATTLE SCREEN */
.knight3 {
    position: fixed;
    margin:0;
    top: 45vmin;;
    left: 62vmin;
    width: 10%;
    padding: 0;
    animation-name: fadeOut;
    -webkit-animation-duration: 3s;animation-duration: 3s;
    -webkit-animation-fill-mode: both;animation-fill-mode: both;
    animation-play-state: paused;
}

.knight3-attack {
    position: fixed;
    margin:0;
    top: 38vmin;;
    left: 48vmin;
    width: 10%;
    padding: 0;
    width: 25%;
}

.fire-worm{
    position: fixed;
    margin:0;
    top: 23vmin;
    left: 100vmin;
    width: 40%;
    padding: 0;
    animation-name: fadeOut;
    -webkit-animation-duration: 3s;animation-duration: 3s;
    -webkit-animation-fill-mode: both;animation-fill-mode: both;
    animation-play-state: paused;
}

.star4 {
    position: fixed;
    margin:0;
    top: 23vmin;
    left: 119vmin;
    width: 8%;
    padding: 0;
}

.star5 {
    position: fixed;
    margin:0;
    top: 30vmin;
    left: 105vmin;
    width: 8%;
    padding: 0;
}

.star6 {
    position: fixed;
    margin:0;
    top: 38vmin;
    left: 119vmin;
    width: 8%;
    padding: 0;
}

  /* REST SCENE */

.campfire-scene {
    position:fixed;
    margin:0;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    width: auto;
    height: calc(100vh - 8em);
    padding: 4em;
    color: rgba(251, 253, 255, 0.75);
    font-family: 'Anonymous Pro', monospace;  
    background-color: #1a46a6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rest-scene-gif {
    min-height: 100%;
    min-width: 100%;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -3;
}

  /* 4TH BATTLESCENE */

.knight4 {
    position: fixed;
    margin:0;
    top: 44vmin;;
    left: 62vmin;
    width: 10%;
    padding: 0;
    animation-name: fadeOut;
    -webkit-animation-duration: 3s;animation-duration: 3s;
    -webkit-animation-fill-mode: both;animation-fill-mode: both;
    animation-play-state: paused;
}

.knight4-attack {
    position: fixed;
    margin:0;
    top: 36vmin;;
    left: 48vmin;
    width: 10%;
    padding: 0;
    width: 25%;
}

.ooze-gif {
    position: fixed;
    margin:0;
    top: 23vmin;
    left: 85vmin;
    width: 40%;
    padding: 0;
    animation-name: fadeOut;
    -webkit-animation-duration: 3s;animation-duration: 3s;
    -webkit-animation-fill-mode: both;animation-fill-mode: both;
    animation-play-state: paused;
}

.star7 {
    position: fixed;
    margin:0;
    top: 26vmin;
    left: 119vmin;
    width: 8%;
    padding: 0;
}
.star8 {
    position: fixed;
    margin:0;
    top: 30vmin;
    left: 105vmin;
    width: 8%;
    padding: 0;
}

.star9 {
    position: fixed;
    margin:0;
    top: 39vmin;
    left: 119vmin;
    width: 8%;
    padding: 0;
}
.star10 {
    position: fixed;
    margin:0;
    top: 42vmin;
    left: 107vmin;
    width: 8%;
    padding: 0;
}

  /* FIFTH MESSAGE SCREEN */


  /* FIFTH BATTLE SCREEN */

.knight5 {
    position: fixed;
    margin:0;
    top: 55vmin;;
    left: 62vmin;
    width: 10%;
    padding: 0;
    animation-name: fadeOut;
    -webkit-animation-duration: 3s;animation-duration: 3s;
    -webkit-animation-fill-mode: both;animation-fill-mode: both;
    animation-play-state: paused;
}

.knight5-attack {
    position: fixed;
    margin:0;
    top: 46.5vmin;;
    left: 48vmin;
    width: 10%;
    padding: 0;
    width: 25%;
}

.boss-gif {
    position: fixed;
    margin:0;
    top: 23vmin;
    left: 100vmin;
    width: 40%;
    padding: 0;
    animation-name: fadeOut;
    -webkit-animation-duration: 3s;animation-duration: 3s;
    -webkit-animation-fill-mode: both;animation-fill-mode: both;
    animation-play-state: paused;
}

.star11 {
    position: fixed;
    margin:0;
    top: 35vmin;
    left: 140vmin;
    width: 8%;
    padding: 0;
}

.star12 {
    position: fixed;
    margin:0;
    top: 29vmin;
    left: 130vmin;
    width: 8%;
    padding: 0;
}

.star13 {
    position: fixed;
    margin:0;
    top: 45vmin;
    left: 120vmin;
    width: 8%;
    padding: 0;
}

.star14 {
    position: fixed;
    margin:0;
    top: 37vmin;
    left: 120vmin;
    width: 8%;
    padding: 0;
}

.star15 {
    position: fixed;
    margin:0;
    top: 45vmin;
    left: 107vmin;
    width: 8%;
    padding: 0;
}


   /* TO MAKE SURE EVERYTHING ABOVE WORKS  */

    .fadeOut {
        -webkit-animation-name: fadeOut;
        animation-name: fadeOut;
        animation-play-state: running;
    }
    
    @-webkit-keyframes fadeOut {
        0% {opacity: 1;}
        100% {opacity: 0;}
    }
    
    @keyframes fadeOut {
        0% {opacity: 1;}
        100% {opacity: 0;}
    }