.roboto {font-family:"Roboto", sans-serif;font-optical-sizing:auto;font-weight:400;font-style:normal;font-variation-settings:"wdth" 100;}
.noto-sans-kr {font-family:"Noto Sans KR", sans-serif;font-optical-sizing:auto;font-weight:400;font-style:normal;}

* {margin:0;padding:0;word-break:keep-all;box-sizing:border-box !important;list-style:none;font-size:15px;font-family:roboto,noto-sans-kr;line-height:170%;text-decoration:none;color:whitesmoke;-webkit-text-size-adjust:100%;}
input,select,textarea {outline:none;resize:none;}

html, body {background-color:#222;width:100%;height:100%;}
hi {font-weight:bold;color:cornflowerblue;}
a {cursor:pointer;}
a:hover {color:cornflowerblue;}
a.btn {display:inline-block;padding:2px 20px;margin-right:20px;;border-radius:20px;border:1px solid lightgrey;}
a.btn:hover {background-color:whitesmoke;color:cornflowerblue;}

::-webkit-scrollbar {width:5px;height:5px;background-color:grey;}
::-webkit-scrollbar-thumb {border-radius:0;background-color:dimgrey;}
::-webkit-scrollbar-corner {background-color:grey;}

/* homepage logo main */
.main-logo {width:100%;text-align:center;padding:100px 0 0 0;}
.main-logo .img {display:inline-block;width:280px;height:280px;border-radius:50%;}
.main-logo .links {text-align:center;margin-top:30px;}

/* intro main */
.main-intro {display:grid;grid-template-columns:240px 1fr;gap:0;}
.main-intro .menu {width:100%;padding:10px;}
.main-intro .menu .img {width:100%;height:auto;border-radius:50%;border-top-left-radius:0;}
.main-intro .work {padding:15px;min-width:600px;}
.main-intro .work .title {font-size:25px;font-weight:bold;border-bottom:1px dotted lightgrey;margin-bottom:20px;padding:10px 0;}
.main-intro .work .card {margin-bottom:30px;}
.main-intro .work .card .name {font-size:20px;}
.main-intro .work .card .desc {padding-left:20px;margin-bottom:10px;}
.main-intro .work .card .links {padding-left:20px;}

/* docs main */
.main-docs {display:grid;grid-template-columns:250px 1fr;gap:0;width:100%;height:100%;}
.main-docs .menu {position:relative;}
.main-docs .menu .project {position:absolute;left:0;top:0;height:50px;line-height:50px;width:100%;font-size:25px;font-weight:bold;text-align:center;background: linear-gradient(135deg, black 30%, navy 50%, black 70%);}
.main-docs .menu .box {width:100%;height:100vh;padding:60px 0 30px 0;overflow-x:none;overflow-y:auto;}
.main-docs .menu .box .item .row {display:grid;grid-template-columns:20px 1fr;align-items:center;margin:5px 10px;padding-left:5px;}
.main-docs .menu .box .item .row a,span {font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.main-docs .menu .box .item .level {display:none;margin-left:21px;border-left:1px dotted lightgrey;}
.main-docs .work {width:100%;height:100%;overflow:hidden;}
.main-docs .work iframe {width:100%;height:100%;border:none;}
.selected {color:cornflowerblue;}
.fold {display:inline-block;width:20px;}
.fold-up:hover {color:cornflowerblue}
.fold-down:hover {color:cornflowerblue}
.fold-up::before {display:inline-block;content:"assistant_navigation";font-family:"Material Symbols Outlined";}
.fold-down::before {content:"assistant_navigation";display:inline-block;transform:rotate(180deg);font-family:"Material Symbols Outlined";}
.fold-stay::before {content:"circle";display:inline-block;font-family:"Material Symbols Outlined";}


/* docs page */
.markdown-header {position:fixed;top:0;left:0;width:100%;height:50px;display:block;font-size:25px;background-color:black;color:white;padding:5px;text-align:center;}
.markdown-body {padding:70px 40px 100px 40px;background-color:white;min-height:100%;display:none;}
.markdown-body * {color:#333;line-height:150%;}
.markdown-body h1 {font-size:25px !important;padding-top:20px !important;}
.markdown-body h2 {font-size:20px !important;border:none !important;padding-top:15px !important;}
.markdown-body h2::before {content:"●";margin-right:10px;}
.markdown-body h3 {font-size:15px !important;border:none !important;}
.markdown-body h3::before {content:"▢";margin-right:10px;}
.markdown-body a, p, pre, code, th {font-size:15px;}
.markdown-body td {font-size:14px;}
.markdown-body a:hover {text-decoration:none;}
.markdown-body strong {color:cornflowerblue;font-size:inherit;}
.markdown-body em > strong {color:cornflowerblue;font-size:inherit;font-weight:bold;font-size:20px;}
.markdown-body ul, ol, li {all:revert;font-size:15px;}
.markdown-body pre {padding:0 !important;}
.markdown-body code {background-color:#444 !important;}

.markdown-body table th {background-color:whitesmoke;}
.markdown-body table.custom {border-collapse:collapse;background-color:whitesmoke;border:1px solid lightgrey;border-top:none;border-left:none;}
.markdown-body table.custom th {background-color:whitesmoke;border:1px solid lightgrey;border-bottom:none;border-right:none;}
.markdown-body table.custom td {background-color:white;border:1px solid lightgrey;border-bottom:none;border-right:none;}
.markdown-body table.custom tr.divider > td {border-top:1px solid grey !important;}

.markdown-body a.outlink::after {content:"◱";font-size:15px;margin-left:5px;color:grey;}

.markdown-body .language-css {color:bisque;}
.markdown-body .hljs-params {color:aquamarine;}
.markdown-body .hljs-comment {color:cadetblue;}
.markdown-body .hljs-attribute {color:bisque;}