/*
    GLORY BE TO GOD,
    ISRAEL MAFABI EMMANUEL - PORTFOLIO
*/

@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Inconsolata:wght@200..900&family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sixtyfour&display=swap');

:root {
    --ime-cool-black: #000000;
    --ime-cool-gray: rgb(53, 53, 53);
    --ime-cool-gray-: rgb(154, 154, 154);
    --ime-cool-white: white;

    --ime-cool-black-tr: rgba(22, 22, 23, 0.5);
    --ime-cool-gray-tr: rgba(104, 104, 104, 0.1);

    --ime-default-font: "Inconsolata", monospace;
    --ime-default-font-size: 0.833rem;

    --ime-crt-text-color: #0f0;
    /* Default CRT green */
    --ime-crt-text-color-: rgb(255, 136, 0);

    --text-color: #00FF00;
    --prompt-color: #00FF00;
    --cursor-color: #00FF00;

    --link-color: #ffffff;
    --text-color-tr: #00ff0038;

    --crt-color-grad: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 255, 0, 0.08) 50%);
}

* {
    font-family: var(--ime-default-font);

    box-sizing: border-box;
    margin: 0;
    padding: 0;

    text-shadow:
        0 1px var(--ime-cool-black),
        0 2px var(--ime-cool-black);

    outline: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -ms-user-select: none;
    -moz-user-select: none;

    transition: 500ms;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--text-color);
    border-radius: 4px;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

body {
    background: var(--ime-cool-black);
    color: var(--text-color);

    font-family: var(--ime-default-font);
    font-size: var(--ime-default-font-size);

    display: flex;
    flex-direction: column;

    margin: 0;
    padding: 10px;
    box-sizing: border-box;

    position: relative;
    animation: crt-flicker 0.1s infinite;

    width: 100vw;
    height: 100vh;

    &::before {
        background: var(--crt-color-grad);
        /* Subtle scanlines */
        background-size: 100% 3px;

        content: '';
        position: absolute;

        pointer-events: none;
        z-index: -1;
        /* Behind the content */

        top: 0;
        left: 0;

        width: 100%;
        height: 100%;
    }

    .ime_portfolio_startup {
        display: none;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;

        min-width: 300px;
        height: 100%;

        .ime_portfolio_startup_content {
            flex-grow: 1;

            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            width: fit-content;
            height: 500px;
            min-height: 300px;

            .name_intro {
                color: var(--text-color);
                font-size: 4rem;

                .name {
                    color: var(--ime-cool-white);
                    text-decoration: underline;
                }
            }

            .profession {
                color: var(--text-color);
                font-size: 0.95rem;
            }
        }

        .ime_portfolio_utilities {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            gap: 2px;

            width: 297px;
            height: fit-content;
            min-height: 50px;

            .ime_portfolio_utility_btns {
                color: var(--text-color);

                display: flex;
                align-items: center;
                justify-content: center;

                width: fit-content;
                height: fit-content;

                .utility_btns {
                    font-size: 0.95rem;
                    color: var(--text-color);

                    cursor: pointer;

                    span {
                        color: var(--ime-cool-white);
                        font-weight: bold;

                        cursor: pointer;
                    }

                    .command {
                        color: var(--text-color);
                        font-weight: normal;
                        text-decoration: underline;

                        cursor: default;

                        text-shadow:
                            0 1px var(--ime-cool-black),
                            0 1px var(--ime-cool-black);
                    }
                }
            }

            .ime_portfolio_copyright {
                color: var(--text-color);
                font-size: 0.95rem;
            }
        }
    }

    .ime_portfolio_boot {
        display: none;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;

        width: 100%;
        min-width: 300px;
        height: 100%;
    }

    .ime_portfolio_terminal {
        flex-grow: 1;

        display: none;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        min-width: 300px;

        .terminal-output {
            border: 1px dotted var(--text-color-tr);
            flex-grow: 1;
            /* Takes up available space */

            overflow-y: auto;
            /* Scrollbar if content overflows */

            padding: 14px;

            width: 100%;
        }

        .prompt-line {
            border-right: 1px dotted var(--text-color-tr);
            border-left: 1px dotted var(--text-color-tr);
            border-bottom: 1px dotted var(--text-color-tr);

            display: flex;
            align-items: center;

            padding: 14px;

            width: 100%;
            height: 50px;
            min-height: 50px;

            .prompt {
                color: var(--prompt-color);
                margin-right: 5px;
                white-space: nowrap;
                /* Prevent prompt from wrapping */
            }

            .command-input {
                background-color: transparent;
                border: none;

                color: var(--text-color);
                font-family: var(--font-family);
                font-size: var(--font-size);

                outline: none;

                flex-grow: 1;
                /* Take remaining space in the line */
                caret-color: var(--cursor-color);
                /* Color of the native blinking cursor */
            }
        }
    }

    .welcome-text {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        width: inherit;
        height: inherit;

        .title {
            font-size: 0.95rem;

            u {
                color: var(--ime-cool-white);
            }
        }

        .subtitle {
            font-size: 0.95rem;
        }
    }
}

