#header {
    position: relative;
    padding: clamp(3.75rem, 7.82vw, 6.25rem) .5rem;
}
#header .img-box {
    display: inline-block;
    border-radius: 1000px;
    border: 5px solid var(--secondary);
    height: 125px;
    width: 125px;
}
#header .img-box img {
    border-radius: 1000px;
    width: 100%;
    height: 100%;
}
#header .top {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.5rem;
}
#header .top .my-name {
    position: relative;
}
@media (max-width: 32rem) {
    #header .top .my-name {
        max-width: min-content;
    }
}
#header .top .my-name::before {
    content: '';
    position: absolute;
    height: 8px;
    width: 100%;
    background-color: var(--headerTextColor);
    bottom: -16px;
}

#dark-mode-toggle {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 64px;
    height: 64px;
    overflow: hidden;
    cursor: pointer;
}
#dark-mode-toggle > * {
  position: absolute;
  fill: var(--secondary);
  transition: transform 0.3s ease;
}

#dark-mode-toggle .moon {
  transform: translateY(-100%);
}

[data-theme="dark"] #dark-mode-toggle .sun {
  transform: translateY(100%);
}

[data-theme="dark"] #dark-mode-toggle .moon {
  opacity: 1;
  transform: translateY(0);
}