html, body { 
    margin: 0;                                             
    padding: 0; 
}

body { 
    font-family: monospace;                                                
    font-size: 10pt;                                              
    color: #ddd;                                                
    background-color: #111;                                                
    line-height: 1.4em;                                              
    display: flex;                                               
    flex-direction: column;                                               
    min-height: 100vh; 
}

a { 
    color: LimeGreen;                                                 
    text-decoration: none; 
}

a:hover { 
    text-decoration: underline; 
}

h1, h2, h3 { 
    font-weight: 700;                                                
    color: #fff; 
}

body > header { 
    width: 50rem;                                                
    max-width: 96%;                                                
    margin: 0 auto;                                                 
    padding: 1rem 0;                                                
    color: #fff;                                                
    border-bottom: 1px solid #333; 
}

body > header h1 { 
    font-size: 1.5em;                                                
    margin: 0 0 0.5rem 0; 
}

.banner {
    display: flex;
    justify-content: center;       
    margin: 0 auto;
}

.banner pre {
    display: inline-block;
    font-family: monospace;
    white-space: pre;           
    text-align: left;            
    margin: 0 auto;     

}

body > header p { 
    opacity: 0.8;                                                 
    color: #ccc;                                               
    margin: 0 0 1rem 0; 
}

#main-nav { 
    display: flex;                                                
    justify-content: center;                                                
    flex-wrap: wrap;                                                
    gap: 0.75em;                                              
    line-height: 1.2; 
}

#main-nav a { 
    color: #ccc;                                                 
    text-decoration: none;                                                
    font-size: 1.2em;                                                
    padding: 0.1em 0.2em;                                   
    transition: color 0.2s ease;                                     
    position: relative;                                                
    display: inline-flex;                                                 
    align-items: baseline; 
}

#main-nav a.active-nav-item, #main-nav a.active-nav-item::before, #main-nav a.active-nav-item::after { 
    color: #fff; 
}

#main-nav a::before, #main-nav a::after { 
    color: #666;
    transition: color 0.2s ease; 
    font-weight: normal; 
}

#main-nav a::before { 
    content: "[";                                          
    margin-right: 0.4em; 
}
#main-nav a::after { 
    content: "]";                                                 
    margin-left: 0.4em 
}

#main-nav a:hover,#main-nav a:focus {          
    color: LimeGreen; 
}

#main-nav a:hover::before, #main-nav a:hover::after, #main-nav a:focus::before, #main-nav a:focus::after { 
    color: LimeGreen; 
}

.content-wrapper { 
    display: flex;
    width: 50rem;                                                    
    max-width: 96%;                                                  
    margin: 2rem auto;                                                  
    gap: 2rem;                                                  
    flex: 1; 
}

.profile-info { 
    flex: 0 0 180px;                                                 
    text-align: left; 
}

.profile-info h3 { 
    margin-top: 0;                                                  
    margin-bottom: 0.5rem;                                                  
    font-size: 1.2em; 
    color: Limegreen;
}

.profile-info h4 { 
    font-size: 1em;                                                  
    color: #bbb;                                                  
    margin-top: 1.5rem;                                                  
    margin-bottom: 0.75rem;                                                  
    font-weight: normal;                                                  
    border-bottom: 1px solid #333;                                                   
    padding-bottom: 0.25rem; 
}

.profile-info p { 
    font-size: 0.9em;                                                  
    color: #aaa;                                                  
    margin-bottom: 0.75rem;                                                  
    line-height: 1.3; 
}

.profile-info p em { 
    color: #ccc; 
}

.profile-info details.contacts summary { 
    font-size: 1em;                                                  
    color: #bbb;                                                  
    font-weight: bold;                                                  
    padding: 0.6em 0.2em 0.6em 0;                                                 
    cursor: pointer;                                                  
    list-style: none;                                                  
    transition: color 0.2s ease, border-color 0.2s ease;                                                  
    border-bottom: 1px solid #333;                                                  
    display: block; 
}

.profile-info details.contacts summary::-webkit-details-marker, .profile-info details.contacts summary::marker { 
    display: none 
}

.profile-info details.contacts summary:focus { 
    outline: none; 
}

.profile-info details.contacts summary:focus-visible { 
    box-shadow: 0 0 0 2px #111, 0 0 0 4px LimeGreen;                                                        
    border-bottom-color: transparent; 
}

.profile-info details.contacts summary::before { 
    content: "[+] ";                                                 
    color: #888;                                                 
    font-weight: normal;                                                 
    display: inline;                                                 
    margin-left: 0.2em;                                                 
    transition: color 0.2s ease; 
}

.profile-info details.contacts summary:hover, .profile-info details.contacts summary:hover::before { 
    color: #fff; 
}

.profile-info details.contacts[open] > summary  { 
    color: LimeGreen;
                                                  
    border-bottom-color: LimeGreen; 
}

.profile-info details.contacts[open] > summary:focus-visible { 
    border-bottom-color: transparent; 
}

