/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

.site-quote {
  width: 600px;
  margin: 0 auto 10px;
  text-align: center;
  font-style: italic;
  color: #c6cde3;
  padding: 10px 20px;
}

.quote-source {
  display: block;
  font-size: 12px;
  font-style: normal;
  margin-top: 8px;
  color: #8db2e5;
}

.header-banner {
  display: block;
   width: 800px;    /* подставь нужную ширину */
  height: 200px;
  image-rendering: pixelated;
}

.header-wrapper {
  position: relative;
  width: 800px;      
  margin: 10px auto 0; 
  }
  
  .header-wrapper nav {
  position: absolute;
  top: 100%;
  transform: translateY(-50%);   /* вертикальное центрирование */
  right: 100%;
  margin-right: 20px;
  }

.content {
  width: 700px;
  margin: 0 auto;
  background-color: #37446e;
  border: 5px solid #080a10;
  padding: 10px 10px 10px 10px;
  color: #c6cde3;
  line-height: 1.3;
  text-align: center;
}

 a {
  color: #c6cde3;   /* подставь свой цвет */
}

.palette-img {
  display: block;
  margin: 10px auto;
  image-rendering: pixelated;
  max-width: 100%;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
  background-color: #37446e;
  flex-direction: column;
  width: 200px;
  border: 5px solid #080a10;
}
nav li a {
  display: block;
  position: relative;
  padding: 8px 16px 8px 34px;
  background-color: #181e30;
  color: #c6cde3;
  text-decoration: none;
  font-weight: bold;
  border: 2px outset #080a10;
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
  line-height: 1.4;
  border-radius: 0 25px 0 25px;
}

nav li a:hover {
  background-color: #4d5f9a;
}

nav li a:active {
  border: 2px inset #080a10;
}

nav li a::before {
  content: "💀 ";
   position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.footer-cat {
  display: block;
  width: 100px;
  image-rendering: pixelated;
  position: fixed;
  bottom: 53px;    /* высота футера + зазор, подбери под свой */
  left: 50%;
  transform: translateX(calc(-50% + 100px));  /* +100px — твой сдвиг вправо */
}

.site-footer {
    background-color: #37446e;
    border: 5px solid #080a10;
    color: #c6cde3;
    text-align: center;
    padding: 6px 20px;
    font-family: 'MyPixelFont', monospace;
    font-size: 12px;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.site-footer span  {
    display: inline-block;
    vertical-align: middle;
    margin: 0 6px;
}

.site-footer .footer-btn {
    text-decoration: none;
    line-height: 0;
}

.site-footer .footer-btn img {
    display: inline-block;
    border: 0;
    vertical-align: middle;
}
  
  .lang-divider {
  border: none;
  text-align: center;
  margin: 12px 0;
}

.lang-divider::before {
  content: "• • •";
  color: #080a10;
}