/* NK-Forge retro CRT portfolio
   Uses resources/media/CRTface.png as the full website background.
   This CRTface.png is square, so it is intentionally stretched to the browser
   viewport. That makes the CRT frame touch every edge of the user's screen.
*/

:root {
    --crt-green: #39ff6a;
    --crt-green-soft: #8dffa8;
    --crt-green-dim: rgba(57, 255, 106, 0.72);

    /*
      Overlay coordinates for the uploaded CRTface.png.
      These percentages line up the scrollable HTML area with the green screen.
      If the CRT image changes, adjust only these four values first.
    */
    --screen-left: 7.6vw;
    --screen-top: 12vh;
    --screen-width: 83.2vw;
    --screen-height: 68vh;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    overflow: hidden;
    color: var(--crt-green);
    font-family: "Courier New", Courier, monospace;
    background: #050705 url("../media/CRTface.png") no-repeat center center fixed;
    background-size: 100vw 100vh;
}

/* Full-screen canvas. The actual CRT image is on body so there is no outside gap. */
.crt-site {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
}

/* HTML content is constrained to the green glass area. */
.crt-screen {
    position: absolute;
    left: var(--screen-left);
    top: var(--screen-top);
    width: var(--screen-width);
    height: var(--screen-height);
    overflow-y: auto;
    overflow-x: hidden;
    padding: clamp(0.55rem, 1vw, 1rem);
    border-radius: 2.2% / 4.5%;
    background:
        linear-gradient(rgba(0, 255, 60, 0.04) 50%, rgba(0, 0, 0, 0.06) 50%),
        radial-gradient(circle at center, rgba(31, 255, 85, 0.075), rgba(0, 15, 4, 0.04) 70%);
    background-size: 100% 4px, 100% 100%;
    box-shadow:
        inset 0 0 3rem rgba(0, 255, 80, 0.12),
        inset 0 0 1rem rgba(0, 0, 0, 0.45);
    text-shadow: 0 0 0.35rem rgba(57, 255, 106, 0.65);
}

.terminal-window {
    width: 100%;
    min-height: 100%;
    border: 1px solid rgba(57, 255, 106, 0.72);
    background: rgba(0, 10, 3, 0.20);
    padding: clamp(0.55rem, 0.95vw, 0.85rem);
}

.terminal-bar {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: calc(clamp(0.65rem, 1.1vw, 1rem) * -1) calc(clamp(0.65rem, 1.1vw, 1rem) * -1) 1rem;
    padding: 0.45rem 0.65rem;
    border-bottom: 1px solid rgba(57, 255, 106, 0.58);
    color: var(--crt-green-soft);
    font-size: clamp(0.62rem, 0.9vw, 0.82rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero {
    display: grid;
    grid-template-columns: clamp(4.75rem, 7.5vw, 7.5rem) 1fr;
    gap: clamp(1rem, 2vw, 1.8rem);
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(57, 255, 106, 0.62);
}

.profile-photo {
    width: 100%;
    aspect-ratio: 1;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--crt-green);
    box-shadow:
        0 0 1.25rem rgba(57, 255, 106, 0.42),
        inset 0 0 1rem rgba(57, 255, 106, 0.18);
    filter: sepia(0.18) hue-rotate(65deg) saturate(0.95) brightness(0.92);
}

.eyebrow,
.subtitle,
.terminal-footer {
    color: var(--crt-green-soft);
}

h1,
h2,
h3,
p,
ul {
    margin-top: 0;
}

h1 {
    margin-bottom: 0.3rem;
    font-size: clamp(1.8rem, 3.8vw, 3.9rem);
    line-height: 0.95;
    letter-spacing: 0.03em;
}

h2 {
    margin-bottom: 0.65rem;
    color: var(--crt-green-soft);
    font-size: clamp(0.95rem, 1.18vw, 1.15rem);
    letter-spacing: 0.02em;
}

h3 {
    margin-bottom: 0.25rem;
    color: var(--crt-green-soft);
    font-size: clamp(0.88rem, 1.05vw, 1.05rem);
}

p,
li {
    font-size: clamp(0.72rem, 0.86vw, 0.88rem);
    line-height: 1.45;
}

p {
    margin-bottom: 0.7rem;
}

ul {
    padding-left: 1.2rem;
    margin-bottom: 0;
}

li {
    margin-bottom: 0.45rem;
}

strong {
    color: var(--crt-green-soft);
}

a {
    color: var(--crt-green-soft);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

a:hover,
a:focus {
    color: #caffd4;
    text-shadow: 0 0 0.75rem rgba(202, 255, 212, 0.85);
}

.grid {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel {
    border: 1px solid rgba(57, 255, 106, 0.42);
    background: rgba(0, 14, 5, 0.18);
    padding: clamp(0.6rem, 0.95vw, 0.85rem);
}

.project-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.project-list section {
    border-left: 2px solid rgba(57, 255, 106, 0.72);
    padding-left: 0.75rem;
}

.why {
    color: var(--crt-green-dim);
    font-style: italic;
}

.terminal-footer {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(57, 255, 106, 0.45);
    font-size: clamp(0.78rem, 1vw, 0.95rem);
}

.cursor {
    width: 0.6em;
    height: 1em;
    background: var(--crt-green);
    box-shadow: 0 0 0.8rem rgba(57, 255, 106, 0.85);
    animation: blink 1s steps(1) infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

.crt-screen::-webkit-scrollbar {
    width: 0.55rem;
}

.crt-screen::-webkit-scrollbar-track {
    background: rgba(0, 20, 5, 0.9);
}

.crt-screen::-webkit-scrollbar-thumb {
    background: rgba(57, 255, 106, 0.72);
    border: 1px solid rgba(180, 255, 190, 0.38);
    border-radius: 999px;
}

.crt-screen {
    scrollbar-width: thin;
    scrollbar-color: rgba(57, 255, 106, 0.72) rgba(0, 20, 5, 0.9);
}

@media (max-width: 900px) {
    .two-col,
    .project-list {
        grid-template-columns: 1fr;
    }

    .hero {
        grid-template-columns: 5.5rem 1fr;
    }

    p,
    li {
        font-size: clamp(0.76rem, 1.5vw, 0.95rem);
    }
}

@media (max-width: 620px) {
    :root {
        --screen-left: 7.6vw;
        --screen-top: 10.4vh;
        --screen-width: 84.8vw;
        --screen-height: 65.2vh;
    }

    .terminal-bar {
        display: none;
    }

    .hero {
        grid-template-columns: 1fr;
    }

    .profile-photo {
        width: 7rem;
    }

    h1 {
        font-size: 2.2rem;
    }
}