@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");div[data-astro-cid-5blmo7yk].navbar-main{display:flex;align-items:center;justify-content:center;width:100%;height:64px;background-color:var(--col-darker);border-bottom:1px solid var(--col-dark);z-index:8008135}div[data-astro-cid-5blmo7yk].navbar-wrapper{display:flex;align-items:stretch;justify-content:space-between;width:80%;height:100%}div[data-astro-cid-5blmo7yk].navbar-wrapper>[data-astro-cid-5blmo7yk]{position:relative}div[data-astro-cid-5blmo7yk].navbar-header{display:flex;align-items:center;justify-content:center;gap:4px;padding:4px;box-sizing:border-box;cursor:pointer}div[data-astro-cid-5blmo7yk].navbar-header>a[data-astro-cid-5blmo7yk]{position:absolute;top:0;left:0;right:0;bottom:0}div[data-astro-cid-5blmo7yk].navbar-list{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;box-sizing:border-box}div[data-astro-cid-5blmo7yk].navbar-list-item,a[data-astro-cid-5blmo7yk].navbar-list-item{display:flex;align-items:center;justify-content:center;width:max-content;height:100%;padding:0px 16px;box-sizing:border-box;background-color:var(--col-darker);color:var(--col-light);border-radius:4px;text-decoration:none;transition:background-color 0.2s var(--ease-sine-io),color 0.2s var(--ease-sine-io);cursor:pointer}div[data-astro-cid-5blmo7yk].navbar-list-item:hover,a[data-astro-cid-5blmo7yk].navbar-list-item:hover{background-color:var(--col-dark);color:var(--col-lightest)}div[data-astro-cid-5blmo7yk].navbar-list.narrow{align-items:flex-start;justify-content:flex-start;flex-direction:column;position:fixed;gap:8px;top:0;left:0;width:100vw;height:100vh;padding:64px calc(10% + 8px);box-sizing:border-box;background-color:var(--col-darkest);z-index:8008135}div[data-astro-cid-5blmo7yk].navbar-list.narrow>a[data-astro-cid-5blmo7yk].navbar-list-item{width:100%;height:48px}div[data-astro-cid-5blmo7yk]#navbar-button{font-size:24px;z-index:8008136}div[data-astro-cid-sz7xmlte].footer-main{display:flex;align-items:center;justify-content:center;width:100%;min-height:64px;padding:8px 16px;box-sizing:border-box;background-color:var(--col-darker);border-top:1px solid var(--col-dark);font-style:italic;text-align:center;z-index:8008134}div[data-astro-cid-sz7xmlte].footer-main>span[data-astro-cid-sz7xmlte]{opacity:0.5;transition:opacity 0.2s var(--ease-sine-io)}div[data-astro-cid-sz7xmlte].footer-main>span[data-astro-cid-sz7xmlte]:hover{opacity:1}

:root {
    --col-accent: #f4d259;

    --col-light: #909090;
    --col-lighter: #c0c0c0;
    --col-lightest: #ffffff;

    --col-dark: #212121;
    --col-darker: rgb(16, 16, 16);
    --col-darkerer: rgb(13, 13, 13);
    --col-darkest: #000000;

    --col-red: #fe000a;
    --col-blue: #037afe;
    --col-green: #2ced73;

    --ease-sine-io: cubic-bezier(0.37, 0, 0.63, 1);
    --ease-quint-o: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
    font-family: 'Pretendard';

    background-color: var(--col-darkest);
    color: var(--col-lightest);
}

body {
    min-height: 100vh;

    margin: 0;
    padding: 0;

    background-size: 32px 32px;
    background-image: linear-gradient(
            to right,
            var(--col-darker) 1px,
            transparent 1px
        ),
        linear-gradient(to bottom, var(--col-darker) 1px, transparent 1px);

}

a {
    color: #f4d259;

    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a.help {
    display: inline-block;
}

hr {
    flex-grow: 2;
    width: 100%;

    border: none;
    border-top: 1px solid var(--col-dark);
}

ul {
    margin: 0;
    margin-bottom: 8px;
}

code {
    font-size: 16px;
}

div.main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    width: 100%;
    min-height: 100vh;

    gap: 64px;

    flex-direction: column;
}

