@font-face {
    font-family: 'Zabars';
    src: url('./fonts/zabars/Zabars.ttf');
}

body {
    font-family: 'Zabars';
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    align-items: center;
    margin: 0;
    gap: 20px;
    background-image: linear-gradient(rgba(0,0,0,0.5)), url('./img/5_background/second_half_background.png');
    background-position: center;
    background-size: cover;
}

h1 {
    font-size: 80px;
    letter-spacing: 5px;
    margin: 0;
    text-align: center;
    color: #ffc300;
    text-shadow: 5px -1px 0 #9a3a17;              
}

h3 {
    letter-spacing: 2px;
    text-shadow: 3px -1px 0 #9a3a17;
    text-align: center;
    margin: 0;
}

a {
    color: #ff9900;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: absolute;
    bottom: 15px;
    right: 15px;
    font-size: 28px;
}

a:hover {
    text-decoration: underline;
}

canvas {
    background-image: url('img/9_intro_outro_screens/start/startscreen_2.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;   
}

.canvas_fullsreen {  
    object-fit: contain;
    width: 100vw;
    max-height: 100vh;
}

.canvas_div {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
}

.lost_game {
    background-size: auto 47%, contain;
    background-position: center 65%, center;
    background-image: url('img/You won, you lost/You lost.png'), url('img/5_background/first_half_background.png');
}

.won_game {
    background-size: auto 70%, contain;
    background-position: center 70%, center;
    background-image: url('img/You won, you lost/You won A.png'), url('img/5_background/first_half_background.png');
}

.canvas_fullsreen_bg {
    background-image: url('./img/transparent_picture.png');
}

button{
   font-family: 'Zabars';
   border-radius: 8px;
   border: 3px solid #9a3a17;
   color: #9a3a17;
   padding: 8px;
   font-size: 34px;
   transition: all 0.2s ease;
   background: linear-gradient(to bottom, #ff9900, #ffdd00, #ff9900);
   display: flex;
   align-items: center;
}

.button_circle {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: none;
    position: relative;
}

.button_circel_jump {
    padding-bottom: 25px;
}

button img{
    margin: -7px;
}

button:hover {
    cursor: pointer;
    transform: scale(1.05);
}

button:active {
    transform: scale(0.95);
}

.button_circle:hover {
    transform: none;
}

.button_circle:active {
    transform: none;
}

.start_game_btn {
    position: absolute;
    left: 50%;
    top: 15%;
    transform: translateX(-50%);
}

.play_again_top {
    top: 18%;
}

.cancel_game_btn {
    position: absolute;
    right: 10px;
    top: -50px;
}

.music_btn {
    position: absolute;
    left: 60px;
    top: -50px;
}

.pause_btn {
    position: absolute;
    right: 60px;
    top: -50px;
}

.fullscreen_btn {
    position: absolute;
    right: 10px;
    bottom: -50px;
}

.fullscreen_btn_fullscreen_mode {
    bottom: 10px;
}

.info_game_btn {
    position: absolute;
    left: 10px;
    top: -50px;
}

.info_game_description {
    position: absolute;
    top: 50%;
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 80%;
    padding: 20px;
    border-radius: 8px;
    font-size: 24px;
    color: #ff9900;
    background: rgba(0,0,0, 0.85);
}

.info_game_description p {
    margin: 0;
}

.info_game_description_close {
    position: absolute;
    right: -12px;
    top: -10px;
}

.info_game_description_close img {
    width: 25px;
}

.info_game_controls {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.info_game_controls p{
    display: flex;
    align-items: center;
    gap: 8px;
}

.info_game_controls p img, .info_game_controls p span {
    background-color: #ff9900;
    border-radius: 8px;
    box-shadow: 2px 0px 0 2px #9a3a17;
}

.info_game_controls p span {
    width: 48px;
    height: 48px;
    color: #9a3a17;
    font-size: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info_game_controls_jump img {
    width: 150px;
    height: 48px;
}

.info_game_position_relativ {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.gameplay_btn {
    width: 32px;
}

.btn_fullscreen_mode {
    top: 10px;
}

.d_none {
    display: none;
}

.opacity {
    opacity: 0;
}

.flex_row {
    display: flex;
    gap: 12px;
}

.responsive_btns {
    display: none;
    justify-content: space-between;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
    position: absolute;
    bottom: 5px;  
}

.landscape_mode_hint {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    margin: 0 12px;
    padding: 12px;
}

.landscape_mode_hint p {
    font-size: 36px;
    color: #9a3a17;
    text-align: center;
    margin: 0;
}

.landscape_mode_hint img {
    width: 60px;
}

@media (hover: none) and (orientation: portrait){
    .canvas_div {
        display: none;
    }

    .landscape_mode_hint {
        display: flex;
    }
}

@media (hover: none) and (orientation: landscape){
    .responsive_btns {
        display: flex;
    }
    
    h1 {
        display: none;
    }

    .fullscreen_btn {
        display: none;
    }

    .music_btn {
       left: 10px;
        top: 50%;
    }

    .info_game_btn {  
        left: 10px;
        top: calc(50% - 50px);
    }

    .cancel_game_btn {
        top: calc(50% - 50px);
        right: 10px;
    }

    .pause_btn {
        top:  50%;
        right: 10px;
    }

    .canvas_div {
        width: 100%;
        height: 100vh; 
    }

    canvas {
        object-fit: contain;
        width: 100%;
    }

    .info_game_description{
        font-size: 20px;
    }

    a {
        display: none;
    }
}

@media (max-width: 720px) {
    canvas {
        width: 100%;
    }

    body {
        gap: 70px;
    }
}

@media (max-height: 480px) {
    canvas {
        height: 100vh;
    }
}