body {
    background-color: #006DDF;
}

@font-face {
    font-family: 'digital';
    src: url(../fonts/GH_7SEGMedium.woff) format('woff');
}

@font-face {
    font-family: 'dotted';
    src: url(../fonts/Nosutaru-dotMPlusH-10-Regular.ttf) format('truetype');
}

#flex {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 95vh;
    position: fixed;
    left: 0;
    right: 0;
    overflow: hidden;
}

#logo {
    width: 80vh;
    margin: auto auto 11vw;
}

#content {
    transform: rotate(-90deg);
    width: 100vh;
    position: fixed;
    overflow: hidden;
}

#result {
    font-family: digital;
    font-size: 65vw;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    text-align: center;
    margin-bottom: 0.5vh;
    color: #ffffff;
}

#startBtn,
#sensorRequest {
    font-family: 'dotted';
    width: 70%;
    height: 100%;
    font-size: 18px;
    display: none;
    font-weight: bold;
    -webkit-appearance: none;
}

#startBtn {
    letter-spacing: 0.5em;
    text-indent: 0.5em;
    font-size: 20px;
    border: 3px #ffffff solid;
    background-color: #ffffff40;
    color: #ffffff;
}

#sensorRequest {
    font-size: 20px;
    border: 3px #ff3333 solid;
    background-color: #ff333340;
    color: #ff3333;
}

#btnWrap {
    text-align: center;
    height: 5vh;
}