html, body {
height: 100%;
margin: 0;
padding: 0;
scroll-behavior: smooth;
font-family: 'Prompt', 'Segoe UI', 'Kanit', Tahoma, sans-serif;
background-image: url('https://images.unsplash.com/photo-1566576721346-d4a3b4eaeb55?auto=format&fit=crop&w=1950&q=80');
background-size: cover;
background-position: center;
animation: fadeIn 2s ease;
}
body::before {
content: "";
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: -1;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fadeIn 1.5s ease-out forwards;
}
/*
เฟดขึ้นมาอย่างนุ่มนวล
*/
.content {
position: relative;
z-index: -1;
}
.caption {
height: 50vh;
padding: 10px ;
color: #c7f3aa;
font-weight: bold;
font-family: "Audiowide", sans-serif;
text-align: center;
}
.lead {
padding: 10px ;
color: #f3f2c2;
font-weight: 100;
font-family: 'Prompt', sans-serif;
text-align: center;
}
.store-highlight {
font-family: "Audiowide", sans-serif;
color: #fff; /* สีตัวอักษร */
padding: 0 6px; /* เพิ่มช่องว่างซ้ายขวา */
border-radius: 5px; /* มุมมน */
width: 0px;
height: 0px;
}
.navbar {
transition: background-color 0.3s ease;
}
.navbar.transparent {
background-color: transparent !important;
}