@font-face{
font-family:'font-main';
src:url('../fonts/Lato-Regular.ttf') format('opentype');
font-style:normal;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'font-main';
background:#000;
overflow-x:hidden;
}


/* TOP BAR */

.top-bar{
background:#fe9d4e;
color:#fff;
text-align:center;
font-size:0.9rem;
letter-spacing:.08em;
padding:.7em 1em;
font-weight:600;
}


/* MAIN SECTION */

.main-section{
position:relative;
width:100%;
height:100vh;
}


/* DESKTOP IMAGE */

.img-desktop{
width:100%;
height:100%;
object-fit:fill;
display:block;
}


/* MOBILE IMAGE */

.img-mobile{
display:none;
width:100%;
height:100%;
object-fit:fill;
}


/* MODAL */

.modal-box{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
    background: rgb(0 0 0 / 67%);
padding:3rem 2rem;
text-align:center;
border-radius:.4rem;
max-width:40rem;
width:80%;
}

.modal-box p{
color:#fff;
font-size:1.3rem;
margin-bottom:2rem;
}

.modal-actions{
display:flex;
justify-content:center;
gap:2rem;
}


/* BUTTONS */

.action-btn{
padding:.9rem 2.4rem;
font-size:1rem;
font-weight:600;
border:none;
cursor:pointer;
}

.accept{
background:#fe9d4e;
color:#000;
}

.reject{
background:#40b17a;
color:#fff;
}


/* FOOTER */

.site-footer{
background:#000;
padding:1rem;
text-align:center;
}

.site-footer a{
color:#fff;
text-decoration:none;
font-size:.9rem;
}

.site-footer a:hover{
text-decoration:underline;
}


/* MOBILE */

@media (max-width:768px){

.main-section{
height:94vh;
}

.img-desktop{
display:none;
}

.img-mobile{
display:block;
}

.modal-box{
width:90%;
padding:2rem;
margin-top: 20px;
}

.modal-box p{
font-size:1rem;
}

.modal-actions{
gap:1rem;
}

.action-btn{
padding:.8rem 1.8rem;
font-size:.9rem;
}

.top-bar{
font-size:.75rem;
}

}