/* style.css */

@font-face {
  font-family: "nes-cyrillic";
  src: url("../../assets/fonts/nes-cyrillic.otf.woff2");
}

:root {
  --background: url("../../assets/imagefiles/background.gif");

  --blue-light: #425f7c;
  --blue-dark: #264d7d;
  --blue-darker: #1f3f65;

  --gray-light: #aeaeae;
  --gray-dark: #cecece;
  --gray-darker: #606060;

  --red-light: #904545;
  --red-dark: #624040;
  
  --yellow-light: #ffe785;

  --white-light: #f0f0f0;
}

body {
  font-family: "nes-cyrillic", sans-serif;
  font-size: 10px;
  line-height: 1.5;

  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);

  color: #000;
}

.background {
  background-image: var(--background);
  background-size: cover;
  background-position: center;
}

.vignette {
  background:
    radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0.3) 100%
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.03) 5px,
      transparent 5px,
      transparent 12px
    );
}

.title {
  font-size: 10px;

  color: var(--white-light);

  background: var(--blue-light);

  border: solid;
  border-top-color: var(--blue-dark);
  border-left-color: var(--blue-dark);
  border-right-color: var(--blue-darker);
  border-bottom-color: var(--blue-darker);

  border-radius: 5px 5px 0 0;

  padding: 5px;
}

.title-image {
  width: 20px;
  margin-right: 5px;

  image-rendering: pixelated;
}

.title-button {
  font-size: 10px;
  font-family: 'nes-cyrillic', sans-serif;

  background-color: var(--red-light);
  color: var(--white-light);

  border-style: solid;
  border-width: 2px;
  border-color: var(--red-dark);

  padding-left: 2px;
  padding-right: 1px;
  padding-bottom: 1px;

  cursor: default;
}

.title-button:active {
  background-color: var(--red-dark);
  color: black;
}

.window {
  background: var(--gray-light);

  border-left: solid var(--gray-dark);
  border-right: solid var(--gray-darker);
  border-bottom: solid var(--gray-darker);

  padding: 10px;
}

ul {
  list-style-position: inside;

  margin-bottom: 15px;
}

li {
  padding: 2px 0;
}

hr {
  margin: 10px 0;
}