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

body {
  background: #0b0b0f;
  color: #e6e6e6;
  font-family: "Cinzel", serif;
  min-height: 100vh;
  -webkit-user-select: none;
  user-select: none;
}


.img-wrap {
  position: relative;
  display: inline-block;
  opacity: 1
}

.img-wrap img {
  display: block;
  max-width: 100%;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.img-shield {
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 2;
}


.order-title{
color:#c6a96a;
text-shadow:
  0 0 6px rgba(198,169,106,0.5),
  0 0 16px rgba(198,169,106,0.25);
}

h1 {
  animation: titleGlow 4s ease-in-out infinite alternate;
}

@keyframes titleGlow {
  from {
    text-shadow:
      0 0 4px rgba(198,169,106,0.3),
      0 0 10px rgba(198,169,106,0.2);
  }

  to {
    text-shadow:
      0 0 8px rgba(198,169,106,0.6),
      0 0 18px rgba(198,169,106,0.35);
  }
}





/*
var(--bell-blue, rgba(201, 219, 222));
*/
/* fonts */
@font-face {
  font-family: "Cicero";
  src: url("/fonts/HamletCicero12.otf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Tertia";
  src: url("/fonts/HamletTertia18.otf");
  font-weight: normal;
  font-style: normal;
}
/*HOME*/


/* STAR LAYER (twinkles) */
.hero.home::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/images/stars.png");
  background-repeat: repeat;
  animation: starTwinkle 6s ease-in-out infinite alternate;
  opacity: 0.2;
  z-index: 0;
  pointer-events: none;
}


.hero.home::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(10, 10, 15, 0.9), rgba(10, 10, 15, 0.966)),
    url("/images/background.webp");
  background-size: cover;
  background-position: center;
  animation: starTwinkle 6s ease-in-out infinite alternate;
  pointer-events: none;
  height: 1800;
}



@keyframes starTwinkle {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}

.home-content {
  position: relative;
  z-index: 3;
  opacity: 1;
}


/* HERO */

.hero{
height:110vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
}




.motto{
font-size:14px;
opacity:.7;
margin-bottom:30px;
}

button{
background:transparent;
border:1px solid #c6a96a;
color:#c6a96a;
padding:10px 28px;
font-family:"Cinzel";
letter-spacing:2px;
cursor:pointer;
transition:.3s;
}

button:hover{
background:#c6a96a;
color:#0b0b0f;
}


/* ANIMATION */

@keyframes glow{
from{
filter:drop-shadow(0 0 2px #c6a96a);
}
to{
filter:drop-shadow(0 0 12px #c6a96a);
}


}.fade-out {
  opacity: 0;
  transition: opacity .4s ease;
}


@media (max-width: 768px) {

.hero.home {
    min-height: 85vh;

  background:
    linear-gradient(rgba(10, 10, 15, 0.9), rgba(10, 10, 15, 0.966)),
    url("/images/background.png");
  background-position: cover;
  background-repeat: no-repeat;
  height: 1800px;
}

.home-content video {
  width: 80%;
  max-width: 420px;
  height: auto;
}

.home-content {
  margin-bottom:1000px;
}


}