body {
margin:0;
padding:0;
font-family: "Segoe UI", Arial, sans-serif;
background:black;
overflow:hidden;
}


/* ---------- BACKGROUND ---------- */

.hero {

position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:url("images/bgm.jpg") center/cover no-repeat;

display:flex;
justify-content:center;
align-items:center;

}


/* ---------- OVERLAY ---------- */

.overlay {

width:100%;
height:100%;

backdrop-filter: blur(2px);

background:rgba(0,0,0,0.35);

display:flex;
flex-direction:column;

align-items:center;
justify-content:flex-start;

text-align:center;
color:white;

padding-top:120px;

animation:fadeIn 1s ease;

}


/* ---------- TEXT ---------- */

h1 {

font-size:50px;
margin:0;
font-weight:700;
letter-spacing:1px;

animation:slideDown 0.8s ease;

}

p {

font-size:18px;
color:#ddd;
margin-top:10px;

animation:fadeIn 1.2s ease;

}


/* ---------- BUTTONS ---------- */

.buttons {

margin-top:40px;

display:flex;
flex-direction:column;

gap:15px;

width:80%;
max-width:300px;

animation:fadeIn 1.5s ease;

}


/* ---------- BUTTON BASE ---------- */

.buttons a {

text-decoration:none;

padding:15px;

font-size:18px;

border-radius:12px;

font-weight:600;

text-align:center;

transition:0.25s;

}


/* ---------- ORDER BUTTON ---------- */

.order {

background:orange;
color:black;

box-shadow:0 0 10px orange;

}

.order:hover {

box-shadow:0 0 20px orange;
transform:scale(1.05);

}


/* ---------- MENU BUTTON ---------- */

.menu {

background:#222;
color:white;

box-shadow:0 0 10px #666;

}

.menu:hover {

box-shadow:0 0 15px white;
transform:scale(1.05);

}



/* ---------- PC SCREEN ---------- */

@media (min-width:700px){

h1{
font-size:70px;
}

p{
font-size:22px;
}

.buttons{
flex-direction:row;
width:auto;
}

.buttons a{
padding:18px 40px;
}

.overlay{
padding-top:140px;
}

}



/* ---------- MOBILE BACKGROUND ---------- */

@media (max-width:700px){

.hero{

background:url("images/bgm.jpg") center/cover no-repeat;

}

h1{
font-size:32px;
}

p{
font-size:16px;
}

.overlay{
padding-top:90px;
}

}



/* ---------- ANIMATION ---------- */

@keyframes fadeIn {

from {opacity:0}
to {opacity:1}

}

@keyframes slideDown {

from {
opacity:0;
transform:translateY(-20px);
}

to {
opacity:1;
transform:translateY(0);
}

}