body{
  margin:0;
  font-family:'Inter',sans-serif;
  background:#0b110e;
  color:#eee;
  transition:all .35s ease;
}

.container{
  max-width:1100px;
  margin:auto;
  padding:60px 20px;
}

h1,h2,h3{
  font-family:'Playfair Display',serif;
  color:#d4af37;
}

.top-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;
  background:rgba(0,0,0,0.7);
  margin-bottom: 20px;
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.nav{
  max-width:1200px;
  margin:auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.nav-links{
  display:flex;
  gap:28px;
}

.nav-links a{
  color:#fff;
  text-decoration:none;
}

.top-logo{
  height:55px;
}

.container{
  max-width:1100px;
  margin:auto;
  padding:120px 20px 60px;
}

.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  padding-top:120px;
}

.hero-inner{
  position:relative;
  z-index:2;
  text-align:center;
}

.hero-logo{
  width:clamp(220px,40vw,380px);
}

.buttons{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:20px;
  flex-wrap:wrap;
}

.btn{
  padding:12px 18px;
  border-radius:10px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,0.15);
  color:#fff;
  transition:0.25s;
}

.btn.primary{
  background:#38bdf8;
  color:#06101c;
  border:none;
}

.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;
}

.gallery img{
  width:100%;
  border-radius:14px;
  transition:.3s;
}

.gallery img:hover{
	transform:scale(1.03);
}

.gallery figure{
  margin:0;
}

.gallery figcaption{
  padding-top:8px;
  text-align:center;
}

.services{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,350px));
  justify-content:center;
  gap:30px;
}

.services img{
  width:100%;
  height:250px;
  object-fit:cover;
  display:block;
  margin-bottom:15px;
  border-radius:14px;
  break-inside:avoid;
}

.services figure{
  margin:0;
}

.services figcaption{
  text-align:center;
  margin-top:10px;
}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.card img{
  width:100%;
  height:220px;
  object-fit:cover;
}

.footer{
  border-top:1px solid rgba(255,255,255,0.08);
  text-align:center;
  padding:40px 20px;
  margin-top:80px;
}

@media(max-width:900px){

  .cards{
    grid-template-columns:1fr;
  }

  .gallery,
  .services{
    grid-template-columns:1fr;
  }

  .nav{
    flex-direction:column;
    gap:15px;
  }

  .nav-links{
    flex-wrap:wrap;
    justify-content:center;
    gap:16px;
  }
  
}
  
.retro-toggle{
position:fixed;
bottom:20px;
right:20px;
z-index:9999;

background:#d4af37;
color:#111;

padding:12px 16px;

border:none;
border-radius:10px;

font-weight:700;
cursor:pointer;

box-shadow:
0 10px 25px rgba(0,0,0,.25);

transition:.25s;
}

.retro-toggle:hover{
transform:translateY(-2px);
}

.retro .hero{
background:
url("https://www.transparenttextures.com/patterns/stardust.png");
}

.retro .hero-logo{
filter:
drop-shadow(0 0 10px yellow)
drop-shadow(0 0 20px red);
}

.retro p{
font-family:"Comic Sans MS",Verdana,sans-serif;
}

body.retro{
background:#c0c0c0;
color:#000;
font-family:Verdana,Arial,sans-serif;
background-image:
radial-gradient(circle at 10% 20%, rgba(255,255,255,.3) 1px, transparent 1px);
background-size:20px 20px;
}

.retro h1,
.retro h2,
.retro h3{
color:#000080;
font-family:"Comic Sans MS",Verdana,sans-serif;
text-shadow:2px 2px #fff;
}

.retro .top-header{
background:#808080;
backdrop-filter:none;
margin-bottom: 20px
border-bottom:3px outset #d4d0c8;
}

.retro .nav-links a{
color:#0000ee;
text-decoration:underline;
font-weight:bold;
}

.retro .btn{
background:#d4d0c8;
color:#000;
border:2px outset #fff;
border-radius:0;
}

.retro .btn.primary{
background:#ffff66;
color:#000;
}

.retro .hero::before{
content:"WELCOME TO STEVE'S SIGN SHOPPE";
display:block;
position:absolute;
top:30px;
left:50%;
transform:translateX(-50%);
font-size:clamp(20px,3vw,40px);
font-weight:bold;
color:#ff0000;
animation:blink 1s infinite;
}

.retro .footer::before{
content:"Visitors Since 1998: 000042731";
display:block;
margin-bottom:10px;
font-family:monospace;
font-size:18px;
}

.retro .footer::after{
content:"Best viewed in Netscape Navigator • Member of the Sign Shop WebRing • Under Construction";
display:block;
margin-top:10px;
color:#0000ee;
}

.retro .page-hero{
  background:#000080;
  color:white;
  border-top:4px ridge silver;
  border-bottom:4px ridge silver;
}

.retro .card,
.retro .review{
  background:#d4d0c8;
  color:black;
  border:2px outset white;
}

.retro .contact-form input,
.retro .contact-form textarea{
  background:white;
  color:black;
  border:2px inset gray;
}

@keyframes blink{
50%{opacity:.4;}
}

.card{
background:#131b16;
border:1px solid rgba(255,255,255,.08);
border-radius:14px;
overflow:hidden;
}

.card-content{
padding:20px;
}

.page-content{
padding-top:120px;
}

.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
}

.about-grid img{
width:100%;
border-radius:14px;
}

/* PAGE HERO */

.page-hero{
  padding:180px 20px 80px;
  text-align:center;
}

.page-hero h1{
  font-size:clamp(2rem,5vw,4rem);
  margin:0;
}

/* ABOUT */

.about-page{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}

.about-page img{
  width:100%;
  border-radius:14px;
}

/* CONTACT */

.contact-form{
  max-width:700px;
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.contact-form input,
.contact-form textarea{
  padding:14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  background:#131b16;
  color:#fff;
}

.contact-form textarea{
  min-height:180px;
}

.contact-form button{
  padding:14px;
  border:none;
  border-radius:10px;
  background:#38bdf8;
  color:#06101c;
  cursor:pointer;
}

/* REVIEWS */

.review{
  max-width:800px;
  margin:180px auto 80px;
  padding:30px;
  background:#131b16;
  border-radius:14px;
  text-align:center;
}

.stars{
  font-size:1.5rem;
  margin-bottom:10px;
  color:#d4af37;
}

.name{
  margin-top:15px;
  opacity:.8;
}

/* FOOTER LINKS */

.footer-links{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-top:10px;
}

.footer-links a{
  color:#fff;
  text-decoration:none;
}

.retro .clipart {
  display: block;
}

.clipart {
  display: none;
}

body.retro .clipart {
  display: block;
  margin: 15px auto;
  max-width: 180px;
  height: auto;
  transform: rotate(-2deg);
  position: relative;
}

body.retro .float1 {
  top: 200px;
  left: 80px;
  transform: rotate(4deg);
}

body.retro .float2 {
  top: 320px;
  left: 20px;
  transform: rotate(-6deg);
}

body:not(.retro) .clipart {
  display: none !important;
}

/* MOBILE */

@media(max-width:900px){

  .about-page{
    grid-template-columns:1fr;
  }

}