html {
    scrollbar-width: unset;
}

/*div {
    display: unset;
}*/

pre {
    white-space: pre-wrap;


}

body {
    font: 1.2em/1.5 AppleGothic, NanumGothic, Sans-serif;
    line-height: 1.4;
    color: #3d3533;
    background-color: #ffffff;
    margin: 1rem auto;
    padding: 1rem;
}

img {
    display: block;
    max-width: 100%;
    margin: 1rem auto;
}
video {
    display: block;
    max-width: 100%;
    margin: 1rem auto;
}


div {
    max-width: 500px;
    display: inline-block;
    vertical-align: top;
    margin: 0.2em;
    padding: 0.2em;
    word-break:keep-all; 
    word-break:break-word
}

figcaption,
.filename {
    font-size: 0.7em;
}

@media (max-width: 500px) {
    body {
        font: 1.2em/1.5 AppleGothic, NanumGothic, Sans-serif;
        line-height: 1.4;
        padding: 0.5rem;
        word-wrap:break-word;
        word-break:keep-all; 


    }
    video {
        display: block;
        max-width: 100%;
         margin: 0.2rem auto;
    }
    
    img {
        display: block;
        max-width: 100%;
        margin: 0.2rem auto;
    }
    figcaption,
    .filename {
     font-size: 0.4em;
    }
}


figure {
    max-width: 500px;
    margin: 0.2rem auto;
    padding: 0.2rem;
}
.plain {
    max-width: 500px;
}