@font-face {
    font-family: 'Lato-Ligth';
    src: url(/fonts/Lato/Lato-Light.ttf);
}

@font-face {
    font-family: 'Lato-Ligth';
    src: url(/fonts/Lato/Lato-Light.ttf);
}

html{
    height: 100vh;
}
body {
    font-family: Lato-Light, sans-serif;
    background-color: rgb(250, 250, 250);
    height: 100vh;
    display: flex;
    align-items: center;
}

/* Generic Elements */
/* #top-container,#canvas,#game-over-btn,#game-over,#obstacle,#endGame{
    display:none;
} */
#canvas{
    margin: 0 auto;
}

#top-container {
    position: absolute;
    left: 0;
    top: 45px;
    right: 0;
    margin: 0 auto;
    width: fit-content;
}

h1 {
    font-size: 40px;
    font-family: Lato-Bold;
    letter-spacing: 10px;
}

#obstacle {
    position: absolute;
    top: 155px;
    right: 12px;
    width: 710px;
    height: 580px;
}
#endGame {
  position: absolute;
  right: 0px;
  width: 50%;
  height: 100%;
}

/* PRESENTATION*/
#presentation {
    position: absolute;
    background-color: rgb(250, 250, 250);
    width: 100vw;
    height: 100vh;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
}

#presentation img {
    width: 260px;
    height: 550px;
}

#start-game {
    width: 100px;
    height: 20px;
    cursor: pointer;
}
.clickable{
    pointer-events:auto;
}
.notClickable{
    pointer-events:none;
}

button {
    outline: none
}

/* GAME-OVER */
#game-over {
    position: absolute;
    left: 0;
    top: 30%;
    right: 0;
    margin: 0 auto;
    width: fit-content;
}
#game-over button {
   padding: 20px;
   margin: 50px auto;
   height: 150px;
   width: 150px;
   border-radius: 50%;
   color: gray;
   text-align: center;
   font-size: 20px;
   border: 1px solid gray;
}


/* Animations */
.fadeIn {
    opacity: 1;
    animation: fadein 1.5s ease-out;
}

.fadeOut {
    opacity: 1;
    animation: fadeout 2s ease-out;
}

@keyframes fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeout {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}