/* Personal Portfolio Website Styles */



@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Oleo+Script:wght@400;700&display=swap');



/* CSS Variables */

:root {

    --bg-dark: #13293d;

    --bg-medium: #16324f;

    --bg-light: #18435a;

    --accent-blue: #2a628f;

    --accent-cyan: #3e92cc;

    --text-color: #e0e0e0;

    --border-color: #e0e0e0;

    --retro-bg: #c0c0c0;

    --retro-title-bg: #000275;

    --retro-border-light: #ffffff;

    --retro-border-dark: #454545;

    --retro-text-dark: #000275;

    --font-mono: 'Fira Code', monospace;

    --font-display: 'Oleo Script', cursive;

    --spacing-sm: 0.5rem;

    --spacing-md: 1rem;

    --spacing-lg: 1.5rem;

    --spacing-xl: 2rem;

    --border-width: 2px;

    --border-radius: 5px;

    --transition: 0.3s ease;

}



/* Reset & Base Styles */

*,

*::before,

*::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



body {

    background: hsla(227, 33%, 20%, 1);

    background-image:

        radial-gradient(at 53% 47%, hsla(240, 86%, 65%, 0.27) 0px, transparent 50%),

        radial-gradient(at 0% 0%, hsla(229, 59%, 51%, 0.32) 0px, transparent 50%),

        radial-gradient(at 18% 71%, hsla(229, 100%, 27%, 0.71) 0px, transparent 50%),

        radial-gradient(at 100% 0%, hsla(214, 100%, 53%, 0.71) 0px, transparent 50%),

        radial-gradient(at 71% 100%, hsla(231, 100%, 12%, 1) 0px, transparent 50%),

        radial-gradient(at 90% 67%, hsla(240, 57%, 15%, 1) 0px, transparent 50%),

        radial-gradient(at 28% 0%, hsla(265, 15%, 9%, 1) 0px, transparent 50%),

        radial-gradient(at 57% 13%, hsla(240, 0%, 0%, 1) 0px, transparent 50%);

    color: var(--text-color);

    font: 1rem/1.6 var(--font-mono);

    display: flex;

    flex-direction: column;

    min-height: 100vh;

    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 2l12 12M14 2L2 14' stroke='%23fff' stroke-width='4' stroke-linecap='square'/%3E%3Cpath d='M2 2l12 12M14 2L2 14' stroke='%23000' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") 8 8, auto;

}



#main-content {

    display: flex;

    flex-direction: column;

    min-height: 100vh;

}



/* Typography */

h1,

h2,

h3,

h4,

h5,

h6 {

    font-family: var(--font-display);

    color: var(--text-color);

    margin-bottom: var(--spacing-md);

    font-weight: 400;

    line-height: 1.2;

}



h1 {

    font-size: 3rem;

}



h2 {

    font-size: 2.5rem;

}



h3 {

    font-size: 2rem;

}



h4 {

    font-size: 1.5rem;

}



h5 {

    font-size: 1.25rem;

}



h6 {

    font-size: 1.125rem;

}



p {

    margin-bottom: var(--spacing-md);

}



a {

    color: var(--accent-cyan);

    text-decoration: none;

    transition: var(--transition);

}



a:hover {

    text-decoration: underline;

}



.hidden {

    display: none;

}



/* Header & Navigation */

.main-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: var(--spacing-md) var(--spacing-xl);

    background: linear-gradient(to bottom, var(--bg-medium), transparent);

    /* border-bottom: var(--border-width) solid var(--border-color); */

}



.logo {

    font: 2rem var(--font-display);

    color: var(--text-color);

}



.main-nav ul {

    list-style: none;

    display: flex;

    gap: var(--spacing-lg);

}



.main-nav a {

    font: 1rem var(--font-mono);

    color: var(--text-color);

    padding: var(--spacing-sm);

    /* border: 1px solid transparent; */

    transition: var(--transition);

}



.main-nav a:hover,