.profile-info details.contacts[open] > summary::before { 
    content: "[-] ";                                                         
    color: LimeGreen; 
}

.profile-info details.contacts[open] .contact-details { 
    margin: 0;                                                        
    padding: 0.75em 0.5em 0.5em calc(0.2em + 3ch + 0.2em);                                                        
    font-size: 0.9em;                                                        
    background-color: #161616;                                                        
    border-bottom-left-radius: 3px;                                                        
    border-bottom-right-radius: 3px; 
}

.contact-details { 
    margin: 0;                                                  
    padding: 0;                                                  
    font-size: 0.9em; 
}
.contact-details dt {
    color: #aaa;                                                   
    font-weight: bold;                                                  
    margin-bottom: 0.1em;                                                  
    margin-top: 0.5em; 
}

.contact-details dt:first-of-type { 
    margin-top: 0; 
}

.contact-details dd { 
    margin-left: 0;                                     
    margin-bottom: 0.5em;                                            
    color: #ddd; 
}

.contact-details dd a { 
    color: LimeGreen; 
}

.contact-details dd a:hover { 
    text-decoration: underline; 
}

.main-content { 
    flex: 1;                   
    min-width: 0; 
}

.main-content section { 
    margin-bottom: 2.5rem;                                                  
    padding: 1.5rem;                                                  
    background-color: #161616;                                                  
    border: 1px solid #282828;                                                  
    border-radius: 4px; 
}

.main-content section:last-child { 
    margin-bottom: 0; 
}

.main-content h2 { 
    font-size: 1.3em;                                                  
    margin-top: 0;                                                  
    margin-bottom: 1rem;                                                  
    padding-bottom: 0.5rem;                                                  
    border-bottom: 1px solid #444;
}

.prompt { 
    color: #8AE234;                                                  
    margin-right: 0.5em;                                                  
    user-select: none; 
}

.main-content p, .main-content ul { 
    margin-bottom: 1em; 
}

.main-content ul { 
    list-style-type: none;                                                  
    padding-left: 0; 
}

.main-content ul li { 
    padding-left: 1.75em;                                                  
    position: relative;                                                  
    margin-bottom: 0.5em; 
}

.main-content ul li::before { 
    content: '»';                                             
    color: LimeGreen;                                                 
    position: absolute;                                                 
    left: 0.5em;                                                 
    font-weight: bold; 
}

.project-item { 
    margin-bottom: 1.5rem;                                                 
    padding-bottom: 1.5rem;                                                  
    border-bottom: 1px dashed #333; 
}

.project-item:last-child {
    border-bottom: none;                                                
    margin-bottom: 0;                                                 
    padding-bottom: 0; 
}

.project-item h3 { 
    font-size: 1.1em;                                              
    color: #eee;                                           
    margin-top: 0;                                                
    margin-bottom: 0.5rem; 
}

.project-item p { 
    margin-bottom: 0.5rem;                                                  
    color: #ccc; 
}

.project-item a { 
    font-weight: bold; 
}

body > footer { 
    width: 50rem;                                          
    max-width: 96%;                                         
    margin: 0 auto;                                             
    padding: 1.5rem 0;                                              
    color: #aaa;                                             
    text-align: center;                                              
    border-top: 1px solid #333;                                                
    margin-top: auto; 
}

body > footer img { 
    margin: 0 5px;                                             
    vertical-align: middle;                                               
    border-radius: 4px; 
}

body > footer p { 
    margin-top: 0.75rem;                                                 
    font-size: 0.9em; 
}

@media (max-width: 768px) {
        body > header, .content-wrapper, body > footer { 
            width: 90%; 
        }

        .content-wrapper { 
            flex-direction: column;                                                  
            align-items: center;                                                  
            margin-top: 1.5rem;                                                  
            margin-bottom: 1.5rem;                                         
            gap: 1.5rem; 
        }

        .profile-info { 
            flex: 0 0 auto;                                                 
            width: 100%;                                                  
            max-width: 350px;                                                    
            text-align: center;                                                  
            margin-bottom: 1rem; 
        }

        #profile-pic { 
            margin-left: auto;                                                  
            margin-right: auto; 
        }

        .profile-info p { 
            text-align: center; 
        }

        .profile-info a { 
            display: inline-block;                                                  
            padding: 0.2em 0; 
        }


        .main-content section { 
            padding: 1rem; 
        }

        .main-content h2 { 
            font-size: 1.2em; 
        }

        body > header h1 { 
            font-size: 1.3em; 
        }
}

@media (max-width: 480px) {
        body { 
            font-size: 9.5pt; 
        }

        body > header, .content-wrapper, body > footer { 
            width: 95%; 
        }

        .main-content section { 
            padding: 0.8rem; 
        }

        #profile-pic { 
            width: 100px;                                                 
            height: 100px; 
        }

        .main-content ul li { 
            padding-left: 1.5em; 
        }

        .main-content ul li::before { 
            left: 0.2em; 
        }
}