html {
    font-size: 4vmin;
}

#main {
    text-shadow: none !important;
    background: black;
    color: lightgrey;
}

strong {
    color: orange;
}

#codes {
    position: absolute;
    width: 100vmin;
    bottom: 0;
    right: 0;
}

#binary_grid {
    height: 18vmin;
    width: 90vmin;
    bottom: 98vmin;
    right: 5vmin;
    background: #f803;
    color: #f80;
}

@media (orientation: landscape) {
    #binary_grid {
        width: 20vmin;
        height: 90vmin;
        right: 98vmin;
        bottom: 5vmin;
    }
}

#braille_grid {
    height: 50vmin;
    width: 36vmin;
    bottom: 25vmin;
    right: 32vmin;
    background: #f003;
    color: #f00;
}

#semaphore_grid {
    height: 90vmin;
    width: 90vmin;
    bottom: 5vmin;
    right: 5vmin;
    background: #00f3;
    color: #66f;
}

#morse_box {
    bottom: 119vmin;
    right: 5vmin;
    display: table;
    width: 90vmin;
}

@media (orientation: landscape) {
    #morse_box {
        bottom: 30vmin;
        right: 95vmin;
        height: 10vmin;
        width: 90vmin;
        rotate: 270deg;
    }
}

#morse_slider {
    height: 17vmin;
    width: 40vmin;
}

#morse_dit, #morse_dah {
    height: 10vmin;
    width: 10vmin;
}

.morse_input {
    display: table-cell;
    margin: 0 5vmin 0 5vmin;
    vertical-align: middle;
    text-align: center;
    background: #0803;
    color: #080;
    border: 5px solid;
    -webkit-border-radius: 5vmin;
    -moz-border-radius: 5vmin;
}

@media (orientation: landscape) {
    #morse_slider {
        width: 17vmin;
        height: 40vmin;
        right: 120vmin;
        bottom: 30vmin;
    }
}

.code_input {
    position: absolute;
    -webkit-border-radius: 5vmin;
    -moz-border-radius: 5vmin;
}

.dot {
    position: absolute;
    background: #000;
    border: 3px solid;
}

.outline, .code_img {
    position: absolute;
    border: 3px solid;
    pointer-events: none;
    text-align: center;
    transform-origin: 50% 50%;
}

.code_img {
    border: none;
    height: 90vmin;
    width: 90vmin;
    visibility: hidden;
}

#semaphore_img img {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}