:root {
    --nav-height: 81px;
    --hero-overlay: rgba(0, 79, 28, 0.9);
}

@font-face {
    font-family: 'Ramona-Bold';
    src: url('../assets/Ramona-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Ramona-Light';
    src: url('../assets/Ramona-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Coolvetica-Regular';
    src: url('../assets/Coolvetica-Regular.otf') format('truetype');
}

html {
    scroll-behavior: smooth;
}

main {
    margin-top: var(--nav-height);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

a:focus, 
button:focus,
input:focus {
  outline: 3px solid #97BF0D;
  outline-offset: 2px;
}

.hero-section {
    background: url('../assets/folhas.png') center/cover no-repeat;
    min-height: calc(100vh - var(--nav-height));
    display: flex;
    align-items: center;
    position: relative;

    .fluid-container {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-content {
        h1 {
            font-family: "Ramona-Bold", Arial, sans-serif;
            font-size: 4.5rem;
            text-shadow: 3px 3px 0 white, -1px -1px 0 white, 
                         1px -1px 0 white, -1px 1px 0 white;
        }

        p {
            font-family: "Ramona-Light", Arial, sans-serif;
            font-size: 2.5rem;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
            text-shadow: 2px 2px 0 white, -1px -1px 0 white, 
                         1px -1px 0 white, -1px 1px 0 white;
        }

        a {
            font-family: "Coolvetica-Regular", Arial, sans-serif;
            font-size: 1.7rem;
            color: #3E3D40;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            text-align: center;
            align-items: center;
            justify-content: center;
            background-color: #97BF0D;
            height: 6rem;
            width: 17rem;
            border-radius: 15px;

            &:hover {
                background-color: #8eb30c;
            }
        }
    }
}

.angled-section {
    transform: skewY(-4.77deg);
    height: 45rem;
    overflow: visible;
    position: relative;
}

.first-section {
    background: #7ea10d;
    overflow: hidden;
    margin-bottom: 5rem;
    margin-top: 4rem;

    .texto {
        width: 50%;
        line-height: 1.2;
        text-align: left;
        margin-left: 3rem;
        z-index: 4;
        transform: skewY(4.77deg);

        h2, b {
            font-family: "Ramona-Bold", Arial, sans-serif;
        }

        h2 {
            font-size: 5.5rem;
            text-decoration: underline;
        }

        p {
            font-family: "Ramona-Light", Arial, sans-serif;
            font-size: 3rem;
        }
    }

    .angled-content {
        height: 100%;
        width: 100%;
        z-index: 3;

        .img-bg {
            transform: skewY(4.77deg);
            width: 60%;
            background: url('../assets/first-section-bg.png') center/cover no-repeat;
            background-size: 60vw;
            background-origin: content-box;
        }

        .img-compostor {
            z-index: 1;
            height: 20vw;
            margin-right: 9vw;
            margin-left: auto;
        }
    }
}


.second-section {
    background: var(--secondary-color);
    overflow: hidden;
    margin-top: 4rem;
    margin-bottom: -8rem;
    z-index: 1;

    .texto {
        width: 45%;
        max-width: 600px;
        line-height: 1.2;
        margin-right: 3rem;
        margin-top: 7rem;
        z-index: 4;
        transform: skewY(4.77deg);

        h2 {
            font-size: 4.7rem;
            font-family: "Ramona-Bold", Arial, sans-serif;
        }
    }

    .angled-content {
        height: 100%;
        width: 100%;
        z-index: 3;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
    
        .img-bg {
            margin-top: 10vw;
            transform: skewY(4.77deg);
            width: 70%;
            height: 110%;
            background: url('../assets/second-section-bg.png') center/cover no-repeat;
            background-size: 70vw;
            background-origin: content-box;
        }
    
        p {
            
            font-family: "Ramona-Light", Arial, sans-serif;
            font-size: 3rem;
            margin-left: 7rem;
            margin-top: -3rem;

            b {
                font-family: "Ramona-Bold", Arial, sans-serif;
            }
        }
    }
    
}


.registration {
    background: #008570;
    padding: 4rem 0;
    position: relative;
    z-index: 0;

    p {
        margin-top: 15rem;
        margin-bottom: 3vw;
        text-align: center;
        font-family: "Ramona-Bold", Arial, sans-serif;
        font-size: 5rem;
        color: #fff;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    }

    .container {
        margin-bottom: 5rem;
        background: rgba(255, 255, 255, 0.9);
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    }
}

@media (max-width: 1520px) {
    .first-section {
        .texto {
            h2 {
                font-size: 4.8rem;
            }

            p {
                font-size: 2.6rem;
            }
        }
    }

    .second-section {
        .texto {
            h2 {
                font-size: 4rem;
            }
        }

        .angled-content {
            p {
                font-size: 2.5rem;
            }
        }
    }
}

@media (max-width: 1145px) {
    .first-section {
        .texto {
            h2 {
                font-size: 4rem;
            }

            p {
                font-size: 2rem;
            }
        }
        
        .angled-content {
            .img-bg {
                background-size: 65rem;
            }
        
            p {
                font-size: 2.5rem;
            }
        }
    }
    
    .second-section {
        .texto {
            h2 {
                font-size: 3.5rem;
            }
        }
        
        .angled-content {
            p {
                font-size: 1.9rem;
            }
        }
    }
}


@media (max-width: 992px) {

    .first-section {
        .texto {
            margin-top: 3rem;
            width: 100%;
            height: 30%;
            text-align: center;
            margin-left: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .angled-content {
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .img-bg {
                width: 100vw;
                height: 70%;
                background-size: 150%;
            }
        }
    }

    .second-section {
        .texto {
            h2 {
                font-size: 3rem;
            }
        }
        
        .angled-content {
            p {
                font-size: 1.4rem;
            }
        }
    }
}

@media (max-width: 767px) {
    .hero-section {
        .hero-content {

            h1 {
                font-size: 4rem;
            }

            p {
                font-size: 2rem;
            }

            a {
                font-size: 1.5rem;
                height: 5rem;
                width: 16rem;
            }
        }
    }

    .first-section {
        .texto {
            width: 100%;
            height: 30%;
            text-align: center;
            margin-left: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            h2 {
                font-size: 10vw;
            }

            p {
                font-size: 6vw;
            }
        }

        .angled-content {
            flex-direction: column;
            justify-content: center;
            align-items: center;
    
            .img-bg {
                width: 130vw;
                height: 60%;
                background-size: 100%;
                margin-right: 5vw;
            }
            
            .img-compostor {
                height: 40vw;
                width: auto;
                margin-right: auto;
                margin-left: 40vw;
            }
        }
    }

    .second-section {
        .texto {
            width: 100%;
            height: 30%;
            text-align: center;
            margin-left: 3rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            h2 {
                font-size: 8vw;
            }

            p {
                font-size: 4vw;
            }
        }

        .angled-content {
            .img-bg {
                text-align: center;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 100vw;
                height: 70%;
                background-size: 100%;
                
                p {
                    margin-left: 0;
                }
            }
        }
    }
}

@media (max-width: 576px) {
    .hero-section {
        .hero-content {

            h1 {
                font-size: 2.7rem;
            }

            p {
                font-size: 1.6rem;
            }

            a {
                font-size: 1.6rem;
                height: 5rem;
                width: 16rem;
            }
        }
    }
    
    .registration {
        padding: 2rem 0;
    }

    .first-section {
        .texto {
            width: 100%;
            height: 30%;
            text-align: center;
            margin-left: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            h2 {
                font-size: 12vw;
            }

            p {
                font-size: 7vw;
            }
        }

        .angled-content {
            flex-direction: column;
            justify-content: center;
            align-items: center;
    
            .img-bg {
                width: 150vw;
                height: 60%;
                background-size: 100%;
                margin-right: 5vw;
            }
            
            .img-compostor {
                height: 50vw;
                width: auto;
                margin-right: 29vw;
            }
        }
    }

    .second-section {
        .texto {
            width: 100%;
            height: 30%;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            h2 {
                font-size: 10vw;
            }

            p {
                font-size: 6vw;
            }
        }

        .angled-content {
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 2rem 0;
    
            .img-bg {
                width: 120vw;
                height: 60%;
                background-size: 100%;
            }
        }
    }

    .registration {

        p {
            font-size: 4rem;
        }
    }
}