/* filepath: /home/femar/AO3/fescii.github.io/assets/css/desktop.css */

/* Desktop-specific styles */
@media screen and (min-width: 1200px) {
    .terminal-container {
        max-width: 1200px;
    }
    
    .terminal-body {
        padding: 20px;
    }
    
    .terminal-content {
        margin-bottom: 20px;
    }
    
    .profile-badge {
        width: 60px;
        height: 60px;
    }
    
    .status-dot {
        width: 14px;
        height: 14px;
    }
}

/* Animation for the cursor */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Custom styling for the input cursor */
input#terminal-input::after {
    content: '|';
    animation: blink 1s step-end infinite;
    margin-left: 2px;
    color: var(--cmd-highlight);
}

/* Fullscreen mode for presentation */
.fullscreen-mode .terminal-container {
    width: 100%;
    height: 100vh;
    max-width: none;
    border-radius: 0;
}

/* Hover effects for commands */
.command-input:hover {
    text-decoration: underline;
    cursor: pointer;
}

/* Enhance window controls */
.window-controls .control {
    transition: transform 0.2s ease;
}

.window-controls .control:hover {
    transform: scale(1.1);
}

/* Add nice transition to theme changes */
body, .terminal-container, .terminal-header, .terminal-body,
.output-line, .profile-badge, #terminal-input {
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* Adding a hint of depth to the profile badge */
.profile-badge:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}