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

@media only screen and (max-width: 800px) {
  body {
    font-size: 1.25rem !important;
  }

  .container>h2 {
    text-align: center;
  }

  .blog #header h2 {
    font-size: 2rem;
  }

  .container {
    width: 100% !important;
    padding: 3rem 1rem 1rem !important;
  }

  #navbar.content {
    justify-content: center;

    ul:not(:first-child) {
      display: none !important;
    }
  }

  .content-wrapper>.wrapper-side:not(img.wrapper-side) {
    flex: 0 0 40% !important;
  }

  img.wrapper-side {
    max-width: 46% !important;
  }
}

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

  --background-colour: #161622;
  --foreground-colour: #1e1e2e;
  --foreground-hover: #262638;

  --colour-mauve: #cdb4db;
  --colour-sapphire: #a2d2ff;
  --border-radius: 0.25rem;

  --content-padding: 0.75rem;
  --content-margin: 0.9rem;
  --flex-gap: 0.6rem
}

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

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

  padding: 0;
  margin: 0;

  list-style: none;

  text-transform: lowercase;
}

body {
  font-size: 1.5rem;
  line-height: 1em;

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

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

li#social {
  display: flex;
  align-items: center;
  gap: 0.3rem;

  span {
    padding: 2.5px 0 0;
  }
}

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

  gap: var(--content-margin);

  width: 42.5%;
  padding: 6rem 0 1rem;
  margin: 0 auto;
  overflow: hidden;

  min-height: inherit;
}

.container>h2 {
  font-size: 3rem;
  color: var(--colour-mauve);

  margin: 0 4px;
}

#navbar {
  display: flex;
  background-color: var(--foreground-colour);
}

#navbar a {
  text-decoration: none;
}

#navbar ul {
  display: flex;
  gap: var(--flex-gap);
  padding-top: 0.1rem;

  &:last-child {
    margin-left: auto;
  }
}

#navbar li#song {
  text-overflow: ellipsis "..";
  max-width: 196px;
  overflow: hidden;
  white-space: nowrap;

  /* Work on hover for song name */
  /* &:hover {
    text-overflow: none;
    max-width: fit-content;
  } */
}

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

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

  height: fit-content;

  &:hover:not(#navbar, .footer) {
    background-color: var(--foreground-hover);
  }
}

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

  >.wrapper-side:not(img.wrapper-side) {
    flex: 0 0 35%;
  }

  >img.wrapper-side {
    width: 30%;
  }
}

.content-wrapper >.content {
  width: 100%;
}

.wrapper-side>.content:not(:first-child) {
  margin-top: var(--content-margin);
}

img.wrapper-side {
  border-radius: var(--border-radius);
  align-self: center
}

#footer {
  margin-top: auto;
}

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

  p {
    font-size: 1.25rem;
    margin: 0;
  }

  h2 {
    font-size: 2rem;
  }
}

ul#marker-add {
  margin-left: 0.7rem;

  li::marker {
    content: "• ";
  }
}

#trans-webring div {
  text-align: left !important;
}

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

  &#header {
    font-size: 1.55rem;
    font-weight: bold;
    color: var(--colour-sapphire);
  }
}

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

.fa-brands {
  font-size: 1rem;
}