.output-line {
    white-space: pre-wrap;
    /* Preserve whitespace and wrap long lines */
    word-break: break-all;
    /* Break long words */

    font-size: 0.85rem;
    padding-top: 1px;

    .folder {
        color: var(--ime-cool-white) !important;
    }

    .link {
        color: var(--link-color) !important;
        font-family: var(--font-family);

        text-decoration: none;
    }

    .ime_portfolio_about {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;

        gap: 4px;

        max-width: 500px;

        .title {
            color: var(--ime-cool-white);
            font-size: 1.5rem;

            width: fit-content;
            height: fit-content;
        }

        .content {
            color: var(--ime-cool-white);
            font-size: 0.85rem;

            word-break: break-word;
            overflow-wrap: break-word;

            padding-top: 4px;
        }

        .education {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;

            padding-top: 4px;

            .title {
                color: var(--ime-cool-white);
                font-size: 1.5rem;
            }

            .course {
                font-size: 0.85rem;
            }
        }

        .skills {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;

            padding-top: 4px;

            .title {
                color: var(--ime-cool-white);
                font-size: 1.5rem;
            }

            .tech_stack {
                font-size: 0.85rem;
            }
        }

        .inspire {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;

            padding-top: 4px;
            padding-bottom: 4px;

            .title {
                color: var(--ime-cool-white);
                font-size: 1.5rem;
            }

            .quotes {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;

                .quote {
                    font-size: 0.85rem;
                }
            }
        }
    }

    .ime_portfolio_contact {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;

        gap: 4px;

        max-width: 500px;

        .title {
            color: var(--ime-cool-white);
            font-size: 1.5rem;

            width: fit-content;
            height: fit-content;
        }

        .content {
            color: var(--ime-cool-white);
            font-size: 0.85rem;

            word-break: break-word;
            overflow-wrap: break-word;

            padding-top: 4px;
        }

        .email {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;

            padding-top: 4px;

            .title {
                color: var(--ime-cool-white);
                font-size: 1.5rem;
            }

            .email-address {
                font-size: 0.85rem;
            }
        }

        .github {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;

            padding-top: 4px;

            .title {
                color: var(--ime-cool-white);
                font-size: 1.5rem;
            }

            .github-link {
                font-size: 0.85rem;
            }
        }

        .phone {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;

            padding-top: 4px;
            padding-bottom: 4px;

            .title {
                color: var(--ime-cool-white);
                font-size: 1.5rem;
            }

            .phone-number {
                font-size: 0.85rem;
            }
        }
    }

    .ime_portfolio_projects {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;

        gap: 42px;
        padding-bottom: 14px;

        max-width: 500px;

        .ime_portfolio_project {
            /* background: white; */

            /* border-right: 1px dotted var(--text-color);
            border-bottom: 1px dotted var(--text-color); */

            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;

            gap: 4px;

            padding-bottom: 14px;

            width: inherit;
            /* min-height: 200px; */

            .title {
                color: var(--ime-cool-white);
                font-size: 1.5rem;

                width: fit-content;
                height: fit-content;
            }

            .description {
                color: var(--text-color);
                font-size: 0.85rem;

                word-break: break-word;
                overflow-wrap: break-word;

                padding-top: 4px;

                .emphasis {
                    color: var(--ime-cool-white);
                }
            }

            .links-tech {
                display: flex;
                align-items: flex-start;
                justify-content: center;
                flex-direction: column;

                gap: 4px;

                .tech_stack {
                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                    flex-direction: column;

                    gap: 4px;

                    .title {
                        color: var(--ime-cool-white);
                        font-size: 1.5rem;

                        width: fit-content;
                        height: fit-content;
                    }

                    .info {
                        color: var(--text-color);
                        font-size: 0.85rem;
                    }
                }

                .link {
                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                    flex-direction: column;

                    gap: 4px;

                    .title {
                        color: var(--ime-cool-white);
                        font-size: 1.5rem;

                        width: fit-content;
                        height: fit-content;
                    }

                    .info {
                        color: var(--text-color);
                        font-size: 0.85rem;

                        .url {
                            color: var(--ime-cool-white);

                            text-decoration: none;
                        }

                        .url-development {
                            color: var(--link-color);
                            text-decoration: none;
                        }
                    }
                }
            }
        }
    }
}

/* ------ themes ------ */
body.amber-theme {
    --text-color: #FFB000;
    --prompt-color: #FFB000;
    --cursor-color: #FFB000;

    --link-color: #ffffff;

    --text-color-tr: #ffae0041;
    --crt-color-grad: linear-gradient(rgba(0, 0, 0, 0) 50%, #ffae0015 50%);
}

body.blue-theme {
    --text-color: #00BFFF;
    --prompt-color: #00BFFF;
    --cursor-color: #00BFFF;

    --link-color: #ffffff;

    --text-color-tr: #00bfff4b;
    --crt-color-grad: linear-gradient(rgba(0, 0, 0, 0) 50%, #00bfff21 50%);
}

body.white-theme {
    --text-color: #CCCCCC;
    --prompt-color: #CCCCCC;
    --cursor-color: #CCCCCC;
    --background-color: #1E1E1E;
    /* Darker grey for white theme bg */

    --link-color: #ffffff;

    --text-color-tr: #cccccc56;
    --crt-color-grad: linear-gradient(rgba(0, 0, 0, 0) 50%, #cccccc11 50%);
}

/* --- Utility Classes for Transitions --- */
.hidden {
    opacity: 0;
    pointer-events: none;
    /* Prevents interaction when fading out */
    /* display: none is handled by JS after transition or for non-active screens */
}

.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Global Blinking Cursor */
.blink {
    animation: blink-animation 1s steps(1, end) infinite;
}

@keyframes blink-animation {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes crt-flicker {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.9;
    }

    100% {
        opacity: 1;
    }
}

@media (min-width: 768px) {
    body {
        min-width: 350px;
        min-height: 675px;
    }
}

@media (max-width: 600px) {
    .name_intro {
        font-size: 2.5rem;
    }
}

@media (max-width: 400px) {
    .name_intro {
        font-size: 2rem;
    }
}