/* Fonts & Reset */

@font-face {
    font-family: 'Boogaloo';
    src: url('./fonts/Boogaloo/Boogaloo-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Body & Layout */

body {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./img/5_background/complete_background.png') center / cover no-repeat;
    font-family: 'Boogaloo', cursive, sans-serif;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
}

#wrapper {
    position: relative;
    width: min(100vw, calc(100vh * 720 / 480));
    height: min(100vh, calc(100vw * 480 / 720));
    flex-shrink: 0;
}

/* Canvas Container */

#canvas-container {
    position: relative;
    width: 100%;
    height: 100%;
    border: 3px solid #8b5a1a;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
}

#canvas {
    display: block;
    width: 100%;
    height: 100%;
}

::-webkit-scrollbar {
    display: none;
}

/* Fullscreen Setup */

#canvas-container:fullscreen,
#canvas-container:-webkit-full-screen {
    width: min(100vw, calc(100vh * 720 / 480));
    height: min(100vh, calc(100vw * 480 / 720));
    margin: auto;
    border: none;
    border-radius: 0;
}

#canvas-container.fake-fullscreen {
    z-index: 9999;
}