@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative&family=Libre+Baskerville&family=Special+Elite&family=Lora:wght@400;500;600&display=swap');

*{
  box-sizing:border-box;
  scrollbar-width:thin;
  scrollbar-color:#ff7a1a #0b0d14;
}

::-webkit-scrollbar{width:12px;}
::-webkit-scrollbar-track{
  background:#0b0d14;
}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#ff7a1a,#0e6cff);
  border-radius:10px;
  box-shadow:0 0 10px rgba(255,122,26,.6);
}

html,body{
  margin:0;
  padding:0;
  color:#e8ecff;
  background:
  radial-gradient(circle at 20% 10%,rgba(14,108,255,.15),transparent 40%),
  radial-gradient(circle at 80% 0%,rgba(255,122,26,.12),transparent 40%),
  #07080f;

  font-family:'Libre Baskerville',serif;
}



.embers{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}


.embers span{

  position:absolute;

  bottom:-20px;

  width:4px;
  height:4px;

  background:
  radial-gradient(circle,#ffb347,#ff5e00);

  border-radius:50%;

  box-shadow:
  0 0 6px #ff7a1a,
  0 0 12px rgba(255,120,0,.6);

  animation:emberFloat linear infinite;
}


.embers span:nth-child(1){left:10%;animation-duration:12s;animation-delay:0s;}
.embers span:nth-child(2){left:20%;animation-duration:15s;animation-delay:2s;}
.embers span:nth-child(3){left:35%;animation-duration:11s;animation-delay:4s;}
.embers span:nth-child(4){left:50%;animation-duration:14s;animation-delay:1s;}
.embers span:nth-child(5){left:65%;animation-duration:16s;animation-delay:5s;}
.embers span:nth-child(6){left:75%;animation-duration:13s;animation-delay:3s;}
.embers span:nth-child(7){left:85%;animation-duration:18s;animation-delay:6s;}
.embers span:nth-child(8){left:95%;animation-duration:12s;animation-delay:2s;}


@keyframes emberFloat{

0%{
  transform:translateY(0) translateX(0) scale(0.6);
  opacity:0;
}

10%{
  opacity:1;
}

50%{
  transform:translateY(-50vh) translateX(20px) scale(1);
}

100%{
  transform:translateY(-110vh) translateX(-20px) scale(0.4);
  opacity:0;
}

}

.separator{
  width:420px;
  height:2px;
  margin:90px auto;

  background:
  linear-gradient(
  90deg,
  transparent,
  #0e6cff,
  #ff7a1a,
  #0e6cff,
  transparent
  );

  position:relative;
}


.separator::after{
  content:"✶";
  position:absolute;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  font-size:20px;

  color:#ff7a1a;

  text-shadow:
  0 0 8px rgba(255,122,26,.9),
  0 0 18px rgba(14,108,255,.6);
}


#header{
  background-image:url('images/head.jpg');background-color:#191523;
  background-repeat:no-repeat;
  background-position:center;
  height:435px;
  width:100%;
}


#navigation{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:60px;
  padding:34px 80px;

  background:
  linear-gradient(
  160deg,
  #07080f 0%,
  #0d1222 30%,
  #11162a 70%,
  #07080f 100%
  );

  backdrop-filter:blur(10px);

  border-bottom:1px solid rgba(14,108,255,.25);

  box-shadow:
  0 0 40px rgba(14,108,255,.15),
  inset 0 -1px 0 rgba(255,122,26,.25);
}

#navigation a{
  font-family:'Lora',serif;
  font-size:18px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;

  color:#d6ddff;

  padding:10px 6px;
  position:relative;

  transition:.35s;
}

#navigation a:hover{
  color:#ff7a1a;
  text-shadow:0 0 10px rgba(255,122,26,.8);
}

#navigation a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:80%;
  height:2px;

  background:
  linear-gradient(
  90deg,
  transparent,
  #0e6cff,
  #ff7a1a,
  #0e6cff,
  transparent
  );

  transform:scaleX(0) translateX(-50%);
  transform-origin:center;

  transition:.4s;
}

#navigation a:hover::after{
  transform:scaleX(1) translateX(-50%);
}

#content{
  width:76%;
  margin:auto;
}

.contentx{
  margin:-20px auto 120px;
  padding:70px 90px;

  font-size:22px;
  line-height:2;
  text-align:justify;

  color:#d9deff;
}


h1{
  font-family:'Cinzel Decorative',serif;
  font-size:48px;

  text-align:center;
  letter-spacing:2px;
  text-transform:uppercase;

  background:linear-gradient(120deg,#0e6cff,#ff7a1a,#0e6cff);
  -webkit-background-clip:text;
  color:transparent;

  text-shadow:
  0 0 12px rgba(14,108,255,.6),
  0 0 25px rgba(255,122,26,.3);
}

blockquote{

  margin:80px auto;
  padding:50px 70px;
  max-width:700px;

  background:
  linear-gradient(
  145deg,
  rgba(14,108,255,.08),
  rgba(255,122,26,.08)
  );

  border-left:6px solid #ff7a1a;

  border-radius:24px;

  box-shadow:
  0 20px 40px rgba(0,0,0,.8),
  0 0 25px rgba(14,108,255,.2);
}


textarea,
input,
select{

  width:42%;
  padding:1.6rem;

  background:#0c0f1a;

  border:2px solid #0e6cff;

  border-radius:999px;

  color:#e5e9ff;

  transition:.3s;
}

textarea:focus,
input:focus,
select:focus{

  outline:none;

  border-color:#ff7a1a;

  box-shadow:
  0 0 15px rgba(255,122,26,.7),
  0 0 25px rgba(14,108,255,.4);
}


a{
  color:#ff7a1a;
  text-decoration:none;
  position:relative;
}

a::after{
  content:"";
  position:absolute;
  bottom:-5px;
  left:0;
  width:100%;
  height:2px;

  background:
  linear-gradient(
  90deg,
  #0e6cff,
  #ff7a1a
  );

  transform:scaleX(0);

  transition:.35s;
}

a:hover::after{
  transform:scaleX(1);
}


i,em{
  color:#ff7a1a;

  background:rgba(255,122,26,.08);

  padding:4px 8px;

  border-radius:8px;
}

b,strong{

  color:#fff;

  padding:8px 18px;

  border-radius:999px;

  background:
  linear-gradient(
  160deg,
  #ff7a1a,
  #0e6cff
  );

  box-shadow:
  0 0 15px rgba(255,122,26,.5);
}


#footer{

  margin:140px auto 80px;

  padding:50px 20px;

  text-align:center;

  letter-spacing:.35em;

  color:#cfd6ff;

  position:relative;
}

#footer::before{

  content:"";

  position:absolute;

  left:50%;

  transform:translateX(-50%);

  width:480px;

  height:2px;

  background:
  linear-gradient(
  to right,
  transparent,
  #0e6cff,
  #ff7a1a,
  transparent
  );
}

#footer a{

  margin:0 16px;

  background:
  linear-gradient(
  120deg,
  #0e6cff,
  #ff7a1a,
  #0e6cff
  );

  background-size:200% 100%;

  -webkit-background-clip:text;

  color:transparent;
}

#footer a:hover{
  background-position:100% 50%;
}


@media(max-width:768px){

  #navigation{
    flex-wrap:wrap;
    gap:20px;
    padding:24px;
  }

  .contentx{
    padding:30px 25px;
    font-size:18px;
  }

  h1{
    font-size:36px;
  }

  textarea,
  input,
  select{
    width:80%;
  }
}