/* Custom theme applied to all pages */

/* Typing animation for typewriter effect */
@keyframes typewriter {
    from { 
        width: 0; 
        white-space: nowrap; 
    }
    to { 
        width: 27ch; 
        white-space: nowrap; 
    }
}

@keyframes blinkTextCursor {
    from { border-right-color: rgba(255, 0, 0, 0.75); }
    to { border-right-color: transparent; }
}

.typewriter {
    overflow: hidden;
    border-right: 0.15em solid rgba(255, 0, 0, 0.75); /* Cursor for dark mode */
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: 0.1em;
    font-weight: bold;
    color: rgb(239, 68, 68); /* Dark mode text color */
    font-size: 1rem;
    display: inline-block;
    width: 0;
    animation:
        typewriter 4s steps(27) 1s 1 normal forwards,
        blinkTextCursor 0.75s steps(27) infinite normal;
}

/* Light mode typewriter text */
body.light-mode .typewriter {
    border-right: 0.15em solid rgba(0, 102, 204, 0.75); /* Blue cursor */
    color: rgb(0, 102, 204); /* Blue text for light mode */
}

/* Typewriter container styling */
.typewriter-container {
    display: inline-block;
    background-color: black; /* Default dark mode background */
    border: 2px solid red; /* Default dark mode border */
    padding: 0.5rem;
    margin-bottom: 2rem;
    width: 90%;
    height: auto;
    min-height: 4rem;
    overflow: hidden;
    max-width: calc(100% - 2rem);
    white-space: normal;
    word-break: break-word;
}

/* Light mode typewriter container */
body.light-mode .typewriter-container {
    background-color: white; /* Light mode background */
    border: 2px solid rgb(0, 102, 204); /* Light mode border (blue) */
}

/* Navbar Styles */
nav {
    background-color: rgb(31, 41, 55); /* Dark navbar background */
    color: rgb(239, 68, 68); /* Default red text */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Navbar links for dark mode */
.navbar-text {
    color: rgb(239, 68, 68); /* Dark mode text color */
    transition: color 0.3s ease;
}

.navbar-text:hover {
    color: rgb(248, 113, 113); /* Lighter red on hover */
}

/* Light mode navbar */
body.light-mode nav {
    background-color: rgb(240, 243, 247); /* Light mode navbar background */
    color: rgb(0, 102, 204); /* Light mode text color */
}

/* Light mode navbar links */
body.light-mode .navbar-text {
    color: rgb(0, 102, 204); /* Blue links */
}

body.light-mode .navbar-text:hover {
    color: rgb(0, 51, 102); /* Darker blue on hover */
}

/* Portfolio container and layout */
.portfolio-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(17, 24, 39); /* Dark background */
}

/* Light mode portfolio container */
body.light-mode .portfolio-container {
    background-color: rgb(240, 243, 247); /* Light background */
}

.content-wrapper {
    text-align: center;
    color: white;
    padding: 1rem;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}

/* Light mode text color for content wrapper */
body.light-mode .content-wrapper {
    color: rgb(51, 51, 51); /* Dark text for light mode */
}

/* Buttons in portfolio */
.portfolio-button {
    background-color: black;
    color: rgb(239, 68, 68); /* Button text color */
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(239, 68, 68); /* Red border */
    transition: background-color 300ms ease, color 300ms ease;
    margin-bottom: 1rem;
}

.portfolio-button:last-child {
    margin-bottom: 0;
}

.portfolio-button:hover {
    background-color: rgb(31, 41, 55); /* Darker background on hover */
    color: white; /* White text on hover */
}

/* Light mode buttons */
body.light-mode .portfolio-button {
    background-color: rgb(240, 243, 247); /* Light gray background */
    color: rgb(0, 102, 204); /* Blue text */
    border: 1px solid rgb(0, 102, 204); /* Blue border */
}

body.light-mode .portfolio-button:hover {
    background-color: rgb(220, 230, 240); /* Slightly darker gray */
    color: rgb(0, 51, 102); /* Darker blue text */
}