@import url(../base/index.css);
@import url(../base/syntax.css);

#content {
    margin-top: 2rem;
    text-align: left;
    border: 0.25rem solid whitesmoke;
}

#pad {
    margin: 0 1rem 0;
    color: whitesmoke;
}

#pad > a {
    color: whitesmoke;
}

#simple {
    margin: 0 1rem 1rem;
    float: left;
}

h5 > a {
    color: whitesmoke;
    text-decoration: underline;
}

ul {
    padding-left: 3px;
    list-style-type: none;
}

li {
    list-style: none;
}

.code {
    overflow-y: scroll;
}

span.cd {
    white-space: normal;
}

mark {
    background-color: transparent;
}

.cd {
    background: rgba(0, 0, 0, 0.4);
    padding: 0.125rem 0.5rem 0.125rem;
    overflow-wrap: break-word;
}

@media (orientation: portrait) {
    #content {
        width: calc((19 / 4) * 10vh);
    }
    #simple {
        height: 16vh;
    }

    #dia {
        width: calc((19 / 4) * 4vh);
    }
    
    .hd {
        width: calc((19 / 4) * 8vh);
    }
}

@media (orientation: landscape) {
    #content {
        width: 60vw;
    }
    #simple {
        width: 8vw;
    }
    #dia {
        width: 16vw;
    }
    .hd {
        width: 40vw;
    }
}