@font-face {
    font-family: "HeroFont";
    src: url("fonts/Nightcore_Demo.ttf");
}
.title {
    color: green;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.h1 {
    font-family: "HeroFont";
}
body{
    font-family:Arial, Helvetica, sans-serif;
    color:white;
    background:#111;
}
/* ==========================
   Navigation
========================== */

.navbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    padding:25px 7%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    z-index:1000;

    transition:.35s ease;

}

.logo a{

    color:white;

    text-decoration:none;

    font-size:1.5rem;

    font-weight:bold;

    letter-spacing:2px;

}

.nav-links{

    list-style:none;

    display:flex;

    gap:40px;

}

.nav-links a{

    color:white;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.85rem;

    transition:.25s;

    position:relative;

}
.menu-toggle{

    width:42px;
    height:42px;

    background:none;

    border:none;

    cursor:pointer;

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:8px;

}

.menu-toggle span{

    width:100%;
    height:2px;

    background:white;

    transition:.4s;

}
.menu{

    position:fixed;

    inset:0;

    background:#0b0b0b;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:2rem;

    transform:translateY(-100%);

    transition:.5s;

    z-index:900;

}

.menu a{

    color:white;

    text-decoration:none;

    font-size:2rem;

    letter-spacing:4px;

}
.menu.open{

    transform:translateY(0);

}

/* -----------------------
   Hero
----------------------- */
.logo{

    display:flex;

    align-items:center;

}
.logo img{

    height:70px;

    width:auto;

    transition:.3s;

}
.hero{

    height:100vh;

    background:
        linear-gradient(
            rgba(0,0,0,.45),
            rgba(0,0,0,.45)
        ),
        url("../images/Cleanup_Crew.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    display:flex;

    justify-content:center;

    align-items:center;

}
.scroll-indicator{

    position:absolute;

    bottom:40px;
    left:50%;

    transform:translateX(-50%);

    display:flex;
    flex-direction:column;
    align-items:center;

    text-decoration:none;

    color:white;

    z-index:20;

    letter-spacing:3px;

    font-size:.8rem;

    text-transform:uppercase;

    opacity:.8;

    transition:.3s;

}

.scroll-indicator:hover{

    opacity:1;

    transform:translateX(-50%) translateY(5px);

}

.arrow{

    margin-top:10px;

    width:18px;
    height:18px;

    border-right:2px solid white;
    border-bottom:2px solid white;

    transform:rotate(45deg);

    animation:bounce 2s infinite;

}

/* Bounce Animation */

@keyframes bounce{

    0%,20%,50%,80%,100%{
        transform:rotate(45deg) translate(0,0);
    }

    40%{
        transform:rotate(45deg) translate(8px,8px);
    }

    60%{
        transform:rotate(45deg) translate(4px,4px);
    }

}

/* Background image */

.hero-image{

    position:absolute;

    width:100%;
    height:100%;

    object-fit:cover;

    top:0;
    left:0;

}


/* Dark overlay */

.overlay{

    position:absolute;

    inset:0;

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

}


/* Centered text */

.hero-content{

    position:relative;

    z-index:10;

    width:100%;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:2rem;

}


.hero h1{
font-family: "HeroFont", sans-serif;
    font-size:clamp(3rem,8vw,7rem);

    letter-spacing:.1em;

    margin-bottom:20px;

}


.hero p{

    font-size:clamp(1rem,2vw,1.4rem);

    margin-bottom:20px;

}


/* Button */

.button{

    display:inline-block;

    padding:15px 35px;

    border:2px solid white;

    color:white;

    text-decoration:none;

    transition:.3s;

}

.button:hover{

    background:white;

    color:black;

}


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

main{

    background:#38463C;

    padding:6rem 10%;

}
.home-grid{

    display:grid;

    grid-template-columns: 1fr 1.4fr;

    gap:2rem;

    margin-top:5rem;

}
@media (max-width:900px){

    .home-grid{

        grid-template-columns:1fr;

    }

}
.card{

    box-shadow:
    inset 0 1px rgba(255,255,255,.03),
    0 15px 40px rgba(0,0,0,.45);
    border-style:solid;
    border-width: 10px;
    border-image: url("https://files.catbox.moe/zfk7ik.gif") 7 fill round;
    padding:2rem;

    position:relative;

    transition:.35s;

}
.card p {
    color: #1d271a;
    opacity:.95;
}
.card h2 {
    color: #1d271a;
    opacity:.95;
}
.card::before{

    content:"";

    position:absolute;

    inset:0;

    background:url(images/grunge_paper.jpg);

    opacity:.70;

    pointer-events:none;

}
.card:hover {
    transform:translateY(-4px);

}
.section-header h2{

    color:#1d271a;

    font-size:1.6rem;

    font-weight:400;

    letter-spacing:2px;

}
.section-body{

    color: #1d271a;

    line-height:1.8;

    font-size:1rem;

}