/* credit for scrollbar code: u/lift_spin_d/ (reddit) */
/* hide page scrollbar */
html { scrollbar-width: none; } /* Firefox */
body { -ms-overflow-style: none; } /* IE and Edge */
body::-webkit-scrollbar, body::-webkit-scrollbar-button { display: none; } /* Chrome */
/* end hide page scrollbar */

html {
  -webkit-text-size-adjust: 100%;
}

@font-face
{
    font-family: 'ibm';
    src: url("./public/IBMPlexMono-Regular.ttf");
    font-weight: normal;
}

@font-face
{
    font-family: 'ibm';
    src: url("./public/IBMPlexMono-Bold.ttf");
    font-weight: bold;
}

:root
{
    --background: #000000;
    --text: #37b32f;
    --text-gray: #A2A2A2;
    background-color: var(--background);
    color: var(--text);
}

::-moz-selection
{
    background-color: var(--text);
    color: var(--background);
}

::selection
{
    background-color: var(--text);
    color: var(--background);
}

body
{
    padding: 20px 40px;
    overflow-x: hidden;
}

.desktop
{
    display: inline-block !important;
}

.mobile
{
    display: none !important;
}

.flex
{
    display: flex;
}

.flex-column
{
    display: flex;
    flex-direction: column;
}

.justify-center
{
    justify-content: center;
}

.align-center
{
    align-items: center;
}

.gap-sm
{
    gap: 1ch;
}

.gap-md
{
    gap: 2ch;
}

.gap-lg
{
    gap: 3ch;
}

*
{
    font-family: monospace;
    font-size: clamp(9px, 1.25vw, 14px);
    /* font-size: max(9px, min(1.25vw, 14px)); */
    font-weight: normal;
    padding: 0;
    margin: 0;
}

button
{
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    width: 100%;
    text-align: start;
}

.b
{
    font-weight: bold;
}

.gray
{
    color: var(--text-gray);
}

.green
{
    color: var(--text);
}

a
{
    text-decoration: none;
    color: inherit;
    display: block;
}

ul
{
    list-style: none;
    padding: 0;
}

.pl-1
{
    margin-left: 4ch;
}

.pl-2
{
    margin-left: 8ch;
}

.pl-3
{
    margin-left: 12ch;
}

.pl-4
{
    margin-left: 16ch;
}

.hover:hover,
.hover:hover *,
.warning
{
    color: var(--background);
    background-color: var(--text);
    cursor: pointer;
}

.warning
{
    padding: 2px 4px;
}

.main .colors div
{
    width: clamp(20px, 3vw, 35px);
    height: clamp(26px, 3.9vw, 45px);
}

.block
{
    display: block;
}

.inline
{
    display: inline;
}

pre
{
    font-weight: inherit;
}

/* .fade-in
{
    opacity: 0;
    transition: opacity ease-in-out 200ms;
}

.fade-in.show
{
    opacity: 1;
} */

/* #main .main .flex
{
    flex-direction: column;
} */

div.mobile-flag
{
    display: none;
}

.ib
{
    display: inline-block;
}
/* 
@keyframes typing
{
    0% { width: 0ch; opacity: 100%; }
    100% { width: calc(var(--chars) * 0.602em); opacity: 100%; }
} */

@keyframes typing
{
    0% { width: 0ch; opacity: 100%; }
    100% { width: auto; opacity: 100%; }
}

@keyframes typing-heading
{
    0% { width: 0ch; opacity: 100%; }
    100% { width: var(--chars-ch); opacity: 100%; }
}

@keyframes cursor
{
    0%, 95% { border-right: 1ch solid var(--text-gray); }
    100% { border-color: transparent; }
}

@keyframes appear
{
    0% { opacity: 0%; }
    100% { opacity: 100%; }
}

.typewriter
{
    opacity: 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    animation:
        typing-heading var(--speed) steps(var(--chars)),
        cursor 600ms forwards;
    animation-delay: var(--delay);
    animation-fill-mode: forwards;
}

.typewriter-fast-cursor
{
    opacity: 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    animation: typing var(--speed) steps(var(--chars)), cursor 100ms forwards;
    animation-delay: var(--delay);
    animation-fill-mode: forwards;
}

.typewriter-no-cursor
{
    opacity: 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    animation: typing var(--speed) steps(var(--chars));
    animation-delay: var(--delay);
    animation-fill-mode: forwards;
}

.typewriter-pre
{
    opacity: 0;
    width: 100%;
    overflow: hidden;
    animation: typing var(--speed) steps(var(--chars));
    animation-delay: var(--delay);
    animation-fill-mode: forwards;
}

.appear
{
    opacity: 0;
    animation: appear 200ms;
    animation-delay: var(--delay);
    animation-fill-mode: forwards;
}

.temp-width
{
    box-sizing: border-box;
    width: 800px;
}

@media only screen and (max-width: 950px)
{
    .temp-width
    {
        width: 80vw;
    }
}

@media only screen and (max-width: 820px)
{
    div.mobile-flag
    {
        display: block;
    }

    body
    {
        padding: 12px 25px;
    }
}

@media only screen and (max-width: 600px)
{
    .desktop
    {
        display: none !important;
    }

    .mobile
    {
        display: inline-block !important;
    }

    .section.main .arch-logo
    {
        display: none;
    }

    .pl-1
    {
        margin-left: 2ch;
    }

    .pl-2
    {
        margin-left: 4ch;
    }

    .pl-3
    {
        margin-left: 6ch;
    }

    .pl-4
    {
        margin-left: 8ch;
    }

    .section.main
    {
        margin-left: 2ch;
    }
    
    .temp-width
    {
        width: 90vw;
    }
}

@media only screen and (max-width: 468px)
{
    body
    {
        padding: 12px 15px;
    }
}