.background {
    height: auto;
    min-height: 100vh;
    padding: 15px;
    background-color: #666;
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'100\' height=\'100\' viewBox=\'0 0 200 200\'%3E%3Cdefs%3E%3ClinearGradient id=\'a\' gradientUnits=\'userSpaceOnUse\' x1=\'100\' y1=\'33\' x2=\'100\' y2=\'-3\'%3E%3Cstop offset=\'0\' stop-color=\'%23000\' stop-opacity=\'0\'/%3E%3Cstop offset=\'1\' stop-color=\'%23000\' stop-opacity=\'1\'/%3E%3C/linearGradient%3E%3ClinearGradient id=\'b\' gradientUnits=\'userSpaceOnUse\' x1=\'100\' y1=\'135\' x2=\'100\' y2=\'97\'%3E%3Cstop offset=\'0\' stop-color=\'%23000\' stop-opacity=\'0\'/%3E%3Cstop offset=\'1\' stop-color=\'%23000\' stop-opacity=\'1\'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill=\'%23ca481d\' fill-opacity=\'0.6\'%3E%3Crect x=\'100\' width=\'100\' height=\'100\'/%3E%3Crect y=\'100\' width=\'100\' height=\'100\'/%3E%3C/g%3E%3Cg fill-opacity=\'0.5\'%3E%3Cpolygon fill=\'url(%23a)\' points=\'100 30 0 0 200 0\'/%3E%3Cpolygon fill=\'url(%23b)\' points=\'100 100 0 130 0 100 200 100 200 130\'/%3E%3C/g%3E%3C/svg%3E"); */
}

.resize-box,
.resize-box > * {
    transform: rotateX(180deg);
}

.resize-box {
    resize: horizontal;
    max-width: 100%;
    min-width: 230px;
    width: max-content;
    overflow-x: auto;
    overflow-y: visible;
    outline: #000 5px dashed;
    outline-offset: -5px;
    border: yellow solid 6px;
    background-color: rgba(255, 255, 0, 10%);
}

.notice {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    font-size: small;
    color: yellow;
    letter-spacing: 0.005em;
    text-align: center;
    line-height: 0.8;
    align-items: center;
}

.notice span:first-child,
.notice span:last-child {
    font-size: x-large;
}

.content-box {
    border-radius: 5px;
    padding: 10px;
    margin: 0 auto;
    width: 90%;
    min-width: 160px;
    background: #fff;
}