:root {
    --red: #960018;
    --no-white: #fcfbf4;
    --yellow:#dfd196;
}
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Special Elite', system-ui, -apple-system, sans-serif;
}
body {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-image: url('cafe.png'); background-image: url('ecclesia_night.png'); 
  color: black;
  position: relative;
}
.logo img {
    height: 50px;
    width: 50px;
    display: block;
}
/* 1. Загальна обгортка (просто обмежує ширину) */
.site-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0px 0; /* Верхній/нижній відступ від країв екрана */
}

/* 2. Шапка як окремий блок */
.header {
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    
    /* Додаємо напівпрозорий фон сюди */
    background-color: rgba(0, 0, 0, 0.7);
    padding: 20px;
    margin-bottom: 20px; /* Відступ, щоб відокремити від контенту під ним */
}
img {pointer-events: none;}
/* 3. Основний контент (main) як окремий блок */
main { 
    /* або замініть на свій клас, наприклад .main-content */
    background-color: rgba(0, 0, 0, 0.7);
    padding: 20px;
}
.nav-menu a { color: var(--yellow); font-weight: 500; font-size: 14px; transition: 0.3s; padding: 5px 15px;  }
.nav-menu a.active { background-color: var(--red); color: #dfd196; }
.nav-menu a:hover:not(.active) { background-color: var(--red); }

.bottom-left-img {
  width: 500px;   /* Вкажіть бажану ширину картинки в пікселях */
  height: 911px;  /* Вкажіть бажану висоту картинки в пікселях */
  /*position: absolute;*/
  position: fixed; /* Вириває картинку з потоку тексту */
  bottom: 20px;       /* Відступ знизу */
  left: 0px;        /* Відступ справа */       /* Розмір картинки (за потреби) */
  z-index: 1000;   /* Гарантує, що картинка буде поверх інших елементів */
}


/* Ефект при наведенні курсора */
.image-hover-switcher:hover {
  background-image: url('yan.png'); /* Картинка, на яку замінюється */
}