/* ---------- Fonts ---------- */

@font-face {
    font-family: "Poppin";
    src: url("assets/fonts/Poppin-Regular.otf") format("opentype");
}

@font-face {
    font-family: "Lefty";
    src: url("assets/fonts/Lefty.otf") format("opentype");
}


/* ---------- Reset ---------- */

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


html,
body {

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

}


/* ---------- Background Image ---------- */

.bg-image {

    position: fixed;

    top: 0;
    left: 0;


    width: 100vw;
    height: 100vh;


    object-fit: cover;

    object-position: center center;


    z-index: 0;

}


.overlay {

    position: fixed;

    inset: 0;


    background: rgba(0,0,0,.35);

    backdrop-filter: blur(2px);


    z-index: 1;

}



/* ---------- Body ---------- */

body {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;


    position: relative;


    color: white;

}



/* ---------- Main ---------- */

main {

    position: relative;

    z-index: 2;


    width: min(420px, 90%);


    margin: 0 auto;


    text-align: center;

}


/* ---------- Title ---------- */

h1 {

    font-family: "Poppin", sans-serif;


    font-size: 3.4rem;


    font-weight: normal;


    margin-bottom: 50px;


    letter-spacing: 1px;

}



/* ---------- Buttons ---------- */

.buttons {

    display: flex;

    flex-direction: column;


    gap: 16px;


    width: 100%;

}


.button {

    display: flex;


    justify-content: center;


    align-items: center;


    width: 100%;


    font-family: "Lefty", sans-serif;


    font-size: 1.3rem;


    text-decoration: none;


    text-align: center;


    color: white;


    background: #29412B;


    padding: 18px 20px;


    border: none;


    border-radius: 6px;


    transition: background .2s ease, transform .2s ease;

}


.button:hover {

    background: #35553A;


    transform: translateY(-2px);

}



/* ---------- Footer ---------- */

footer {

    position: absolute;


    bottom: 28px;


    left: 0;


    width: 100%;


    z-index: 2;


    text-align: center;


    font-family: "Poppin", sans-serif;


    font-size: .9rem;


    letter-spacing: 1px;

}



/* ---------- Mobile ---------- */

@media(max-width:600px){

    h1 {

        font-size: 2.7rem;

    }


    .button {

        font-size: 1.15rem;

        padding: 16px;

    }

}