html, body {
    margin: 0;
    padding: 0;    
    background-color: #117A03;
    background-image: url(../../art/image/checkered-pattern.png);
    background-size: 25px 25px;
}

#content {
  width: 100vw;
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh,1vh) * 100);
  margin: 0;
}

canvas {
    display: block;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


iframe {
    position:absolute; 
    top:33vh;
    bottom:50vh;
    right:0vw;
    left:0vw;
    width: 37vh;
    height: 66vh;
    display: block;
    margin: auto;
    z-index: -1;
}

:-webkit-full-screen{
    background-color: #117A03
}

@font-face {
    font-family: 'SegoeUI';
    src:    url(../../art/font/interface/segoeui.woff) format("woff"), 
            url(../../art/font/interface/segoeui.woff2) format("woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ArialBlack';
    src: url(../../art/font/interface/arial-black.woff) format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FiraSans';
    src:    url(../../art/font/interface/firasanslightitalic.woff) format("woff"),
            url(../../art/font/interface/firasanslightitalic.woff2) format("woff2");
}

@font-face {
    font-family: 'Selawik';
    src: url(../../art/font/interface/selawk.woff) format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Pacifico';
    src: url(../../art/font/interface/pacifico-v16-latin-regular.woff) format("woff"),
        url(../../art/font/interface/pacifico-v16-latin-regular.woff2) format("woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url(../../art/font/interface/hinted-Inter-Bold.woff) format('woff'),
        url(../../art/font/interface/hinted-Inter-Bold.woff2) format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Rounded Medium';
    src:    url(../../art/font/interface/gotham-rounded-medium.woff2) format("woff2"), 
            url(../../art/font/interface/gotham-rounded-medium.woff) format("woff"); 
    font-weight: normal;
    font-style: normal;
}