@font-face {
    font-family: Titan;
    src: url('./assets/Titan.ttf');
}


@viewport {
    width: device-width;
    height: device-height;
}

/* For older versions of Safari */
@media (max-device-width: 480px) {
    .game-container {
        height: -webkit-fill-available;
    }
}

.game-container {
    width: 100vw;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    margin: auto;
    position: relative;
    overflow: hidden;
    background-image: url('./assets/sky.png');
    background-size: cover;
    animation: bg-move 30s linear infinite;
}



@keyframes bg-move {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 100%;
    }
}


.player {
    width: 250px;
    height: 310px;
    position: absolute;
    bottom: 0;
    left: 2%;
    background-image: url('./assets/dino.gif');
    background-size: cover;
    background-position: bottom;
}

.player.jump {
    animation: jump 1.5s infinite;
    background-image: url('./assets/dino.png');
}

@keyframes jump {
    0% {
        bottom: 0;
    }

    25% {
        bottom: 400px;
    }
    40% {
        bottom: 400px;
    }

    100% {
        bottom: 0;
    }
}

.obstacle {
    width: 130px; 
    height: 130px; 
    position: absolute;
    bottom: 0;
    left: 80%;
    animation: move 3s linear infinite;
    background-image: url('./assets/obstacle1.png');
    background-size: cover;
}

.obstacle-xs {
    width: 130px;
    height: 130px;
    background-image: url('./assets/obstacle2.png');
}

.obstacle-s {
    width: 130px;
    height: 130px;
    background-image: url('./assets/obstacle3.png');
}

.obstacle-m {
    width: 130px;
    height: 130px;
    background-image: url('./assets/obstacle4.png');
}
.obstacle-l {
    width: 130px;
    height: 130px;
    background-image: url('./assets/obstacle5.png');
}


@keyframes move {
    0% {
        left: 100%;
    }
    100% {
        left: -100px;
    }
}

.score-card {
    color: white;
    font-family: Titan;
    font-size: 20px;
    position: absolute;
    right: 0;
   
}

.links-left{
    color: white;
    font-family: Titan;
    font-size: 20px;
    z-index: 10; /* Ensure links are above other content */
    position: relative; /* May help in certain layouts */
  
}

.score-card span {
    margin-right: 20px;
}

.bouttonbuy{
    font-family: Titan;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);

}

.bouttonbuy:hover {
    color: lemonchiffon; 
  }


.links-left:hover{
color: lemonchiffon; 
}


.imglimekat{
    margin-bottom: 20%;
    z-index: 100000;

}



  .swal-container-custom {
    z-index: 100002;
  }

.indexed{
    z-index: 100001;
}
.imgkat{
    max-width:600px;
    margin-bottom: 0px;
}



@media (max-width: 480px) {
    .imgkat{
        max-width:300px;
    }
    .imglimekat{
        margin-bottom: 40%;
    
    }

    .player {
        width: 167.5px;
        height: 207.7px;
    }

    .obstacle {
        width: 100px; 
        height: 100px; 

    }
    
    .obstacle-xs {
        width: 100px;
        height: 100px;
     
    }
    
    .obstacle-s {
        width: 100px;
        height: 100px;
        
    }
    
    .obstacle-m {
        width: 100px;
        height: 100px;
    
    }
    .obstacle-l {
        width: 100px;
        height: 100px;
    
    }
    
}


.restart-game {
    visibility: hidden;
    position: fixed;
    bottom: 0; /* Align to the bottom of the screen */
    right: 0; /* Align to the right of the screen */
    font-family: Titan;
    display: none;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    font-size: 25px;
    color: white;
    z-index: 1000;
    pointer-events: none;
    width: 100%; /* Take full width to center the text */
    height: 100%; /* Take full height to enable vertical centering */
}

.restart-game.show {
    visibility: visible;
    display: flex;
    pointer-events: all;
}

.restart-game .content {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: all;
    
}

.restart-img {
    position: fixed;
    bottom: 0px; /* Adjust as needed */
    right: 0px; /* Adjust as needed */
}

.restart-img img {
    display: block;
    width: 500px; /* Adjust as needed */
    height: auto;
    cursor: pointer;
}


.restart-game .text {
    align-self: end;
}

.stop.game-container, .stop .obstacle {
    animation-play-state: paused;
}

.stop .player {
    background-image: url('./assets/dino1.png');
    transform: rotate(50deg) translateY(50px);
    transition: transform 0.05s;
}