@font-face {
  font-family: "JetBrainsMono-ExtraLight";
  src: url("fonts/woff2/JetBrainsMono-ExtraLight.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrainsMono-ExtraLight-Italic";
  src: url("fonts/woff2/JetBrainsMono-ExtraLight-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrainsMono-Light";
  src: url("fonts/woff2/JetBrainsMono-Light.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrainsMono-Light-Italic";
  src: url("fonts/woff2/JetBrainsMono-Light-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrainsMono-SemiLight";
  src: url("fonts/woff2/JetBrainsMono-SemiLight.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrainsMono-SemiLight-Italic";
  src: url("fonts/woff2/JetBrainsMono-SemiLight-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrainsMono-Regular";
  src: url("fonts/woff2/JetBrainsMono-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrainsMono-Italic";
  src: url("fonts/woff2/JetBrainsMono-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrainsMono-Medium";
  src: url("fonts/woff2/JetBrainsMono-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrainsMono-Medium-Italic";
  src: url("fonts/woff2/JetBrainsMono-Medium-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrainsMono-Bold";
  src: url("fonts/woff2/JetBrainsMono-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrainsMono-Bold-Italic";
  src: url("fonts/woff2/JetBrainsMono-Bold-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrainsMono-ExtraBold";
  src: url("fonts/woff2/JetBrainsMono-ExtraBold.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrainsMono-ExtraBold-Italic";
  src: url("fonts/woff2/JetBrainsMono-ExtraBold-Italic.woff2") format("woff2");
}

/* STYLING */

:root {
  --background-color: #000;
  --background-color-2: #050505;
  --primary-color: #ff204e;
  --secondary-color: #a0153e;
  --tertiary-color: #5d0e41;
  --text-color: #ffffff;
}

body {
  display: flex;
  padding: 0;
  margin: 0;
  background-color: var(--background-color);
  color: azure;
  font-family: "JetBrainsMono-Regular", monospace;
  line-height: 1;
  word-wrap: anywhere;
  cursor: auto;
  font-size: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.site-container {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.header {
  width: 100%;
  height: 10em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: var(--background-color-2);
}

.header-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.avatar-container {
  padding-top: 1em;
  margin-left: 0.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.avatar {
  display: flex;
  margin-top: 0.5em;
  width: 7em;
  height: 7em;
}

.avatar.img {
  border-radius: 50%;
  border-color: #6e6e6e solid;
}

.avatar-text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  /* min-width: 35em; */
  margin-left: 1em;
}

.profile {
  display: flex;
  flex-direction: row;
}

.avatar-text {
  display: flex;
  flex-direction: row;
}

.avatar-text-s {
  color: rgb(176, 176, 176);
}

.avatar-text-prefix {
  color: var(--primary-color);
}

.uname-quote-container {
  display: flex;
  width: 100%;
  flex-flow: row-reverse;
}

.username {
  width: 100%;
  display: flex;
  margin-top: 0.6em;
  justify-content: flex-start;
  align-items: center;
}

.username-text {
  margin-right: 0.57em;
  margin-bottom: 0.35em;
}

.quote-container {
  display: flex;
  margin-right: 25px;
  justify-content: end;
  flex-direction: row;
  align-items: end;
  -ms-flex-align: end;
}

.s-quote {
  display: flex;
  font-style: italic;
  color: #252525;
  margin-top: 0.35em;
}

.s-quote-q {
  font-style: italic;
  color: #151515;
}

/* MENU */

.posts-text {
  display: flex;
  font-size: 1.3em;
  color: var(--secondary-color);
  margin-bottom: 1.1em;
}

.click-hide {
  display: flex;
}

.menu-toggle-button-container {
  float: right;
  position: absolute;
  right: 0.7em;
  top: 5.6em;
  font-size: 2em;
}

body:has(#toggle:checked) .click-hide {
  display: none;
}

#toggle {
  display: none;
}

.menu {
  margin-left: 1em;
  margin-top: 1.5em;
  min-width: 18em;
  flex-direction: column;
  line-height: 1.4em;
}

.menuitem {
  padding: 1rem;
  border-left: 0 solid var(--primary-color);
  transition: border-left 75ms ease-in-out, padding-left 75ms ease-in-out;
}

.menuitem:hover {
  padding-left: 0.5rem;
  border-left: 0.5rem solid var(--primary-color);
}

.active {
  padding-left: 0.5rem;
  border-left: 0.5rem solid var(--primary-color);
}

.menuitem > :first-child {
  margin-top: 0;
}

.menuitem > :last-child {
  margin-bottom: 0;
}

/* CONTENT */

.site-content-container {
  width: 100%;
  justify-content: space-between;
  display: flex;
  flex-direction: row;
}

@media (max-width: 768px) {
  .site-content-container {
    flex-direction: column-reverse;
  }
}

.site-content {
  display: flex;
  flex-direction: column;
  margin-right: 1.5em;
  margin-left: 3em;
}

.footer {
  width: 100%;
  display: flex;
  flex-direction: row;
  background-color: var(--background-color-2);
}

.footer-text-container {
  padding-left: 2em;
  padding-top: 1em;
  padding-bottom: 1em;
}

.footer-text {
  color: #252525;
}

/* IMAGE DECORATION */

img {
  --s: 15px; /* the size on the corner */
  --t: 1px; /* the thickness of the border */
  --g: 5px; /* the gap between the border and image */

  padding: calc(var(--g) + var(--t));
  outline: var(--t) solid var(--primary-color); /* the color here */
  outline-offset: calc(-1 * var(--t));
  mask: conic-gradient(at var(--s) var(--s), #0000 75%, #000 0) 0 0 /
      calc(100% - var(--s)) calc(100% - var(--s)),
    conic-gradient(#000 0 0) content-box;
  transition: 0.1s;
}

img:hover {
  outline-offset: calc(-1 * var(--g));
}