.main-nav a.active {

    border-color: var(--accent-cyan);

    color: var(--accent-cyan);

}



.hamburger-menu {

    display: none;

    cursor: pointer;

    font-size: 2rem;

}



/* Main Content & Footer */

main {

    flex: 1;

    padding: var(--spacing-xl);

    max-width: 960px;

    width: 100%;

    margin: 0 auto;

}



footer {

    margin-top: auto;

    text-align: center;

    padding: var(--spacing-md);

    background: linear-gradient(to top, var(--bg-dark), transparent);

    border-top: var(--border-width) solid rgba(224, 224, 224, 0.1);

    font-size: 0.7em;

}



footer p {

    margin-bottom: 0;

}



/* Homepage Layout */

.homepage-main {

    display: flex;

    align-items: center;

    gap: 5rem;

    padding: 1rem;

}



.left-column {

    flex: 1;

    max-width: 45%;

}



.right-column {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: var(--spacing-lg);

}



.main-title {

    font-size: 4rem;

    color: #fff;

    text-shadow:

        0 0 2px #fff,

        0 0 4px #fff,

        0 0 8px var(--accent-cyan),

        0 0 12px var(--accent-cyan),

        0 0 16px var(--accent-blue),

        0 0 20px var(--accent-blue),

        0 0 24px var(--accent-cyan),

        0 0 30px var(--accent-blue);

    animation: neon-flicker 15s infinite;

}



@keyframes neon-flicker {



    0%,

    18%,

    22%,

    25%,

    53%,

    57%,

    100% {

        text-shadow:

            0 0 2px #fff,

            0 0 4px #fff,

            0 0 8px var(--accent-cyan),

            0 0 12px var(--accent-cyan),

            0 0 16px var(--accent-blue),

            0 0 20px var(--accent-blue),

            0 0 24px var(--accent-cyan),

            0 0 30px var(--accent-blue);

    }



    20%,

    24%,

    55% {

        text-shadow: none;

    }



    5% {

        text-shadow:

            0 0 2px #fff,

            0 0 4px var(--accent-cyan),

            0 0 8px var(--accent-cyan),

            0 0 12px var(--accent-blue);

    }



    75% {

        text-shadow:

            0 0 1px #fff,

            0 0 2px var(--accent-cyan),

            0 0 4px var(--accent-blue);

    }



    85% {

        text-shadow: none;

    }



    90% {

        text-shadow:

            0 0 2px #fff,

            0 0 4px var(--accent-cyan),

            0 0 8px var(--accent-cyan),

            0 0 12px var(--accent-blue);

    }



    95% {

        text-shadow: none;

    }

}



.intro-text {

    font-size: 1rem;

    line-height: 1.5;

    margin-top: 1rem;

}



/* Thank You Animation */

#thank-you-message {

    color: var(--accent-cyan);

    font-weight: bold;

    font-size: 1.5rem;

    animation: sparkle 1s infinite alternate;

}



@keyframes sparkle {

    0% {

        opacity: 0.8;

    }



    100% {

        opacity: 1;

        text-shadow: 0 0 2px #6fd9ff;

    }

}



/* Retro Window Components */

.retro-window {

    background: var(--retro-bg);

    border: 5px solid;

    border-color: var(--retro-border-light) var(--retro-border-dark) var(--retro-border-dark) var(--retro-border-light);

    padding: 3px;

}