div.content {
    display: flex;
    align-items: stretch;
    justify-content: stretch;

    flex-direction: column;
    row-gap: 8px;

    width: 50%;
    height: max-content;

    padding: 16px;
    box-sizing: border-box;

    background-color: var(--col-darker);
    border: 1px solid var(--col-dark);
    border-radius: 4px;

    box-shadow: 0 0 16px var(--col-darkest);
}

div.content h3 {
    margin: 4px 0;
}

div.content p {
    margin: 8px 0;
}

div.content img {
    max-width: 100%;
    max-height: 512px;
    margin: auto;
    display: block;
}

div.wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;

    gap: 16px;

    width: 100%;
}

div.wrapper h2 {
    margin: 4px 0;
}

div.list {
    display: flex;
    align-items: flex-start;
    justify-content: stretch;

    flex-direction: column;

    padding: 16px;
    box-sizing: border-box;

    overflow-y: scroll;

    background-color: var(--col-darkest);
    border: 1px solid var(--col-dark);
    border-radius: 4px;
}

img.icon-16 {
    width: 16px;
    height: 16px;

    object-fit: contain;
}

img.icon-48 {
    width: 48px;
    height: 48px;

    object-fit: contain;
}

img.icon-64 {
    width: 64px;
    height: 64px;

    object-fit: contain;
}

div.element {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 24px;
    min-height: 24px;
    max-width: 24px;
    max-height: 24px;

    background-size: 120% 120%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

div.element::after {
    content: '';

    width: 16px;
    height: 16px;

    background-size: 16px 16px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

div.element.fire {
    background-image: url("../../common/colored/hex_frame_fire.png");
}

div.element.fire::after {
    background-image: url("../../common/colored/ele_fire.png");
}

div.element.wind {
    background-image: url("../../common/colored/hex_frame_wind.png");
}

div.element.wind::after {
    background-image: url("../../common/colored/ele_wind.png");
}

div.element.electric {
    background-image: url("../../common/colored/hex_frame_electric.png");
}

div.element.electric::after {
    background-image: url("../../common/colored/ele_electric.png");
}

div.element.water {
    background-image: url("../../common/colored/hex_frame_water.png");
}

div.element.water::after {
    background-image: url("../../common/colored/ele_water.png");
}

div.element.iron {
    background-image: url("../../common/colored/hex_frame_iron.png");
}

div.element.iron::after {
    background-image: url("../../common/colored/ele_iron.png");
}

div.skill {
    display: flex;
    align-items: center;
    justify-content: stretch;
    flex-direction: row;
    gap: 16px;

    width: 100%;

    padding: 16px;
    box-sizing: border-box;

    background-color: var(--col-darkest);
    border: 1px solid var(--col-dark);
    border-radius: 4px;
}

div.skill > div.skill-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    width: 64px;
    height: 100%;
}

div.skill > div.skill-body {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;

    gap: 4px;

    width: 100%;
    height: 100%;
}

div.skill > div.skill-body > h4 {
    margin: 0;
}

div.attribute-list {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;

    gap: 8px;

    width: 100%;
}

div.attribute-list > span {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;

    height: 24px;

    padding: 4px 8px;

    border-radius: 4px;

    background-color: var(--col-dark);
    color: var(--col-lightest);

    font-size: 14px;
    font-weight: 550;
}

div.attribute-list i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 16px;
    height: 16px;

    font-size: 16px;
    font-style: normal;
}

.hidden {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    touch-action: none !important;
}

.loading {
    filter: brightness(30%) !important;
    pointer-events: none !important;
}

.astro-code {
    padding: 16px;
    border-radius: 4px;

    border: 1px solid var(--col-dark);
    background-color: var(--col-darkerer) !important;

    margin: 0;
}

@media screen and (max-width: 960px) {
    div.content {
        width: calc(100% - 32px);
    }

    body, code {
        font-size: 14px;
    }

    div.attribute-list > span {
        font-size: 12px;

        padding: 2px 6px;
    }
}