@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Cinzel+Decorative:wght@400;700&family=Cinzel:wght@400;600;700&display=swap');

/* VARIABLES */
:root {
  --green-deep:#061a0e;
  --green-card:#0b2417;
  --green-border:rgba(74,222,128,.22);
  --gold:#c9a84c;
  --white:#f0faf4;
  --white-dim:#d1fae5;
  --text-muted:#6ee7b7;
}

/* BASE */
*{box-sizing:border-box;}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:url("../pic/lpage.jpg") center/cover no-repeat;
  font-family:'Cinzel',serif;
  color:var(--white);
  text-align:center;
}

/* OVERLAY */
.bg-overlay {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(20,83,45,.15), transparent 70%),
    rgba(6,26,14,.2);
  z-index: 0;
}

/* CONTAINER */
.container{
  position:relative;
  z-index:1;
  background: rgba(9, 26, 12, 0.78);
  border:1px solid var(--green-border);
  padding: 52px 64px 56px;
  max-width:700px;
  width:100%;
  border-radius:20px;
  box-shadow:
    0 2px 0 var(--gold),
    0 -2px 0 var(--gold),
    0 30px 80px rgba(0,0,0,.75);
}

/* GOLD LINES */
.container::before,
.container::after{
  border-radius:18px;
  content:'';
  position:absolute;
  left:0; right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.container::before{top:0;}
.container::after{bottom:0;}

/* WELCOME TO */
h4{
  font-family:'Cinzel',serif;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:7px;
  color:var(--text-muted);
  margin: 0 0 20px;
  text-transform:uppercase;
}

/* LOGO IMAGE */
.logo-img{
  width: 100%;
  max-width: 500px;
  margin: -120px auto -120px;
  display: block;
}

/* MAIN TITLE */
h1{
  font-family:'Cinzel',serif;
  font-size:clamp(2.4rem,8vw,4.6rem);
  letter-spacing:6px;
  margin:0;
  line-height:1.05;
  color:var(--gold);
}

/* SMALL TITLE */
h2{
  font-family:'Cinzel',serif;
  font-size:.75rem;
  letter-spacing:5px;
  color:var(--text-muted);
  margin-bottom:10px;
}

/* TAGLINE */
.tagline{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:1.2rem;
  margin: 10px 0 22px;
  color:var(--white-dim);
}

p {
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:1.2rem;
  letter-spacing:.5px;
  margin: 0 0 32px;
  color:var(--white-dim);
}

/* ENTER TEXT */
.enter-text{
  font-family:'Cinzel',serif;
  font-size:.75rem;
  letter-spacing:3px;
  color:var(--text-muted);
  margin-bottom:12px;
}

/* ENTER BUTTON */
.enter-btn{
  display:inline-block;
  text-decoration:none;
  border:1px solid var(--gold);
  border-radius: 50px;
  color:var(--gold);
  padding:14px 44px;
  font-family:'Cinzel',serif;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:4px;
  text-transform:uppercase;
  position:relative;
  overflow:hidden;
  transition:color .3s ease;
}

/* HOVER FILL */
.enter-btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:.3s;
}

.enter-btn span{
  position:relative;
  z-index:1;
}

.enter-btn:hover::before{
  transform:scaleX(1);
}

.enter-btn:hover{
  color:var(--green-deep);
}

/* RESPONSIVE */
@media(max-width:768px){
  .container{
    padding:40px 38px 44px;
  }
}

@media(max-width:600px){
  .container{
    padding:28px 20px 34px;
  }

  h1{
    letter-spacing:3px;
  }

  h4{
    letter-spacing:5px;
  }
}