* {
    padding: 0;
    margin: 0;
    color: rgb( var( --r1 ) );
    font-size: 16px;
    transition: 240ms;
}
a, a i {
    color: rgb( var( --r2 ) );
    text-decoration: none;
}
h1 { font-size: 32px; } h1 * { font-size: 32px; font-weight: bold; }
h2 { font-size: 28px; } h2 * { font-size: 28px; font-weight: bold; }
h3 { font-size: 24px; } h3 * { font-size: 24px; font-weight: bold; }
h4 { font-size: 20px; } h4 * { font-size: 20px; font-weight: bold; }
h5 { font-size: 16px; } h5 * { font-size: 16px; font-weight: bold; }
h6 { font-size: 14px; } h6 * { font-size: 14px; font-weight: bold; }
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}
hr {
    --size: 1px;
    display: block;
    width: 100%;
    margin: 20px 0px;
    border: none;
    border-bottom: var( --size ) dashed rgb( var( --r1 ), 0.75 );
}
input:focus, textarea:focus, select:focus { outline: none; }
div#App {
    width: 100%;
    min-height: 100vh;
    background: rgb( var( --r0 ) );
    box-sizing: border-box;
}
i.block {
    display: inline-block;
    width: var( --size );
    height: var( --size );
    text-align: center;
    line-height: var( --size );
}
.spin {
    display: inline-block;
    animation: spin 1.5s linear infinite;
} @keyframes spin {
    0% {
        transform: rotate( 0deg );
    }
    100% {
        transform: rotate( 360deg );
    }
}
.scroll {
    overflow-y: scroll;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
}
.scroll::-webkit-scrollbar { width: 0 !important; }
.more {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.center {
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-display: flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
}
.grid {
    --width: 240px;
    --tab: 8px;
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( var( --width ), 1fr ) );
    grid-gap: var( --tab );
}