/********************************
 *   Ana Bonavides Aguilar      *
 *   Taco Tuesday               *
 *   Creative Code Lab Project  *
 *   cc211010 FH St. Poelten    *
 ********************************/
 
 /**
 * 
 * This css file contains all the style of my HTML, including screens, buttons, some characteristics of the Canvas tag...
 *
 */

 canvas{
    border-radius: 10px;
    background-image: url('../Assets/Images/Backgrounds/KitchenBackground.png');
    background-size: contain;
    width: 1280px;
    height: 720px;
    margin-top: 10px;
    z-index: 1;
}


h1.main-title{
    font-family: mexican-font;
}

h1{
    font-family: strawberry;
    font-size: 40px;
    font-weight: bold;
    color: #C34A21;
}

p.points{
    font-family: strawberry;
    font-size: 20px;
}

#highest-score{
margin-left: 44%;
}

.game-wrapper{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body{
    background: #fce38f;
    margin: 0;
    cursor: url("../Assets/Cursors/Fire-normal.png"), default;
}

@keyframes growIn {
    from {
      transform: scale(0);
    }
    to {
      transform: scale(1);
    }
}


.screen-0{
    width: 1280px;
    margin: 0;
    background: #fce38f;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-name: growIn;
}


.screen-0-img{
    max-width: 100%;
    max-height: 100%;
}

.screen{
    margin: 0;
    min-width: 1280px;
    min-height: 720px;
    background-image: url("../Assets/Images/Backgrounds/MainMenu.png");
    background-size: cover;
    display: none;
}

.horizontal{
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
}

.vertical{
    flex-flow: row wrap;
    align-items: flex-end;
    justify-content: space-around;
}

/*I need to display them as none since before the stuff appears, because that way it diesn't glitches. 
Doing it with the java script makes some screens render and dissapear afterwards. It is better to use the js
only for making them appear, not the other way around.*/
button.main-menu-button{
    border: 0;
    border-radius: 10px;
    width: 320px;
    height: 100px;
    background-size:cover;
    margin-left: 600px;
    margin-bottom: 20px;

}


.main-menu-button:hover{
    transform: translate(0,4px);
}


.start-game{
    background-image: url("../Assets/Images/Buttons/StartGame_Button.png");
    
}

.instructions{
    background-image: url("../Assets/Images/Buttons/Instructions_Button.png");
}

.settings{
    background-image: url("../Assets/Images/Buttons/Settings_Button.png");
}

.restart{
    background-image: url("../Assets/Images/Buttons/Restart_Button.png");
}

.main-menu{
    background-image: url("../Assets/Images/Buttons/MainMenu_Button.png");
}

#ingame{
    display: none;
    background-image: none;
}

#instructions{
    display: none;
    background-image: url("../Assets/Images/Backgrounds/Instructions.png");
}

#settings{
    display: none;
    background-image: url("../Assets/Images/Backgrounds/Settings.png");
}

button.bottom-button{
    margin-left: 0px;
}

#game-over{
    display: none;
    background-image: url("../Assets/Images/Backgrounds/GameOver.png");
}

#keys-choices{
    width: 60%;
    display: flex;
    position: absolute;
    top: 450px;
    justify-content: space-evenly;
}

#keys-choices input{
    display: none;
}

#keys-choices img{
    width: 350px;
    /* filter: drop-shadow(0px 0px 6px #C34A21); */
}

#keys-choices img:hover{
    transform: translate(0,4px);
}