:root {
  --accent:#8B1E3F;
  --text:#35281D;
  --card-width:260px;
  --card-height:360px;
  --ease:cubic-bezier(.2,.9,.3,1);
}

body {
  background-image: url(../images/background.png);
  margin:0;
  font-family:"sofia-pro-soft", sans-serif;
  color:var(--text);
  overflow-x:hidden;
}

.logo {
  width: clamp(70px, 10vw, 140px);
  transition: width 0.25s ease;
}

.logo-link {
  position:absolute;
  top:14px;
  left:20px;
}

.site-header {
  background-image: url(../images/background2.png);
  padding:24px 20px;
  padding-bottom:24px;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  box-shadow:0 6px 20px rgba(0,0,0,0.15);
}

.header-center {
  
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  width:100%;
}

.site-title {
  font-family:"skippy-sharp", sans-serif;
  margin:0 0 8px;
  font-size:6.7rem; 
}

.nav-buttons {
  display:flex;
  gap:12px;
  justify-content:center;
  width:100%;
  margin-top:6px;
}

.nav-buttons button {
  font-family:"sofia-pro-soft", sans-serif;
  padding:9px 16px;
  border:none;
  background:var(--accent);
  color:#fff;
  border-radius:6px;
  cursor:pointer;
  transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.nav-buttons button:hover {
  transform: translateY(-3px) scale(1.05);
  background-color: #A62245;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

.main-content {
  max-width:800px;
  margin:180px auto 0;
  text-align:center;
}

.card-container {
  margin-top: 270px; 
  display:flex;
  gap: 30px;
  flex-wrap:wrap;
  justify-content:center;
  margin-bottom: 30px;
}

.card {
  width:250px;
  height:350px;
  perspective:1200px;
}

.card-inner {
  width:100%;
  height:100%;
  position:relative;
  transform-style:preserve-3d;
  transition:transform 0.8s var(--ease);
  border-radius:16px;
  box-shadow:0 12px 28px rgba(0,0,0,0.4);
}

.card:hover .card-inner {
  transform:rotateY(180deg);
  box-shadow:0 20px 40px rgba(255,255,255,0.4);
}

.card:hover {
  filter:drop-shadow(0 0 12px rgba(255,255,255,0.35));
}

.card-front,
.card-back {
  position:absolute;
  width:100%;
  height:100%;
  border-radius:16px;
  overflow:hidden;
  backface-visibility:hidden;
}

.card-back {
  transform:rotateY(180deg);
}

.card-front img,
.card-back img {
  width:100%;
  height:100%;
  object-fit:cover;
}

@media (min-width: 1100px) {
  .card {
    width: 300px; 
    height: 400px;
    flex: 0 0 calc(33.33% - 40px); 
  }
}

@media (max-width: 1099px) and (min-width: 700px) {
  .card {
    flex: 0 0 calc(50% - 40px);
  }
}

@media (max-width: 699px) {
  .card {
    flex: 0 0 100%;
  }
}