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: yellow;
                                                  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; }
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: yellow; }
#main-nav a:hover::before,
#main-nav a:hover::after,
#main-nav a:focus::before,
#main-nav a:focus::after                        { color: yellow; }

.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-pic                                    { width: 120px;
                                                  height: 120px;
                                                  border-radius: 50%;
                                                  border: 3px solid #444;
                                                  margin-bottom: 1rem;
                                                  display: block; }
.profile-info h3                                { margin-top: 0;
                                                  margin-bottom: 0.5rem;
                                                  font-size: 1.2em; }
.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 a                                 { }
.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 yellow; 
                                                       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: yellow;
                                                  border-bottom-color: yellow; }
.profile-info details.contacts[open] > summary:focus-visible { border-bottom-color: transparent; }
.profile-info details.contacts[open] > summary::before { content: "[-] ";
                                                         color: yellow; }
.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: yellow; }
.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: yellow;
                                                  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; }
}