html, body{
    margin: 0;
}

* {
    scroll-behavior: smooth;
    scroll-margin-top: 30px;

    box-sizing: border-box;
    &.unselectable{
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
}
ol.reset, ul.reset{
    padding: 0;
    li{
        list-style: none;
        margin: 0;
        padding: 0;
    }
}

ol{
    counter-reset: item;
    list-style-type: none;

    & > li{
        counter-increment: item;

        &::marker{
            content: counters(item, ".") ". ";
            font-weight: bold;
        }

        & > ol{
            counter-reset: item;
        }
    }
}

h1, h2, h3, h4, h5, h6{
    margin: 0;
}

a {
    display: var(--display, block);
    text-decoration: var(--text-decoration, none);
    color: var(--color, var(--black-clr));
}

.tag_reset{
    all: unset;
}

.flex{
    display: flex;
    gap: var(--gap);
}

.grid{
    display: grid;
    gap: var(--gap);
}

.jc_center{
    justify-content: center;
}

.jc_space_between{
    justify-content: space-between;
}

.jc_right{
    justify-content: right;
}

.fd_column{
    flex-direction: column;
}

.ai_top{
    align-items: flex-start;
}

.ai_center{
    align-items: center;
}

.ai_end{
    align-items: flex-end;
}

.fw_wrap{
    flex-wrap: wrap;
}

.gap5{
    column-gap: var(--gap5, 5px);
}

.gap10{
    column-gap: var(--gap10, 10px);
}

.gap15{
    column-gap: var(--gap15, 15px);
}

.gap20{
    column-gap: var(--gap20, 20px);
}

.gap25{
    column-gap: var(--gap25, 25px);
}

.rgap5{
    row-gap: var(--gap5, 5px);
}

.rgap10{
    row-gap: var(--gap10, 10px);
}

.rgap15{
    row-gap: var(--gap15, 15px);
}

.rgap20{
    row-gap: var(--gap20, 20px);
}

.rgap25{
    row-gap: var(--gap25, 25px);
}

.mt10{
    margin-top: 10px;
}
.mb10{
    margin-bottom: 10px;
}

.ta_center{
    text-align: center;
}

.line-clamp{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--line-clamp, 1);
    line-clamp: var(--line-clamp, 1);

    overflow: hidden;
    text-overflow: ellipsis;
}

p{
    margin: 0;
    padding: 0;

    display: block;
}