.retro-window .title-bar {

    background: var(--retro-title-bg);

    padding: 0.5rem var(--spacing-md);

    color: var(--text-color);

    font-weight: bold;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.retro-window .title-bar.titol {

    justify-content: flex-start;

}



.retro-window .title-bar.titol h2 {

    font: bold 1rem var(--font-mono);

    color: var(--text-color);

    margin: 0;

}



.retro-window .title-bar.titol h2 {

    font: bold 1rem var(--font-mono);

    color: var(--text-color);

    margin: 0;

}



.retro-window .title-bar.titol h3 {

    font: bold 1rem var(--font-mono);

    color: var(--text-color);

    margin: 0;

}



.retro-window .title-bar.titol p {

    font-size: 1.2rem;

}



.retro-window .window-body {

    background: #fff;

    border: 5px solid var(--retro-border-dark);

}



.retro-window .window-body-padded {

    padding: 3px;

    text-align: center;

}



.retro-window .window-body-status {

    color: var(--retro-text-dark);

    display: flex;

    align-items: center;

    justify-content: flex-start;

}



#status-w {

    display: flex;

    flex-direction: row;

    gap: 15px;

    padding: 7px;

    align-items: center;

}



#status-propic {

    width: 64px;

    height: 64px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #fff;

    position: relative;

}



#status-propic img {

    width: 64px;

    height: 64px;

    object-fit: cover;

}



#status-text-username {

    font-weight: bold;

    font-size: 1.2rem;

    color: var(--retro-text-dark);

}



#status-text-activity {

    font-size: 0.9rem;

    color: var(--accent-blue);

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    max-width: 37ch;

}



.discord-status {

    width: 18px;

    aspect-ratio: 1 / 1;

    border-radius: 50%;

    display: inline-block;

    margin-left: 8px;

    background-color: gray;

    position: absolute;

    bottom: -5px;

    right: -7px;

    z-index: 1;

    border: 3px solid #fff;

}



.discord-status.online {

    background-color: #43b581;

}



.discord-status.idle {

    background-color: #faa61a;

}



.discord-status.dnd {

    background-color: #f04747;

}



.retro-window img {

    width: 100%;

    display: block;

}



.message-bar-content {

    border: 2px inset #888;

    padding: var(--spacing-sm) var(--spacing-md);

    background: #fff;

    color: var(--retro-text-dark);

    font-weight: bold;

    text-align: left;

    margin-bottom: var(--spacing-md);

}



#whisp-gif {

    width: 50%;

    height: auto;

    display: flex;

    margin: 0 auto;

    flex-direction: row;

    justify-content: flex-start;

    align-items: flex-start;

}



#profile-info1 {

    text-align: right;

    padding: var(--spacing-sm);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-content: center;

    align-items: flex-start;

}



/* Buttons */

.button {

    padding: 0.2rem 1.5rem;

    border: 2px outset var(--retro-border-light);

    background: var(--retro-bg);

    font: bold 1rem var(--font-mono);

    cursor: pointer;

    color: #000;

    transition: var(--transition);

}



.button:active {

    border: 2px inset var(--retro-border-light);

    box-shadow: 1px 1px 0 0 #000;

}



/* Projects Grid */



#projects-grid,

#shop-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: var(--spacing-lg);

}



.project-card {

    border: var(--border-width) solid var(--border-color);

    /* background: var(--bg-medium); */

    transition: var(--transition);

    overflow: hidden;

    display: flex;

    flex-direction: column;

    text-wrap: balance;

}



/*.project-card:hover img {

     transform: scale(1.05); 

}*/



.project-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.3s ease;

}



.project-info {

    border-top: var(--border-width) solid var(--border-color);

    padding: var(--spacing-lg);

    /* background: var(--bg-medium); */

    z-index: 10;

    max-height: 400px;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.project-info h3 {

    font-size: 1.5rem;

    margin-bottom: 0.5rem;

}



#portfolio,

#etsy {

    font-size: 1.3rem;

    text-decoration: underline;

    font-style: italic;

}



.project-info .type {

    background: var(--accent-cyan);

    color: var(--bg-dark);

    padding: 0.2rem var(--spacing-sm);

    border-radius: var(--border-radius);

    font-size: 0.8rem;

    display: inline-block;

    margin-bottom: var(--spacing-sm);

}



.project-info a {

    padding: var(--spacing-sm);

    border: 1px solid white;

    color: white;

    text-align: center;

}



