/* Regular */
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf');
}

/* Bold */
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf');
  font-weight: 700;
  font-style: normal;
}

/* Italic */
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf');
  font-weight: 400;
  font-style: italic;
}

/* Bold Italic */
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBM_Plex_Mono/IBMPlexMono-BoldItalic.ttf');
  font-weight: 700;
  font-style: italic;
}

* {
  /* Remove spaces */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable both-edges;
}

body {
  /* Font settings */
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  /* Background color */
  background-color: #fbf7eeaa;
  /* Не створювати горизонтальний scrollbar, якщо якийсь елемент виходить за межі overview */
  overflow-x: hidden;
}

a {
  color: black;
  /* Font color */
  text-decoration: none;
  /* Remove underline */
}

li {
  list-style: none;
  /* Remove dots */
}

h1 {
  margin-bottom: 15px;
}

p {
  margin-bottom: 15px;
  /* Distance between paragraphs */
  line-height: 1.6;
  /* Distance between lines of text */
}

main {
  display: flex;
  flex-direction: column;
  max-width: 80ch;
  /* Maximal width of inner content */
  margin: 0 auto;
  /* Center the content makes equal spaces in the left and the right depending on the width that we adjusted */
  margin-top: 10px;
  /* Space above */
  margin-bottom: 30px;
  /* Space below */
  padding: 0 40px;
  /* This space will be even if window's width is less than content's width */
}

button {
  cursor: pointer;
}

select {
  cursor: pointer;
}