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 a                                     { color: yellow;
                                                  margin-right: 1.5rem;
                                                  font-size: 1.1em; }
.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                                 { }

.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; }
}