.project-info a:hover {

    /* background: white; */

    color: var(--accent-cyan);

    border-color: var(--accent-cyan);

}



/* Forms */

.intro {

    margin-bottom: 1.3rem;

}



.intro#form {

    margin-top: 2.5rem;

}



.profile-section a {

    color: var(--accent-blue);

}



.form-container {

    display: flex;

    flex-direction: column;

    padding: var(--spacing-md);

}



.form-container label {

    font-weight: bold;

    color: var(--retro-text-dark);

    margin-top: var(--spacing-md);

}



.form-container input,

.form-container textarea {

    width: 100%;

    padding: 0.8rem;

    background: #fff;

    box-shadow: inset 2px 2px 0px rgba(0, 0, 0, 0.5);

    border: none;

    color: var(--retro-border-dark);

    font-family: var(--font-mono);

}



.form-container button {

    margin-top: 1.2rem;

    padding: var(--spacing-sm);

    font-size: 1.3rem;

    cursor: pointer;

    align-self: center;

}



.form-container button:hover {

    color: var(--accent-blue);

}



#contact-form-status {

    text-align: center;

    margin-top: 1rem;

}



/* Guestbook */

#guestbook-entries {

    margin-top: var(--spacing-xl);

    display: flex;

    flex-direction: column;

    gap: var(--spacing-lg);

}



.guestbook-entry {

    background: var(--retro-bg);

    border: 5px solid;

    border-color: var(--retro-border-light) var(--retro-border-dark) var(--retro-border-dark) var(--retro-border-light);

    padding: 10px;

    color: var(--retro-border-dark);

}



.guestbook-entry p {

    margin: 0.5rem 0 0 0;

    text-align: left;

    text-wrap: balance;

}



#guestbook-form {

    padding: var(--spacing-md);

}



.entry-header {

    display: flex;

    justify-content: space-between;

    align-items: baseline;

    margin-bottom: var(--spacing-sm);

    opacity: 0.8;

}



.entry-header .username {

    font-weight: bold;

    color: var(--retro-text-dark);

}



.entry-header .username a {

    color: var(--retro-text-dark);

}



#form-status {

    margin-top: 1rem;

}



/* About Page */

.profile-section {

    display: flex;

    justify-content: flex-start;

    text-align: left;

    text-wrap: balance;

    flex-direction: column;

    gap: var(--spacing-sm);

    padding: var(--spacing-md);

}



.profile-section p strong {

    color: var(--accent-cyan);

    font-size: 1.2rem;

}



#secret {

    color: var(--retro-bg);

}



/* Link Page */

#links p strong,

#for-you p strong {

    color: var(--accent-cyan);

}



.links-section {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: var(--spacing-md);

}



.links-section textarea {

    width: clamp(200px, 100%, 400px);

    height: 60px;

    font-size: 0.8rem;

    padding: var(--spacing-sm);

    background: #fff;

    box-shadow: inset 2px 2px 0px rgba(0, 0, 0, 0.5);

    border: none;

    color: var(--retro-border-dark);

    font-family: var(--font-mono);

    resize: none;

}



.links-section img {

    width: 88px;

    height: 31px;

}



/* Tab Navigation */

.tab-nav {

    display: flex;

    gap: var(--spacing-sm);

    margin: var(--spacing-xl) 0 -2px 0;

    position: relative;

    z-index: 2;

    flex-wrap: wrap;

    flex-wrap: wrap;

}



.tab-link {

    padding: var(--spacing-sm) var(--spacing-md);

    cursor: pointer;

    border: 2px outset var(--retro-border-light);

    background: var(--retro-bg);

    color: var(--retro-text-dark);

    font: bold 1rem var(--font-mono);

    transition: var(--transition);

}



.tab-link.active {

    border-style: inset;

    background: #ddd;

    position: relative;

    top: 2px;

}



.tab-content {

    display: none;

    padding-bottom: var(--spacing-md);

}



.tab-content.active {

    display: block;

}



