/* 
    Credits to OpenGameArt.org for providing the following images.
    Enemies - https://opengameart.org/content/space-invaders-cartoon-icon
    Player - https://opengameart.org/content/ship-recoloring-001-for-gm-game
    Space Background - https://opengameart.org/content/space-background
    Shooting Sound - Creator: Jesus Lastra (Couldnt find the URL)

    Keyboard and Spacebar graphics were created by me
*/

/* -------- ANIMATIONS PORTION -------- */
@keyframes updown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* -------- START SCREEN -------- */  
.game-sandbox {
    background-image: url(../assets/space-invaders/space.jpg);
    text-align: center;
    position: relative;
}

#gameTitle {
    color: rgb(4, 211, 56);
    font-size: 50px;
    text-shadow: 0 0 20px rgb(0, 220, 44);
    animation: updown 2s ease-in-out infinite alternate;
}

#gameInstructions {
    margin-top: 40px;
    font-size: 25px;
    color: rgb(248, 202, 63);
    text-align: center;
    animation: updown 3s ease-in-out infinite alternate;
}

#shipMovement {
    padding: 20px;
}

#enemy-icon {
    border: none;
    width: 180px;
    height: auto;
    margin: 0;
    padding: 0;
    animation: updown 3s ease-in-out infinite alternate;
}

#keyboard-arrows-img, #spacebar-img {
    border: none;
    width: 100px;
    height: auto;
}

#startGame {
    font-size: 20px;
    font-family: inherit;
    color: white;
    border: none;
    border-radius: 100px;
    margin-top: 20px;
    padding: 10px 40px;
    background-color: rgb(0, 126, 25);
    animation: updown 8s ease-in-out infinite alternate;
}

#restartGame, #playAgain {
    font-size: 20px;
    font-family: inherit;
    color: white;
    border: none;
    border-radius: 100px;
    padding: 10px 40px;
    background-color: rgb(0, 126, 25);
}

#startGame:hover, 
#restartGame:hover, 
#playAgain:hover {
    background-color: rgb(0, 65, 13);
}

#start-screen.disappear > * {
    display: none;
}

/* -------- GAMEPLAY SCREEN -------- */
#scoreCount{
    font-size: 45px;
    font-family: "Jersey 15", sans-serif;
    margin: auto 10px;
    color: white;
    float: left;
}

#timeCount {
    font-size: 45px;
    font-family: "Jersey 15", sans-serif;
    margin: auto 10px;
    color: white;
    float: right;
}

.enemy {
    border: none;
    width: 50px;
    height: auto;
    padding: 2px;
}

#player {
    border: none;
    width: 60px;
    height: auto;
    transform: rotate(180deg);
    position: absolute;
    left: 300;
    bottom: 0;
}

.bullet{
    width: 5px;
    height: 15px;
    background-color: yellow;
    position: absolute;
}

.enemy-bullet {
    width: 5px;
    height: 20px;
    background-color: red;
    position: absolute;
}

#enemyContainer {
    position: absolute;
    align-items: center;
    padding-top: 40px;
}

#game-over {
    padding-top: 80px;
    font-family: "Jersey 15", sans-serif;
    color: red;
    font-size: 90px;
}

#win-title {
    padding-top: 80px;
    font-family: "Jersey 15", sans-serif;
    color: green;
    font-size: 90px;
}

#control-container {
    display: none;
}

/* -------- RESPONSIVE PORTION -------- */
@media only screen and (max-width: 768px) {
    #control-container{
        display:flex;
        position: absolute;
        bottom: 10px;
        left: 130px;
        gap: 5px;
    }
    #right-arrow,
    #left-arrow,
    #space-bar {
        background-color: rgba(128, 128, 128, 0.7);
        color: white;
        border: none;
        border-radius: 5px;
        padding: 10px;
        font-size: 16px;
        cursor: pointer;
        text-align: center;
    }
    #gameTitle {
        margin-top: 40px;
        font-size: 40px;
    }
    #gameInstructions {
        margin-top: 40px;
        font-size: 20px;
    }
    #shipMovement {
        padding: 20px;
    }
    #enemy-icon {
        width: 200px;
    }
    #keyboard-arrows-img, #spacebar-img {
        border: none;
        width: 100px;
        height: auto;
    }
    #startGame {
        font-size: 20px;
        font-family: inherit;
        color: white;
        border: none;
        border-radius: 100px;
        margin-top: 40px;
        padding: 10px 40px;
    }
    #start-screen.disappear > * {
        display: none;
    }
    #scoreCount{
        font-size: 30px;
        font-family: "Jersey 15", sans-serif;
        margin: auto 10px;
        color: white;
        float: left;
    }
    #timeCount {
        font-size: 30px;
        font-family: "Jersey 15", sans-serif;
        margin: auto 10px;
        color: white;
        float: right;
    }
    .enemy {
        border: none;
        width: 35px;
        height: auto;
        padding: 2px;
    }
    
    #player {
        border: none;
        width: 50px;
        height: auto;
        transform: rotate(180deg);
        position: absolute;
        left: 280;
        bottom: 60px;
    }
    
    .bullet{
        width: 3px;
        height: 8px;
        background-color: yellow;
        position: absolute;
    }
    
    .enemy-bullet {
        width: 5px;
        height: 8px;
        background-color: red;
        position: absolute;
    }
    
    #enemyContainer {
        position: absolute;
        padding-top: 40px;
    }
}