:root {
    --base-font-size: 64px;
    --standart-font-color: white;
    --button-font-size: calc(var(--base-font-size) / 3.2);
    --button-padding: 12px;
    --button-bg-color: #2c9be3;
    --canvas-height: 480px;
    --canvas-width: 720px;
    --controls-font-size: var(--base-font-size);
    --credits-font-size: calc(var(--base-font-size) / 2);
    --credits-padding: calc(var(--credits-font-size))
}


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


body {
    margin: 0;

    height: 100vh;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;

    font-family: 'zabars', Arial, Helvetica, sans-serif;
}


canvas {
    width: 100vw;
    max-width: 720px;
    height: auto;
    /* erhält Seitenverhältnis automatisch */
    display: block;
    margin: 0 auto;
    /* optional: zentriert das Canvas */
}


canvas,
#control-container,
#credits-container {
    background-color: black;
}


.w-100 {
    width: 100%;
}


.h-100 {
    height: 100%;
}


.bg-image {
    height: 100%;
    width: 100%;

    background-image: url('./assets/img/5_background/complete_background.png');

    filter: blur(8px);
    -webkit-filter: blur(8px);

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover
}


.bg-image-impressum {
    height: 100%;
    width: 100%;

    background-image: url('./assets/img/5_background/complete_background.png');

    filter: blur(8px);
    -webkit-filter: blur(8px);

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover
}


.pos-absolute {
    position: absolute;
}


.canvas-button {
    border: none;
    border-radius: 9999px;
    padding: var(--button-padding);
    background-color: var(--button-bg-color);

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--base-font-size) / 8);

    font-family: 'zabars', Arial, sans-serif;
    color: var(--standart-font-color);
    font-size: var(--button-font-size);

    cursor: pointer;
    box-shadow: 0 0.4vh 1vh rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
}


.canvas-button:hover {
    background-color: #87ceeb;
}


.canvas-button img {
    margin: 0;
    padding: 0;
    height: var(--button-font-size);
}


.canvas-button p {
    margin: 0;
    padding: 0;
}


#control-container,
#credits-container {
    width: var(--canvas-width);
    height: var(--canvas-height);
}


#control-container {
    justify-content: center;
    align-items: start;

    font-size: var(--controls-font-size);
    color: var(--standart-font-color);
}


#control-container p {
    margin: 0;
    margin-top: 5%;
}


#control-container span {
    font-size: calc(var(--controls-font-size) * 1.3);
    text-decoration: underline;
}


#credits-container {
    padding: var(--credits-padding);
    padding-bottom: calc(var(--credits-padding));

    box-sizing: border-box;
    width: var(--canvas-width);
    height: var(--canvas-height);

    flex-direction: column;

    font-size: var(--credits-font-size);
    color: var(--standart-font-color);

    overflow-y: scroll;
    --sb-track-color: #232E33;
    --sb-thumb-color: #2c9be3;
    --sb-size: 8px;
}


#credits-container a {
    padding-bottom: calc(var(--credits-padding) / 2);
    color: var(--standart-font-color);
}


#credits-container h2 {
    margin-top: var(--base-font-size);
    margin-bottom: calc(0.25 * var(--base-font-size));
}


#credits-container h2:first-child {
    margin-top: 0;
}


#credits-container p {
    margin: 0;
}


#credits-container ul {
    margin: 0;
}


#credits-container ul:last-child {
    margin-bottom: calc(2 * var(--button-padding) + var(--button-font-size) + 5%);
}


#credits-container::-webkit-scrollbar {
    width: var(--sb-size);
}


#credits-container::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 4px;
}


#credits-container::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 4px;
}


#return-btn-container {
    width: 100%;
    padding-top: 5%;
    display: flex;
    justify-content: center;
}


@supports not selector(::-webkit-scrollbar) {
    #credits-container {
        scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    }
}


.d-flex {
    display: flex;
}


.d-none {
    display: none !important;
}


.d-inline-block {
    display: inline-block;
}


#front {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


#upper-right-button-container {
    position: fixed;
    top: 5%;
    right: 5%;
    width: 100%;
    justify-content: end;
    align-items: center;
    gap: calc(var(--base-font-size) / 4)
}


.maxSize {
    height: 100%;
    width: 100%;
}


#mobile-touch-buttons-container {
    display: none;
    width: 90%;
    position: fixed;
    left: 5%;
    bottom: 5%;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--base-font-size) / 4 * 3)
}


#throw-bottle-btn {
    padding: calc(2 * var(--button-padding));
}

#throw-bottle-btn img {
    width: calc(2 * var(--button-font-size));
    height: calc(2 * var(--button-font-size));
}


#direction-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
}


#direction-buttons button {
    width: max-content;
    display: flex;
}


#horizontal-buttons {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}


.blind-button {
    opacity: 0;
}


#portrait-notice {
    display: none;
    width: 100vw;

    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);

    text-align: center;
    font-size: 64px;
}


#start-screen {
    width: var(--canvas-width);
    height: var(--canvas-height);
}


#bottom-button-container {
    position: fixed;
    bottom: 5%;
    justify-content: center;
    align-items: center;
    gap: calc(var(--base-font-size) / 4 * 3)
}


@media screen and (hover: none) and (pointer: coarse) {
    body {
        background-color: black;
        color: white;
    }

    .bg-image {
        display: none;
    }

    #mobile-touch-buttons-container {
        display: flex;
    }

    .overflow-scroll-mobile {
        overflow: scroll;
    }
}


@media screen and (hover: none) and (pointer: coarse) and (orientation: portrait) {
    #front {
        display: none;
    }


    #portrait-notice {
        display: block;
    }
}


@media only screen and (max-width: 720px) {

    canvas,
    #front,
    #start-screen,
    #credits-container {
        width: 100%;
    }
}



@media only screen and (max-height: 480px) {

    canvas,
    #front,
    #credits-container {
        height: 100%;
    }
}