.tab-content h3 {

    font-size: 1.5rem;

    margin: 0 0 var(--spacing-md) 0;

    border-bottom: var(--border-width) solid var(--border-color);

    padding: var(--spacing-sm) 0;

    background: var(--retro-title-bg);

}



.tab-content h4 {

    margin-top: var(--spacing-lg);

    font-size: 1.3rem;

    color: var(--accent-cyan);

    font-weight: bold;

}



.tab-content p {

    font-size: 1.1rem;

    color: var(--accent-blue);

    font-weight: bold;

}



a {

    background: linear-gradient(#0000 50%, #2c35e366 50%) 0 0 / 100% 200%;

    text-decoration: none;

    transition: background-position .9s ease-in-out;

}



a:hover {

    background-position: 0 100%;

    color: #fff;

}



/* Retro grid for About page */

.retro-grid {

    display: grid;

    grid-template-columns: 140px 1fr;

    grid-template-rows: auto 1fr;

    grid-template-areas:

        "image info1"

        "info2 info2";

    border: 3px solid #2e3b6e;

    background: #b6c6e3;

    /*box-shadow: 0 0 0 4px #fff, 0 0 0 8px #2e3b6e;*/

    overflow: hidden;

    text-align: left;

}



.image-cell {

    grid-area: image;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    background: #fff;

    border-right: 2px solid #2e3b6e;



    border-bottom: 2px solid #2e3b6e;

}



/* Modal Styles */

.modal {

    position: fixed;

    z-index: 1000;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: auto;

    background-color: rgba(0, 0, 0, 0.9);

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

}



.modal.hidden {

    display: none;

}



.modal-content {

    margin: auto;

    display: block;

    width: auto;

    height: auto;

    max-width: 90%;

    max-height: 80vh;

    border: 5px solid var(--border-color);

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

    animation: zoom 0.6s;

}



@keyframes zoom {

    from {

        transform: scale(0)

    }



    to {

        transform: scale(1)

    }

}



.close-modal {

    position: absolute;

    top: 15px;

    right: 35px;

    color: #f1f1f1;

    font-size: 40px;

    font-weight: bold;

    transition: 0.3s;

    cursor: pointer;

}



.close-modal:hover,

.close-modal:focus {

    color: var(--accent-cyan);

    text-decoration: none;

    cursor: pointer;

}



#caption {

    margin: auto;

    display: block;

    width: 80%;

    max-width: 700px;

    text-align: center;

    color: #ccc;

    padding: 10px 0;

    font-family: var(--font-mono);

}



/* Media Query for Mobile Devices */

@media only screen and (max-width: 700px) {

    .modal-content {

        width: 100%;

    }

}



.info1-cell {

    grid-area: info1;

    border-bottom: 2px solid #2e3b6e;

    padding: 24px 18px;

    background: #eaf1fb;

    color: #2e3b6e;

    font-family: 'Courier New', Courier, monospace;

    font-size: 1.05em;

}



.info2-cell {

    grid-area: info2;

    padding: 24px 18px;

    background: #eaf1fb;

    color: #2e3b6e;

    font-family: 'Courier New', Courier, monospace;

    font-size: 1.05em;

}



.image-cell img {

    background: #fff;

}



/* Responsive Design */

