html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

body {
    background-color: gainsboro;
}

.content {
    width: 90%;
    margin: 2% auto;
}

.outerBox {
    width: 33%;
    height: 30vh;
    padding: 5px;
    float: left;
}
@media (max-width: 450px) {
    .outerBox {
        width: 49%;
        height: 18vh;
    }
}

@media (max-width: 200px) {
    .outerBox {
        width: 99%;
        height: 11vh;
    }
}


.innerBox {
    width: 100%;
    height: 100%;
    background-color: black;
    border: 1px solid white;
    color: white;
    padding: 5px;
    position: relative;
    display: block;
    font-size: 6vw;
    font-weight: 900;
}

    .innerBox .name {
        display: block;
        float: left;
        width: 50%;
        height: 100%;
        text-decoration: none;
        position: absolute;
        top: 50%;
        color: white;
        -webkit-transform: translateY(-25%);
        -moz-transform: translateY(-25%);
        -ms-transform: translateY(-25%);
        -o-transform: translateY(-25%);
        transform: translateY(-25%);
    }

    .innerBox .result {
        display: block;
        float: right;
        width: 50%;
        text-align: right;
        height: 100%;
        color: white;
        text-decoration: none;
        position: absolute;
        top: 50%;
        left: 50%;
        padding-right: 2%;
        -webkit-transform: translateY(-25%);
        -moz-transform: translateY(-25%);
        -ms-transform: translateY(-25%);
        -o-transform: translateY(-25%);
        transform: translateY(-25%);
    }