@font-face {
  font-family: 'HallowenInline';
  src: url('../fonts/HallowenInline.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Rocky';
  src: url('../fonts/rocky.ttf') format('truetype');
  font-weight: lighter;
  font-style: normal;
}

* {
  cursor: url("../img/halloween/cursor.png"), auto !important;
}

body {
  overflow-x: hidden;
}

.lang-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 999;
  padding: 8px 14px;
  border: 3px solid black;
  border-radius: 6px;
  background-color: white;
  color: black;
  font-family: 'Rocky';
  font-size: 16px;
  font-weight: bold;
}

.benjerrys {
  position: relative;
  background-color: darkorange;
  background-image: url(../img/halloween/halloween1.jpg);
  background-size: 300px;
}

.deco {
  position: absolute;
  z-index: 0;
  width: 170px;
  border: 6px solid white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.deco-1  { top: 60px;    left: 3%;   width: 320px; transform: rotate(-10deg); }
.deco-2  { top: 240px;   right: 4%;  width: 300px; transform: rotate(8deg); }
.deco-3  { top: 500px;   left: 2%;   width: 380px; transform: rotate(6deg); }
.deco-4  { top: 680px;   right: 3%;  width: 350px; transform: rotate(-14deg); }
.deco-5  { top: 940px;   left: 5%;   width: 300px; transform: rotate(11deg); }
.deco-6  { top: 1180px;  right: 5%;  width: 370px; transform: rotate(-7deg); }
.deco-7  { top: 1440px;  left: 3%;   width: 350px; transform: rotate(-9deg); }
.deco-8  { top: 1700px;  right: 4%;  width: 360px; transform: rotate(13deg); }
.deco-9  { top: 1960px;  left: 4%;   width: 350px; transform: rotate(5deg); }
.deco-10 { top: 2220px;  right: 5%;  width: 370px; transform: rotate(-11deg); }

@media (max-width: 700px) {
  .deco-1, .deco-2, .deco-3, .deco-4, .deco-5,
  .deco-6, .deco-7, .deco-8, .deco-9, .deco-10 {
    width: 130px;
  }
}

.header {
  padding-left: 20%;
  font-size: 30px;
  -webkit-filter: drop-shadow(0 0 5px #ffffff);
  filter: drop-shadow(0 0 5px #ffffff);
  position: relative;
  z-index: 99;
}

.card {
  --borderwidth: 60px;
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 60px auto;
  border: var(--borderwidth) solid transparent;
  border-image-source: url(../img/lace-white.png);
  border-image-slice: 84;
  border-image-repeat: round;
  border-image-outset: 1;
  background-color: white;
  color: black;
}

.section {
  max-width: 600px;
  margin: 60px auto;
  padding: 0 20px;
  text-align: center;
  color: black;
}

.section ul {
  display: inline-block;
  text-align: left;
  margin: 16px auto;
  padding-left: 1.2em;
}

.section li {
  margin: 4px 0;
}

.register-card {
  display: inline-block;
  margin: 20px auto;
  padding: 14px 40px;
  background-color: #ff8c00;
  border: 3px solid black;
  border-radius: 10px;
  box-shadow: 0 4px 0 black;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.register-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 0 black;
}

.register-card p {
  margin: 0;
  font-family: 'HallowenInline';
  font-size: 22px;
  font-weight: bold;
  color: white;
  letter-spacing: 2px;
}

#participants-table {
  margin: 16px auto 0;
}

.participants-table {
  border-collapse: collapse;
  margin: 0 auto;
  max-width: 100%;
  font-size: 16px;
}

.participants-table th,
.participants-table td {
  border: 1px solid black;
  padding: 6px 12px;
  text-align: left;
  word-break: break-word;
}

.participants-table th {
  background-color: #ff8c00;
  color: white;
  font-weight: bold;
}

.participants-table tbody tr:nth-child(even) {
  background-color: #fdf1e0;
}

.curse {
  font-family: 'Rocky';
  font-weight: normal;
  font-size: 36px;
  color: #c45542;
  text-align: center;
}

.section-title {
  font-family: 'HallowenInline';
  font-size: 36px;
  letter-spacing: 3px;
  color: black;
  -webkit-filter: drop-shadow(0 0 5px #ff8c00);
  filter: drop-shadow(0 0 5px #ff8c00);
}

body {
    font-family: 'HallowenInline';
    font-size: 24px;
}

.lang-toggle {
    font-family: 'Arial';
}