@media (max-width: 768px) {

    .main-header {

        flex-direction: column-reverse;

        align-items: flex-start;

        padding: 2.5rem var(--spacing-md);

    }



    .logo {

        position: absolute;

        top: 1rem;

        left: 2rem;

    }



    .main-nav {

        width: 100%;

    }



    .main-nav ul {

        flex-direction: column;

        display: none;

        width: 100%;

        padding-top: 3rem;

    }



    .main-nav ul.visible {

        display: flex;

    }



    .main-nav a {

        display: block;

        text-align: center;

        border: 1px solid var(--border-color);

        margin-top: 0.5rem;

        padding: var(--spacing-md);

    }



    .hamburger-menu {

        display: block;

        position: absolute;

        top: 1rem;

        right: 2rem;

    }



    main {

        padding: 1rem;

    }



    .homepage-main {

        flex-direction: column-reverse;

        gap: var(--spacing-sm);

        padding: 1rem;

        padding-top: var(--spacing-md);

    }



    .left-column {

        max-width: 100%;

        order: 2;

    }



    .right-column {

        order: 1;

        gap: var(--spacing-md);

    }



    .main-title {

        font-size: 2.5rem;

        text-align: center;

    }



    .intro-text {

        text-align: center;

        font-size: 0.9rem;

        margin: var(--spacing-md) 0 0 0;

    }



    .retro-window {

        margin: 0 auto;

    }



    .retro-window .title-bar {

        padding: 0.2rem var(--spacing-sm);

    }



    .retro-window .title-bar.titol h2 {

        font-size: 1.2rem;

    }



    .button {

        padding: 0.3rem 2rem;

        font-size: 1.1rem;

    }



    h1,

    h2,

    h3,

    h4,

    h5,

    h6 {

        text-align: center;

    }



    h1 {

        font-size: 2.5rem;

    }



    h2 {

        font-size: 2rem;

    }



    h3 {

        font-size: 1.5rem;

    }



    /* Status section mobile responsiveness - keep horizontal layout */

    #status-w {

        gap: 15px;

        padding: 4px;

    }



    #status-propic {

        width: 48px;

        height: 48px;

        flex-shrink: 0;

    }



    #status-propic img {

        width: 48px;

        height: 48px;

    }



    #status-text {

        min-width: 0;

        flex: 1;

    }



    #status-text-username {

        font-size: 0.95rem;

        line-height: 1.2;

    }



    #status-text-activity {

        font-size: 0.8rem;

        max-width: none;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

    }



    .discord-status {

        width: 14px;

        bottom: -3px;

        right: -5px;

        border: 2px solid #fff;

    }



    .retro-window .window-body-status {

        padding: 4px;

    }



    .retro-grid {

        grid-template-columns: 1fr;

        grid-template-rows: auto auto auto;

        grid-template-areas:

            "image"

            "info1"

            "info2";

    }



    .image-cell {

        border-right: none;

        border-bottom: 2px solid #2e3b6e;

    }



    .info1-cell {

        border-bottom: 2px solid #2e3b6e;

    }

}



@media (max-width: 480px) {

    #status-w {

        gap: 15px;

        padding: 3px;

    }



    #status-propic {

        width: 40px;

        height: 40px;

    }



    #status-propic img {

        width: 40px;

        height: 40px;

    }



    #status-text-username {

        font-size: 0.85rem;

    }



    #status-text-activity {

        font-size: 0.75rem;

    }



    .discord-status {

        width: 12px;

        bottom: -2px;

        right: -4px;

        border: 2px solid #fff;

    }

}



#scanlines {

    width: 100vw;

    height: 100vh;

    opacity: 0.2;

    pointer-events: none;

    overflow: hidden;

    position: fixed;

    top: 0;

    left: 0;

    max-width: 100%;

    z-index: 9999;

}



#scanlines:before,

#scanlines:after {

    display: block;

    pointer-events: none;

    content: "";

    position: absolute;

}



#scanlines:before {

    width: 100%;

    height: 2px;

    z-index: 2147483649;

    background: rgba(0, 0, 0, 0.3);

    opacity: 0.75;

    animation: scanline 6s linear infinite;

}



#scanlines:after {

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 2147483648;

    background: linear-gradient(to bottom,

            transparent 50%,

            rgba(0, 0, 0, 0.3) 51%);

    background-size: 100% 4px;

    animation: scanlines 1s steps(60) infinite;

}





@keyframes scanline {

    0% {

        transform: translate3d(0, 200000%, 0);

    }

}



@keyframes scanlines {

    0% {

        background-position: 0 50%;

    }

}



div {

    margin: 0;

    padding: 0;

}