/* Import the Courier font from Typekit to ensure every browser is seeing the same font */
@import url("https://use.typekit.net/ofh6owd.css");
body {
    font-family: "courier-std", monospace;
    font-size: 1.5vw;
}
/* Target only iOS devices using Safari, which handle the vw unit badly */
@supports (-webkit-overflow-scrolling: touch) {
    /* Target iPhone 5 */
    @media all and (min-device-width: 320px) and (min-device-height: 568px) {
        body {
            font-size: 8.4px;
        }
    }
    /* Target iPhone 6 - 8 */
    @media all and (min-device-width: 375px) and (min-device-height: 667px) {
        body {
            font-size: 10.005px;
        }
    }
    /* Target iPhone 6+ - 8+ */
    @media all and (min-device-width: 414px) and (min-device-height: 736px) {
        body {
            font-size: 11.04px;
        }
    }
    /* Target iPhone X */
    @media all and (min-device-width: 375px) and (min-device-height: 812px) {
        body {
            font-size: 10.4px;
        }
    }
}

#gameBox {
    width: 60ch;
    border: 1px solid #202020;
    margin: 2vw auto;
    padding: 0.5em;
    box-shadow: 0 6px 6px rgba(0,0,0,0.4);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    white-space: pre;
    line-height: 115%;
}
.buttonContainer {
    position: absolute;
    top: 5vw;
}
.buttonContainer * {
    cursor: pointer;
}

/* These selectors create triangle shapes by creating very large beveled borders and hiding all but one side */
#upButton {
    width: 0;
    height: 0;
    border-left: 4vw solid transparent;
    border-right: 4vw solid transparent;
    border-bottom: 4vw solid black;
    margin: auto;
}
#downButton {
    width: 0;
    height: 0;
    border-left: 4vw solid transparent;
    border-right: 4vw solid transparent;
    border-top: 4vw solid black;
    margin: auto;
}
#leftButton {
    width: 0;
    height: 0;
    border-top: 4vw solid transparent;
    border-bottom: 4vw solid transparent;
    border-right: 4vw solid black;
    display: inline-block;
}
#rightButton {
    width: 0;
    height: 0;
    border-top: 4vw solid transparent;
    border-bottom: 4vw solid transparent;
    border-left: 4vw solid black;
    display: inline-block;
}
#directionSpacer {
    width: 9vw;
    height: 8.5vw;
    display: inline-block;
}
.otherButton {
    font-size: 3vw;
    border: 1px solid #202020;
    margin: 10px;
    padding: 0.5em;
    box-shadow: 0 6px 6px rgba(0,0,0,0.4);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

/* This selector tells mobile users to switch to landscape orientation. It is hidden unless the media query below applies. */
#landscapeWarning {
    margin: auto;
    width: 66%;
    position: absolute;
    background: white;
    z-index: 1000;
    left: 0;
    right: 0;
    visibility: hidden;
}
@media screen and (orientation: portrait) {
    #landscapeWarning {
        visibility: visible;
    }
}