/*Main font, colour and designs*/
  body{
  height:100%;
  background-color: rgba(0, 0, 0, 1); 
   background: 
    /* glowing clouds near horizon */
    radial-gradient(circle at 50% 80%, rgba(255,180,80,0.4) 0%, transparent 40%),
    radial-gradient(circle at 20% 95%, rgba(255,140,0,0.2) 0%, transparent 35%),
    radial-gradient(circle at 80% 90%, rgba(255,100,0,0.25) 0%, transparent 30%),
    /* main sky gradient */
    linear-gradient(
      to top,
      rgba(255,94,0,1) 0%,        /* thin fiery strip at bottom */
      rgba(150,45,0,1) 1%,        /* subtle transition */
      rgba(50,10,0,1) 3%,         /* dark red fading fast */
      rgba(0,0,0,1) 10%,          /* mostly black from here up */
      rgba(0,0,0,1) 100%         
    );

  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100vh;
  font-family:'Source Sans Pro', 'Arial', sans-serif;
  font-size:15px;
  color: #c2c2c2;
  letter-spacing:0.5px;
  }
  

  /* Sun element */
  .sun {
    position: fixed;
    bottom: 0;           /* near the horizon */
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,200,50,1) 0%, rgba(255,100,0,1) 60%, rgba(255,50,0,0.2) 100%);
    box-shadow: 0 0 80px 40px rgba(255,150,0,0.4);
    animation: sunGlow 10s ease-in-out infinite alternate;
    z-index: -2;
  }
  
  /* Sun subtle pulsing glow */
  @keyframes sunGlow {
    0% {
      transform: translateX(-50%) scale(1);
      box-shadow: 0 0 60px 30px rgba(255,150,0,0.3);
    }
    50% {
      transform: translateX(-50%) scale(1.05);
      box-shadow: 0 0 90px 50px rgba(255,180,0,0.5);
    }
    100% {
      transform: translateX(-50%) scale(1);
      box-shadow: 0 0 80px 40px rgba(255,150,0,0.4);
    }
  }


  /* Header */
  .img {
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      z-index: 10;
      background: url("https://kockatriceking.neocities.org/sunsetreqiuem/assets/sunsettitle.png") no-repeat center;
      background-size: contain;
      position:absolute;
  }
  
  .logo {
      position: absolute;
      left: 34%;
      top:1%;
      z-index: -3; 
      width: 450px;
  }

  #header{
    position:sticky;
    top:0;
    z-index:1000;
  
    width:100%;
     background-color: rgba(0, 0, 0, 0.5); 
  
    font-family:'Oswald', sans-serif;
    font-size:5em;
    letter-spacing:0.5px;
    color:#ffffff;
  
    display:flex;
    align-items:center;
    justify-content:center;
  
    padding:18px 10px;
    line-height:1;
    text-align:center;
  
    min-height:95px; 
  }

  /*Main white box*/
  #box1{
    margin:30px auto;
    max-width:900px;
    width:92%;
    padding:18px;
     background-color: rgba(1, 1, 1, 0.9); /*adjust end value to change transparency*/
    font-size:1.5em;
    line-height:25px;
    border-radius: 15px;
  }

  /*Main text box with gap for the box 3 floater*/
  #box2{
  position:relative;
  margin-bottom:15px;
  width:556px;
  }

  /*Floating box*/
  #box3{
  object-fit: cover;
  background-color:#400b13;
  position:relative;
  float:right;
  width:200px;
  padding:10px;
  font-size: 100%;
  font-size:0.8em;
  color:#feca24
  }

  /*Floating box*/
  #box3left{
  background-color:#400b13;
  position:relative;
  float:left;
  width:200px;
  padding:10px;
  font-size: 100%;
  font-size:0.8em;
  color:#feca24
  }

  #foot{
  clear:both;
  text-align:center;
  font-size:11px;
  }

  /*Redline header*/
  h1{
    display:block;
    font-family:'Source Sans Pro';
    font-size:18px;
    line-height:22px;
    font-weight:normal;
    background-color:#862d2d;
    letter-spacing:1px;
    padding:6px;
    color:#fff
    }
    
  a{
    text-decoration:none;
    color:#cc564c;
    }
  a:hover{
    color:#feca24;
    }

  /* MAIN NAV LINKS (top primary nav) */
  .header{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    padding:10px 0 14px 0;
  }
  
  a.linkit{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  
    min-width:120px;
    padding:14px 18px;
  
    font-size:1.1rem;
    letter-spacing:2px;
    font-weight:600;
  
    background:#400b13;
    color:#feca24;
    border:2px solid #400b13;
    border-radius:12px;
  
    transition:all .18s ease;
  }
  
  a.linkit:hover{
    background:#c45b2d;
    border-color:#c45b2d;
    color:#fff;
    transform:translateY(-2px);
  }

  
  .sidenav{
  position:sticky;
  top:95px; /* sits directly under header */
  z-index:5;
  width:100%;
  height:auto;
  overflow:hidden;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  padding:8px 0;
  }
  
  .sidenav a{
  padding:10px 14px;
  font-family:'Source Sans Pro';
  text-transform:uppercase;
  font-size:18px;
  background-color: rgba(254,202,36, 0.2); 
  backdrop-filter: blur(5px); 
  border-radius: 15px; 
  display:inline-block;
  }
  
  .sidenav a:hover{
  background-color:#c45b2d;
  color:#fff;
  }
  
  .sidenav.fixed{
    position:fixed;
    top:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.85);
    backdrop-filter:blur(6px);
    padding:10px 0;
    box-shadow:0 8px 18px rgba(0,0,0,.5);
    animation:slideDown .25s ease;
  }
  
  @keyframes slideDown{
    from{transform:translateY(-100%);}
    to{transform:translateY(0);}
  }
  
  /* Style page content */
  .main {
  padding:10px;
  }
  
  html{
  scroll-padding-top:110px;
  }
  

