@import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300;400;700&display=swap');

:root {
  --text-colour: #cdd6f4;
  --h2-colour: #dce4ff;

  --background-colour: #14141f;
  --foreground-colour: #1e1e2e;
  --foreground-hover: #262638;

  --navabr-colour: #232333;

  --colour-mauve: #cdb4db;
  --colour-sapphire: #a2d2ff;
  --border-radius: 4px;

  --content-padding: 0.5em;
  --content-margin: 0.6em;
}

* {
  font-family: "Dongle", sans-serif;

  box-sizing: border-box;
  color: var(--text-colour);

  padding: 0;
  margin: 0;

  list-style: none;

  text-transform: lowercase;
}

h2 {
  font-size: 32px;
  font-weight: 800;
  color: var(--h2-colour);

  margin: 0 0 5px;

  &#title {
    font-size: 54px;
    color: var(--colour-mauve);

    margin: 0 auto;
  }
}

p {
  margin: 2px 0;
  transform-box: border-box;
}

a {
  text-decoration: none;

  &:hover {
    font-weight: bold;
    color: var(--colour-mauve);
  }
}

body {
  display: flex;
  justify-content: center;

  font-size: 24px;
  line-height: 1em;
  font-weight: 400;

  background-color: var(--background-colour);

  min-height: 100vh;
  overflow: scroll;
}

.container {
  display: flex;
  flex-direction: column;

  gap: var(--content-margin);

  width: 640px;
  padding: 3em 0 1em;
  overflow: hidden;

  z-index: 1;
}

#navbar ul {
  display: flex;
  justify-content: center;

  gap: calc(var(--content-margin) - 0.2em);
}

#navbar.content {
  background-color: var(--navabr-colour);
  padding: calc(var(--content-padding) - 0.2em);

  &:hover {
    background-color: var(--navabr-colour);
  }
}

.dropdown {
  display: flex;
  justify-content: center;

  li {
    cursor: default;
  }

  &:hover .dropdown-content {
    display: block;
  }
}

.dropdown-content {
  display: none;
  position: absolute;

  padding: var(--content-padding);
  margin-top: calc(var(--content-margin) + 0.2em);

  background-color: var(--foreground-hover);
  border-radius: var(--border-radius);

  z-index: 1;
}

.content {
  padding: var(--content-padding);

  background-color: var(--foreground-colour);
  border-radius: var(--border-radius);

  &:hover {
    background-color: var(--foreground-hover);
  }
}

.content-wrapper {
  display: flex;
  gap: var(--content-margin);
}

.wrapper-side {
  flex: 0 0 35%;

  p {
    font-weight: bold;
    color: var(--colour-sapphire);
  }
}

.wrapper-image {
  display: flex;

  width: 100%;
  height: fit-content;

  margin-top: 4px;
  border-radius: var(--border-radius);
}

.terminal {
  position: absolute;
  z-index: 9;

  user-select: none;

  width: 250px !important;
  height: fit-content !important;

  p {
    font-weight: bold;
    color: var(--colour-sapphire);
  }
}

.blog #header {
  display: flex;
  gap: var(--content-margin);
  align-items: baseline;

  p {
    font-size: 0.8em;
    margin: 0;
  }
}

#update {
  display: flex;
  flex-direction: column;

  height: 100%;

  ul {
    overflow: auto;
    height: 0;
    flex: auto;
  }

  ul li {
    margin-top: calc(var(--content-margin) - 0.2em);

    &:first-child {
      margin: 0;
    }
  }
}