:root{
--bg-color:#0d0208;
--text-main:#00ff41;
--text-dim:#008f11;
--text-white:#e0e0e0;
--prompt-user:#00ff41;
--prompt-path:#5dade2;
}

*{box-sizing:border-box}

body{
background-color:var(--bg-color);
color:var(--text-main);
font-family:'VT323',monospace;
font-size:1.4rem;
margin:0;
padding:40px 20px;
overflow-x:hidden;
}

.scanlines{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.15) 50%);background-size:100% 4px;z-index:10;pointer-events:none}

.terminal-loader{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--bg-color);z-index:9999;display:flex;align-items:center;justify-content:center;animation:fadeUp .6s steps(10) forwards}
.terminal-loader::after{content:"LOADING_SYSTEM_CORE...";animation:blink .2s infinite}
.project-loader::after{content:"SCANNING_FILESYSTEM..."}

@keyframes fadeUp{0%{transform:translateY(0)}100%{transform:translateY(-100%);visibility:hidden}}

.terminal-container{max-width:1100px;margin:0 auto;z-index:5;position:relative;padding:0 16px}

.terminal-nav{margin-bottom:20px;border-bottom:1px double var(--text-dim);padding-bottom:10px}
.terminal-nav a{margin-right:14px;color:var(--text-dim);text-decoration:none}
.terminal-nav a.active{color:var(--text-main);text-shadow:0 0 10px var(--text-main)}

.ascii-art pre{font-size:.85rem;line-height:1.1;text-shadow:0 0 5px var(--text-main);margin:0}


.ascii-art pre,.tux-art pre{max-width:100%;display:block;overflow-x:auto;padding:0 8px;box-sizing:border-box;white-space:pre}

.prompt-line{margin:12px 0}
.user{color:var(--prompt-user);font-weight:700}
.path{color:var(--prompt-path)}
.command{color:var(--text-white)}
.output{padding-left:18px;color:var(--text-dim)}

.tech-table{width:100%;border:1px solid var(--text-dim);border-collapse:collapse;margin:10px 0}
.tech-table th{background:var(--text-dim);color:var(--bg-color);padding:6px;text-align:left}
.tech-table td{padding:6px 10px;border-bottom:1px dashed var(--text-dim)}

.project-item{margin-bottom:26px}
.tree-symbol{color:var(--text-dim)}
.project-name{color:var(--text-white);font-weight:700;font-size:1.25rem}
.project-tag{color:#f1c40f;font-size:.9rem;margin-left:10px}
.project-content{margin-left:16px;border-left:1px solid var(--text-dim);padding-left:16px}
.tech-used{color:var(--prompt-path);margin:5px 0;font-size:1.05rem}

a{color:var(--text-white);text-decoration:none}
a:hover{background:var(--text-main);color:var(--bg-color)}

.cursor{display:inline-block;width:10px;height:1.4rem;background:var(--text-main);animation:blink .8s step-end infinite;vertical-align:middle}
@keyframes blink{50%{opacity:0}}

.contact-loader::after{content:"ESTABLISHING_SECURE_CONNECTION..."}

.contact-list{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.contact-item{display:flex;align-items:center}
.contact-item .label{width:110px;color:var(--text-white);font-weight:700}
.text-white{color:var(--text-white);text-shadow:0 0 5px var(--text-white)}

.lang-switcher{position:absolute;top:10px;right:20px;font-size:1rem;z-index:100}
.lang-btn{background:transparent;border:1px dashed var(--text-dim);color:var(--text-dim);padding:4px 10px;cursor:pointer;font-family:'VT323',monospace;transition:.2s}
.lang-btn:hover,.lang-btn.active{background:var(--text-main);color:var(--bg-color);border-style:solid;box-shadow:0 0 10px var(--text-main)}

.header-container{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;margin-bottom:1.5rem;gap:18px}
.tux-art pre{color:var(--text-main);font-size:.9rem;line-height:1.1;text-shadow:0 0 5px var(--text-main);margin:0}

.ascii-art pre{margin:0;flex-grow:1}

@media (max-width:900px){body{font-size:1.25rem}.terminal-container{max-width:900px;padding:0 12px}.project-name{font-size:1.15rem}}


@media (max-width:600px){
	body{padding:20px 12px;font-size:1.05rem}
	.header-container{flex-direction:column;align-items:center;text-align:center}
	.tux-art{display:block}
	.ascii-art pre,.tux-art pre{font-size:0.62rem;padding:0 6px}
	.lang-switcher{position:static;margin:10px 0}
	.contact-item{flex-direction:column;align-items:flex-start;gap:6px}
	.project-content{margin-left:0;border-left:none;padding-left:0}
	.tech-table th,.tech-table td{padding:8px}
	.tech-table{display:block;overflow:auto;-webkit-overflow-scrolling:touch}
}

@media (max-width:400px){body{font-size:.95rem;padding:14px 10px}.project-name{font-size:1rem}.lang-btn{padding:3px 6px}}