@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --bg-main: #12204D;
  --bg-dark: #0B0B2D;
  --bg-contrast: #20070A;
  --bg-white: #e4e4e4;
  --bg-grey: #383e4d;

  --alt-color: #20070A;
  --alt-color-bright: #ff5b6e;

  --font-main: 'Roboto';
  --font-alt: 'JetBrains Mono';
}

body {
  background-color: var(--bg-main);
  color: var(--bg-white);
  font-family: var(--font-main);
  text-align: center;

  background-image: url('res/background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

a {
  color: var(--alt-color-bright);
  font-family: var(--font-alt);
}

.album-image {
  height: 128px;
  width: 128px;

  border: var(--bg-white) solid 2px;

  transition: all 0.3s steps(6, end);
}

.album-image:hover {
  height: 144px;
  width: 144px;
}