@import url('https://fonts.cdnfonts.com/css/fira-sans');

:root {
     --terminal-green: #00ff00;
     --terminal-dark-green: #00cc00;
     --terminal-black: #0c0c0c;
     --font-mono: 'Fira Sans', sans-serif;
}

* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

body {
     background-color: var(--terminal-black);
     color: var(--terminal-green);
     font-family: var(--font-mono);
     line-height: 1.6;
     padding: 20px;
     max-width: 900px;
     margin: 0 auto;
     height: 100vh;
     overflow: hidden;
     display: flex;
     flex-direction: column;
}

.terminal-header {
     border-bottom: 1px solid var(--terminal-green);
     padding-bottom: 10px;
     margin-bottom: 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
}

.terminal-window {
     flex: 1;
     overflow-y: auto;
     padding-right: 10px;
}

.terminal-prompt {
     display: flex;
     margin-bottom: 15px;
}

.prompt-sign {
     color: var(--terminal-green);
     margin-right: 10px;
}

.prompt-command {
     color: var(--terminal-green);
     font-weight: bold;
}

.response {
     padding-left: 20px;
     margin-bottom: 20px;
}

.input-line {
     display: flex;
     align-items: center;
     margin-top: 20px;
     border-top: 1px solid var(--terminal-dark-green);
     padding-top: 20px;
}

#user-input {
     background: transparent;
     border: none;
     color: var(--terminal-green);
     font-family: var(--font-mono);
     font-size: 16px;
     flex: 1;
     outline: none;
}

a {
     color: var(--terminal-green);
     text-decoration: underline;
}

a:hover {
     color: var(--terminal-dark-green);
}

.blink {
     animation: blink 1s infinite;
}

@keyframes blink {
     0%,
     100% {
          opacity: 1;
     }
     50% {
          opacity: 0;
     }
}

.hidden {
     display: none;
}

.skills-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
     gap: 10px;
}

.projects-list {
     margin-left: 20px;
}

.project-item {
     margin-bottom: 15px;
}

.tab-content {
     display: none;
}

.tab-content.active {
     display: block;
}

.timestamp {
     color: var(--terminal-dark-green);
     font-size: 14px;
}