@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:#ffcc00 #fff9e6;
}

::-webkit-scrollbar{width:12px;}
::-webkit-scrollbar-track{background:#fff9e6;}
::-webkit-scrollbar-thumb{
  background:linear-gradient(#ffcc00,#ff9900);
  border-radius:10px;
}

html,body{
  margin:0;
  padding:0;
  color:#222;
  background:#fff9e6;
  font-family:'Libre Baskerville',serif;
}

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

#navigation{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:60px;
  padding:34px 80px;
  margin-top:0px;
  background: linear-gradient(
      160deg,
      #fff9e6 0%,     
      #fff3cc 30%,   
      #ffe699 70%,    
      #fff9e6 100%
  );
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,102,102,0.35);
}

#navigation a {
  font-family: 'Lora', serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #222;
  padding: 10px 6px;
  position: relative;
  transition: color .35s ease;
}

#navigation a:hover { color: #ff0000; }

.nav-home::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:60%;
  height:2px;
  background:#ff0000;
  transform:scaleX(0) translateX(-50%);
  transform-origin:center;
  transition:transform .4s ease;
}

.nav-home:hover::after { transform: scaleX(1) translateX(-50%); }

.nav-library::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:75%;
  height:4px;
  background: linear-gradient(to bottom,#ff0000 0%,#ff0000 40%,transparent 40%,transparent 60%,#0000ff 60%);
  transform: scaleX(0) translateX(-50%);
  transform-origin: center;
  transition: transform .4s ease;
}

.nav-library:hover::after { transform: scaleX(1) translateX(-50%); }

.nav-archives::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:80%;
  height:2px;
  background: linear-gradient(to right, transparent,#ff0000,transparent);
  transform: scaleX(0) translateX(-50%);
  transform-origin: center;
  transition: transform .4s ease;
}

.nav-archives:hover::after { transform: scaleX(1) translateX(-50%); }

.nav-research::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:90%;
  height:2px;
  background:#0000ff;
  transform: scaleX(0) translateX(-50%);
  transform-origin: center;
  transition: transform .4s ease;
}

.nav-research:hover::after { transform: scaleX(1) translateX(-50%); }

.nav-astronomy::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:85%;
  height:2px;
  background: linear-gradient(90deg, transparent,#ff0000,#0000ff,transparent);
  transform: scaleX(0) translateX(-50%);
  transform-origin: center;
  transition: transform .4s ease;
}

.nav-astronomy:hover::after { transform: scaleX(1) translateX(-50%); }

.nav-contact::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:60%;
  height:1px;
  background:#222;
  transform: scaleX(0) translateX(-50%);
  transform-origin: center;
  transition: transform .4s ease;
}

.nav-contact:hover::after { transform: scaleX(1) translateX(-50%); }

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

.contentx{
  margin:-20px auto 120px;
  padding:70px 90px;
  font-size:22px;
  line-height:2;
  text-align:justify;
  color:#222;
}

h1{
  font-family:'Cinzel Decorative',serif;
  font-size:48px; 
  text-align:center;
  color:#ffcc00;
  letter-spacing:2px;
  text-transform:uppercase;
  text-shadow:1px 1px 4px rgba(0,0,0,0.3); 
}

blockquote{
  margin:80px auto;
  padding:50px 70px;
  max-width:700px;
  background:#fff3cc;
  border-left:8px solid #ff0000;
  border-radius:24px;
  box-shadow:0 15px 35px rgba(0,0,255,.25);
}

textarea,
input,
select{
  width:42%;
  padding:1.6rem;
  background:#fff9e6;
  border:2px solid #ff0000;
  border-radius:999px;
  color:#222;
  transition:.3s;
}

textarea:focus,
input:focus,
select:focus{
  outline:none;
  box-shadow:0 0 18px rgba(255,204,0,.5);
}

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

a::after{
  content:"";
  position:absolute;
  bottom:-5px;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(to right,#ff0000,#0000ff);
  transform:scaleX(0);
  transition:.3s;
}

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

i,em{
  color:#ff0000;
  background:rgba(255,204,0,.15);
  padding:4px 8px;
  border-radius:8px;
}

b,strong{
  color:#fff;
  padding:8px 18px;
  border-radius:999px;
  background:linear-gradient(160deg,#ff0000,#0000ff);
  box-shadow:0 5px 15px rgba(0,0,255,.25);
}

#footer{
  margin:140px auto 80px;
  padding:50px 20px;
  text-align:center;
  letter-spacing:.35em;
  color:#222;
  position:relative;
}

#footer::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:480px;
  height:2px;
  background:linear-gradient(to right,transparent,#ffcc00,transparent);
}

#footer a{
  margin:0 16px;
  background:linear-gradient(120deg,#ffcc00,#ff0000,#0000ff,#ff0000);
  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%;
  }
}