/*
    VT323 is bundled locally (OFL, see fonts/OFL.txt) because the original
    loaded it from Google Fonts, which this site's security policy blocks.
*/
@font-face {
    font-family: VT323;
    src: url(fonts/VT323-Regular.ttf) format("truetype");
    font-display: block;
}

/*
    VT323 is licened under "Open Font OFL", and it has a blocky affect which i liked
*/

canvas {
    border: 1px dotted white;
    background-color: #090909;
    background-repeat:no-repeat;
    
    
    /*
        This is the gradient that we are flying away from, its meant to represent the
        atmosphere of earth or something
    */
    background: #535353;
    background: -moz-linear-gradient(left, #535353 0%, #090909 41%, #000000 51%);
    background: -webkit-linear-gradient(left, #535353 0%,#090909 41%, #000000 51%);
    background: linear-gradient(to right, #535353 0%,#090909 41%, #000000 51%);
    
    display:block;
    
    
    /*
        So this below code is either a terrible idea, or a good idea
        It centers the element, and always has it center no matter the size of the window
        It will have problems though if the users monitor is just too small
    */
    position:absolute;
    top:50%;
    left:50%;
    
    
    -ms-transform: translateY(-50%) translateX(-50%);
    -webkit-transform: -webkit-translateY(-50%) -webkit-translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -o-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}

html {
    background-color:black;
    /*
        VT323 is licened under "Open Font OFL", and it has a blocky affect which i liked
    */
    font-family:VT323;
}

body {
    margin: 8px;
}

.noscriptblock {
    color:white;
    position:relative;
    z-index:100;
    width:100%;
    line-height:1.1em;
}

.noscriptblock a {
    color: rgb(200,200,220);
    text-decoration: none;
}

/*
    Embedded on michaelhaddon.me: the game keeps its original 1200x500
    resolution, and the canvas is scaled to fit whatever frame it is in.
*/
html, body {
    margin: 0;
    height: 100%;
    background: #000;
    overflow: hidden;
}

canvas {
    width: min(100vw, calc(100vh * 2.4));
    height: auto;
    box-sizing: border-box;
}