* {
    font-family: "JetBrains Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

body {
    color: oklch(85% 0 0);
    background-color: oklch(19% 0 0);
}

.light-mode {
  background-color: oklch(95% 0 0);
  color: oklch(19% 0 0);
}

a {
    color: oklch(60% 0.12 310);
    text-decoration: none;
}

a.social-link {
    font-size: 12px;
    margin-top: 4px;
}

a.social-link-one {
    font-size: 12px;
    margin-top: 0px;
}

button {
    color: oklch(60% 0.12 310);
    background-color: oklch(27% 0 0);
    padding: 8px;

    border-style: none;
    cursor: pointer;
}

button:hover {
    background-color: oklch(31% 0 0);
}

button:active {
    background-color: oklch(27% 0 0);
}

.light-mode button {
    color: oklch(60% 0.12 310);
    background-color: oklch(86% 0 0);
    padding: 8px;

    border-style: none;
    cursor: pointer;
}

.light-mode button:hover {
    background-color: oklch(92% 0 0);
}

.light-mode button:active {
    background-color: oklch(86% 0 0);
}

div.headbar {
  position: sticky;
  top: 0;

  padding: 8px;
  display: flex;
  background-color: oklch(23% 0 0);

  color: oklch(75% 0.12 310);
}

.light-mode .headbar {
  position: sticky;
  top: 0;

  padding: 8px;
  display: flex;
  background-color: oklch(72% 0 0);

  color: oklch(75% 0.12 310);
}

div.content {
    padding-left: 12%;
    padding-right: 12%;
    padding-top: 2%;
}

div.headbar-notice {
    margin-left: auto; 
    margin-right: 0;
    margin-top: auto;
    margin-bottom: auto;
}

p.headbar-notice {
    color: oklch(42% 0 0);
    margin: 0;
    height: 100%;
}

.light-mode p.headbar-notice {
    color: oklch(64% 0 0);
    margin: 0;
    height: 100%;
}

div.profile-card {
    display: flex;
}

div.profile-card-content {
    display: flex;
    flex-direction: column;
}

div.project-content {
    display: flex;
    flex-direction: column;
    margin-left: 4%;
    margin-right: 4%;
}

.profile-card-content p {
    margin-top: 0;
}

p.divider {
    color: oklch(42% 0 0);
    font-style: italic;
    width: 100%;
}

.light-mode p.divider {
    color: oklch(72% 0 0);
    font-style: italic;
    width: 100%;
}

.profile-card img {
    margin-right: 24px;
    height: 180px;
    -webkit-box-shadow:0px 0px 75px 0px rgba(154,46,255,0.34);
    -moz-box-shadow: 0px 0px 75px 0px rgba(154,46,255,0.34);
    box-shadow: 0px 0px 75px 0px rgba(154,46,255,0.34);
}

ul {
    list-style-type: square;
    color: oklch(60% 0.12 310);
}

li {
    margin-top: 2px;
}

.project-content p {
    margin-top: 0;
}

div.button-row {
    display: flex;
    flex-direction: row;
}

.button-row a {
    margin-right: 8px;
}

hr {
    width: 100%;
    color: oklch(42% 0 0);
}

.light-mode hr {
    width: 100%;
    color: oklch(72% 0 0);
}

footer {
    margin-top: 128px;
}