:root {
        --main-color: #6D8086;
        --page-background-color: #090B0D;
        --prompt-ps-color: #4D5A5E;
        --prompt-input-color: #436B24;
        --tab-label-color: #A074C4;
        --nav-link-color: #8DC149;
}

* {
        font-family: monospace, monospace;
        color: #6D8086;
        padding: 0px;
        margin: 0px;
        box-sizing: border-box;
        overflow-wrap: break-word;
}

a {
        text-decoration: none;
        color: #728CA6;
        cursor: pointer;
}

.c1 {
        color: #00c3ff;
}

body {
        background-color: var(--page-background-color);
}

p, li {
        line-height: 24px;
}

ol {
        margin-left: 20px;
}

h1, h2, h3, h4, h5 {
        margin-bottom: 8px;
}

.primary-color {
        color: #6D8086;
        border-color: #6D8086;
}

#terminal {
    display: flex;
    justify-content: center;
    align-items: center;
}

#root {
        margin: 0 auto;
        padding: 0 12px;
        max-width: 700px;
        position: relative;
}

#nav {
        display: flex;
}

#nav a {
        color: #246B68;
        cursor: pointer;
}

.copyright {
        color: #313435;
}


h1, h2, h3, h4, .article-end-divider {
        color: #00c3ff;
        font-weight: 100;
}

/*      === NAV RULES ===       */
.nav-link-seperator {
        min-width: 20px;
}

.nav-link-seperator::before {
        content: "·";
}

.nav-link {
        color: var(--nav-link-color);
}


/*      === PROMPT RULES  ===   */
.prompt-ps {
  color: var(--prompt-ps-color);
}

.prompt-input {
        color: var(--prompt-input-color);
}


/*      === TAB RULES ===       */
.tab {
        min-width: 150px;
        display: flex;
        margin-right: 25px;
}

.tab .tab-label {
        color: var(--tab-label-color);
}

.tab .tab-seperator {
        color: var(--tab-label-color);
}


.tab .tab-value {
        margin-left: 2em;
}

.aside-divider {
        display: block;
        border-style: none;
}

.hr-dash {
        border: 0px;
        border-top: 2px solid #00c3ff;
        flex-grow: 1;
}

.divider {
        display: flex; 
        align-items: center;
}

.divider > span {
        color: #00c3ff;
}

#eof {
        font-weight: bold;
}

@media only screen and (min-width: 768px)
{
        p, li {
                line-height: 32px;
        }

        ol {
                margin-left: 40px;
        }

        #root {
                padding-top: 40px;
                max-width: 960px;
        }

        #nav {
                position: absolute;
                right: 12px;
        }

        #nav a:hover {
                color: #242C6B;
        }

        .tab {
                flex-direction: column;
        }

        .tab .tab-seperator {
                display:  none;
        }

        .tab .tab-label {
                min-width: 140px;
        }
}

h1, .f4 {
        font-size: 18px;
}

h2, .f3 {
        font-size: 16px;
}

h3, .f2 {
        font-size: 13px;
}

.fa {
        font-size: 10px;
}

.fb {
        font-size: 8px;
}

pre.pre-heading {
        font-size: 6px;
}

p, a, pre.code-block, li, .f1 {
        font-size: 12px;
}

#opening {
        font-size: 10px;
}

.code-block {
        overflow: scroll;
}

@media only screen and (min-width: 600px) {
        p, a, pre.code-block, li, .f1 {
                font-size: 14px;
        }

        #opening {
                font-size: 14px;
        }

        pre.pre-heading {
                font-size: 12px;
        }

        h1, .f4 {
                font-size: 22px;
        }

        h2, .f3 {
                font-size: 18px;
        }

        h3, .f2 {
                font-size: 16px;
        }

        .fa {
                font-size: 12px;
        }

        .fb {
                font-size: 10px;
        }
}

@media only screen and (min-width: 768px) {
        p, a, pre.code-block, li, .f1 {
                font-size: 16px;
        }

        #opening {
                font-size: 16px;
        }

        h1, .f4 {
                font-size: 24px; 
        }

        h2, .f3 {
                font-size: 20px;
        }

        .fa {
                font-size: 14px;
        }

        .fb {
                font-size: 12px;
        }
}



p {
        text-justify: inter-word;
}

.modal {
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: rgba(35, 62, 89, 0.5);
        z-index: 1;
        justify-content: center;
        cursor: pointer;
}

.modal-on {
        display: flex;
}

.modal-off {
        display: none;
}

.m-content {
        background-color: #090B0D;
        height: 80%;
        overflow-y: scroll;
}

#sm-img {
        width: 100%;
        object-fit: contain;
}

#sm-p {
        margin-top: 6px;
        padding: 8px;
}

.showcase {
        display: flex;
        justify-content: center;
        gap: 30px;
        flex-wrap: wrap;
}

.sc-item {
        width: 100%;
        height: 20vh;
        background-color: #233E59;
        display: flex;
        justify-content: center;
        transition: border-radius 0.45s;
        align-items: center;
        position: relative;
        border-radius: 12px;
}

.sc-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 12px;
        transition: border-radius 0.45s;
}

.sc-caption {
        /* opacity: 0%; */
        opacity: 100%;
        border-radius: 12px;
        /* transition: opacity 0.6s; */
        position: absolute;
        bottom: 0;
        height: 70px;
        background-color: rgba(35, 62, 89, 0.85);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
}

.sc-detail {
        display: none;
}

.sc-caption > span {
        font-size: 14px;
        color: #728CA6;
}

.contact {
        display: flex;
}

.c-platform {
        min-width: 80px;
}

.c-seperator {
        min-width: 20px;
}

.c-contact {
        color: #728CA6;
}

@media only screen and (min-width: 600px) {
        .contact {
                margin-bottom: 8px;
        }

        .sc-item {
                height: 260px;
        }
}

@media only screen and (min-width: 768px) {        
        .contact {
                margin-bottom: 12px;
        }

        .m-content {
                cursor: auto;
                padding: 12px;
                border-radius: 12px;
                width: 80%;
                height: auto;
                margin: 30px 0;
        }

        #sm-img {
                border-radius: 8px;
                height: 55%;
        }

        .sc-item {
                width: 31%;
                flex-grow: 1;
                padding: 4px;
        }

        .sc-item:hover {
                cursor: pointer;
                border-radius: 0px;
        }

        .sc-image {
                transition: border-radius 0.45s;
        }


        .sc-item:hover .sc-image {
                border-radius: 0px;
        }

        .c-platform {
                min-width: 100px;
        }

        .c-seperator {
                min-width: 30px;
        }
}


/*# sourceMappingURL=index.fbb79709b4bd8e7052f1.css.map*/