/* mobile */
@media (max-width: 900px) {

  body{
    font-size:14px;
    background-size:cover;
    background-position:center top;
  }
  
  #header{
  font-size:2.1em;
  padding:14px 8px;
  }
  
  #header{
    min-height:60px;
    font-size:2.1em;
  }
  
  .sidenav{
    top:60px;
  }
  
  .sidenav a{
    font-size:14px;
    padding:8px 10px;
  }
  /* header stops being massive banner */
  #header{
    position:relative;
    width:100%;
    line-height:1.2;
    font-size:2.2em;
    text-align:center;
    padding:12px 10px;
  }

  /* sidebar becomes top nav bar */
  .sidenav{
    position:relative;
    width:100%;
    height:auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    padding:8px 0;
  }

  .sidenav a{
    font-size:16px;
    padding:8px 10px;
  }

  .main{
    margin-left:0;
    padding:10px;
  }

  /* main container becomes fluid */
  #box1{
    width:100%;
    margin-top:20px;
    font-size:1.05em;
  }

  /* stacked layout instead of float columns */
  #box2{
    width:100%;
  }

  #box3,
  #box3left{
    float:none;
    width:100%;
    margin:15px 0;
    display:block;
  }

  /* prevent long lines */
  h1{
    font-size:16px;
    line-height:1.3;
  }

  /* links fit screen */
  a.linkit{
    width:auto;
    display:block;
    text-align:center;
    margin:6px 0;
  }

  /* scroll box usable on touch */
  .scrollabletextbox{
    width:100%;
    height:120px;
  }
   
  /* title image */
  .img{
    width: 95% !important;
    height: 120px !important;
    margin: 10px auto;
  }
  
    /* logo */
  .logo{
    width: 35% !important;
    height: 100px !important;
    margin: 10px auto;
  }
  

  }