#content-container {
    display: flex;
    width: 90%;
    max-width: 900px;
    background: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    overflow: hidden;
    z-index: 2;
    border: 1px solid rgb(84, 198, 255);

    /* Add margin for spacing */
    margin: 3rem auto 2rem auto; /* top, right/left, bottom */
}

#text-block {
    background-color: #0f172a;
    color: white;
    padding: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#text-block h2 {
    font-size: 2em;
    margin-bottom: 10px;
    color: #38bdf8;
}

#text-block p {
    font-size: 1.1em;
}

#code-block {

    flex: 1;
    background: #282c34;
    color: white;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center the content */
    overflow: hidden;
    /* Hide overflow */
}

pre {
    background-color: transparent;
    padding: 0;
    margin: 0;
    font-family: 'Fira Code', 'Courier New', Courier, monospace;
    font-size: 14px;
    width: 100%;
    /* Make sure it takes up the full width */
    word-wrap: break-word;
    /* Allow text to wrap to the next line */
    white-space: pre-wrap;
    /* Allows content to wrap to the next line if it's too long */
}

.code-highlight {
    color: #c678dd;
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

.typing-effect {
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    animation: typing 4s steps(60, end) infinite alternate;
    border-right: 2px solid white;
}

/* Syntax Highlighting */
.keyword {
    color: #c678dd;
}

.function {
    color: #61afef;
}

.variable {
    color: #d19a66;
}

.string {
    color: #98c379;
}


/* 📱 For narrow screens → stack vertically */
@media (max-width: 768px) {
    #content-container {
        position: relative;      /* remove absolute so it flows */
        top: auto;
        left: auto;
        transform: none;
        flex-direction: column;  /* stack */
        margin: 20px auto;
        width: 95%;
    }

    #text-block,
    #code-block {
        width: 100%;
        flex: unset;
    }
}

/* 📏 For short screens → scrollable */
@media (max-height: 500px) {
    #content-container {
        position: relative;   /* don’t force absolute on tiny height */
        top: auto;
        left: auto;
        transform: none;
        max-height: 85vh;
        overflow-y: auto;
        margin: 10px auto;
    }
}