@import 'https://fonts.googleapis.com/css?family=Inconsolata';

html {
    height: 100%;
}

body {
    box-sizing: border-box;
    height: 100%;
    margin: 0;
    background-color: #000000;
    background-image: radial-gradient(#11581E, #041607), url("https://media.giphy.com/media/oEI9uBYSzLpBK/giphy.gif");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-family: 'Inconsolata', Helvetica, sans-serif;
    font-size: 1.2rem;
    color: rgba(128, 255, 128, 0.8);
    text-shadow: 0 0 1ex rgba(51, 255, 51, 1), 0 0 2px rgba(255, 255, 255, 0.8);
    overflow: hidden; /* Hides the body's scrollbars */
}

.noise {
    pointer-events: none;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://media.giphy.com/media/oEI9uBYSzLpBK/giphy.gif");
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
    opacity: .02;
}

.overlay {
    pointer-events: none;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%);
    background-size: auto 4px;
    z-index: 1;
}

.overlay::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    background-image: linear-gradient(0deg, transparent 0%, rgba(32,128,32,0.2) 2%, rgba(32,128,32,0.8) 3%, rgba(32,128,32,0.2) 3%, transparent 100%);
    background-repeat: no-repeat;
    animation: scan 7.5s linear 0s infinite;
}

@keyframes scan {
    0% { background-position: 0 -100vh; }
    35%, 100% { background-position: 0 100vh; }
}

#content-container {
box-sizing: border-box;
height: 100vh; /* Occupies the full height of the window */
overflow-y: auto; /* Enables scrolling only when needed */
padding: 1.5rem;
text-transform: uppercase;
}

#terminal-output {
white-space: pre-wrap;
word-wrap: break-word;
}

.input-line {
    display: flex;
    align-items: center;
    margin-top: 0.5em; /* A bit of space above the input line */
}

.prompt {
    margin-right: 0.5em;
    color: white;
}

#terminal-input {
background: transparent;
border: none;
outline: none;
color: white;
font-family: inherit;
font-size: inherit;
width: 100%;
text-shadow: 0 0 4px white;
}

/* The rest of the styles remain unchanged */
.hidden-section { display: none; }
.experience, .education-entry { margin-bottom: 2rem; }
.date, .title, .location, .language-name, .interest-title { color: #fff; font-weight: bold; }
.description, .education-description { margin-top: 0.5rem; }
.language { margin-bottom: 1.5rem; }
.language-progress-container { width: 100%; max-width: 500px; height: 20px; background-color: rgba(128, 255, 128, 0.2); border: 1px solid rgba(128, 255, 128, 0.4); margin-top: 0.5rem; }
.language-progress { height: 100%; background-color: rgba(128, 255, 128, 0.8); width: 0; transition: width 1s ease-in-out; }
.carousel { text-align: center; }
.interest { display: none; }
.interest:first-child { display: block; }
.interest-image { width: 200px; height: 200px; background-size: cover; background-position: center; border-radius: 50%; margin: 1rem auto; border: 2px solid rgba(128, 255, 128, 0.8); }
.cyber-security-img { background-image: url('files/cybersecurity_bg.jpeg'); }
.system-administration-img { background-image: url('files/systemadministration_bg.jpg'); }
.motion-graphics-img { background-image: url('files/motiongraphics_bg.jpg'); }
.guitar-img { background-image: url('files/guitar_bg.jpg'); }

/* NEW STYLE for the hint text */
.exit-hint {
    margin-top: 2rem;
    color: #fff;
    font-style: italic;
    opacity: 0.7;
}

/* Mobile Optimization */
@media (max-width: 768px) {
    body { font-size: 1rem; }
    #content-container { padding: 1rem; }
    .interest-image { width: 150px; height: 150px; }
}