/* ===== Theme ===== */	
:root 	{
			--gold: 180, 160, 120;
			--silver: 165, 160, 165;
			--bronze: 146, 110, 70;
			
			
			--dark: 25, 20, 22;
			--dark-light: 68,60,63;
			
			--white:232, 228, 223;
			
		}	


*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  min-height:100vh;
  color:rgb(var(--white));
  font-family:'Sora';background:#191316;overflow:hidden
  
}

body{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:linear-gradient(-130deg,
    rgba(var(--dark),1)20%,
    rgba(var(--dark-light),1),
    rgba(var(--dark),1)80%
  )
}

.hub{
  width:min(100%, 520px);
  text-align:center;position:relative;
}

.hub h1{position:relative;
  margin:0 0 10px;
  font-size:clamp(2rem, 13.8vw, 5rem);
  line-height:1;color:rgba(var(--gold),0.98);font-weight:800;text-shadow:-1rem 1rem 5px rgba(var(--dark),1), 
  2px -2px 1px rgb(249, 198, 131),
  2px 0px 1px rgb(249, 198, 131),
  -2px 2px 1px rgb(50, 29, 1),
  -2px 0px 1px rgb(39, 22, 0);transform: rotate(-4deg);filter:brightness(0.9);z-index:1
}

.hub::before {content:'';position:absolute;left:50%;transform: translate(-50%,0);top:-166px;width:190px;height:190px;border-radius:50%;overflow:hidden;opacity:0.9;z-index:0;background:radial-gradient(rgba(255,255,255,0.3)0%,transparent 50%,rgba(20,0,0,0.8)90%), url('/assets/logo.png')}



.hub p{
  margin:22px 0 28px 0;
  font-size:clamp(0.9rem, 3vw, 1.3rem);text-align:right;color:rgba(var(--white),0.85);
  
  
}

.hubButtons{
  display:grid;
  gap:14px;text-transform:uppercase;
 
   color: white;
   text-shadow:
       3px 3px 3px rgba(var(--dark)),
     -1px -1px 1px rgba(var(--dark)),  
      1px -1px 1px rgba(var(--dark)),
      -1px 1px 1px rgba(var(--dark)),
       1px 1px 1px rgba(var(--dark));
  
  


}

.hubBtn{
	font-weight:700;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:76px;
  padding:25px 20px;
  border-radius:10px;
 color:rgb(var(--white));
  text-decoration:none;

  font-size:1.4rem;
  overflow:hidden;
  isolation:isolate;
  box-shadow:-1rem 1rem 5px rgba(var(--dark),1), 
  2px -2px 1px rgba(250, 229, 202, 0.4),
  2px 0px 1px rgba(250, 229, 202, 0.4),
  -2px 2px 1px rgb(50, 29, 1),
  -2px 0px 1px rgb(39, 22, 0),0 10px 30px rgba(0,0,0,0.25);
}

.hubBtn::before{
  position:absolute;inset:0; background-size:800px auto; background-image:url('/assets/leopard-01.svg'); opacity:0.08;
  z-index:-1;background-size:700px
}

.hubBtn::after{
  content:"";
  position:absolute;
  inset:0;opacity:0;
  background:radial-gradient(circle,rgba(0,0,0,1)40% ,transparent);
  z-index:-1;
 
}


.hubBtn.date    { background: rgba(var(--bronze),0.8) }
.hubBtn.website { background: rgba(var(--gold),0.8);}
.hubBtn.quote    { background: rgba(var(--silver),0.8); }
.hubBtn.date:hover   { background: rgba(var(--bronze),1) }
.hubBtn.website:hover { background: rgba(var(--gold),1); }
.hubBtn.quote:hover    { background: rgba(var(--silver),1); }
.hubBtn.date::before {content:"";background-position: center}
.hubBtn.quote::before {content:"";background-position: left}
.hubBtn.website::before {content:"";background-position: right}


@media (max-width:640px){
  .hubBtn{
	min-height:72px;
	
  }
}