html {
    height: 100vh;
    margin: 0;
    padding: 0;
}

body {
   background-color: rgba(0, 0, 0, 1);
   color: #fff;

}

.content {
    height: 90vh;
    text-align: center;
}


h1{
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 2.75rem;
    margin-bottom: 1rem;
}

p {
    font-size: 1.25rem;
    line-height: 1.5rem;
    text-wrap: pretty; 
}

a{
    color: #ffd800;
    line-height: 1;
    white-space:nowrap;
}

a:hover,
a:focus-visible{
    color: #b6ff00;
}

a:focus-visible{
    outline: 3px solid #b6ff00;
    outline-offset: 2px;
    text-decoration: none;
}

    a:hover img {
        opacity: 0.8;
    }


.hero-img{
    margin-block-start: 8vh;
    margin-block-end: 3rem;
}

/*--------------------------------------------------------------------------------------------------*/
/*----------------------------------------COL-SM----------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/
@media (min-width: 576px) {
    .hero-img {
        margin-block-start: 15vh;
        margin-block-end: 3rem;
    }

    .content {
        height: 85vh;
    }
    /*--------------------------------------------------------------------------------------------------*/
    /*----------------------------------------COL-MD----------------------------------------------------*/
    /*--------------------------------------------------------------------------------------------------*/
    @media (min-width: 768px) {

        h1 {
            font-size: 3.5rem;
            line-height: 3.75rem;
        }

        p {
            font-size: 1.5rem;
            line-height: 1.75rem;
        }

        .content {
            height: 82vh;
            padding: 5rem 3rem;
        }

        .footer-image-container-l,
        .footer-image-container-r {
            padding-inline: 3rem;
        }

        .hero-img {
            margin-block-start: 0;
            margin-block-end: 1rem;
        }
    }

    /*--------------------------------------------------------------------------------------------------*/
    /*----------------------------------------COL-LG----------------------------------------------------*/
    /*--------------------------------------------------------------------------------------------------*/
    @media (min-width: 990px) {

        h1 {
            font-size: 3.75rem;
            line-height: 4rem;
        }

        p {
            font-size: 1.675rem;
            line-height: 1.75rem;
        }

        .content {
            padding: 4rem 5rem 5rem;
        }

        .main-img-container {
            padding-inline: 6rem;
        }

        .footer-image-container-l,
        .footer-image-container-r {
            padding-inline: 7rem;
        }
    }

    /*--------------------------------------------------------------------------------------------------*/
    /*----------------------------------------COL-XL----------------------------------------------------*/
    /*--------------------------------------------------------------------------------------------------*/
    @media (min-width: 1200px) {

        h1 {
            font-size: 4rem;
            line-height: 4.25rem;
        }

        p {
            font-size: 1.75rem;
            line-height: 2rem;
        }

        .content {
            padding: 3rem 8rem 5rem;
        }

        .main-img-container {
            padding-inline: 10rem;
        }

        .hero-img {
            margin-block-start: 0;
            margin-block-end: 1rem;
        }

        .footer-image-container-l {
            padding-inline: 10rem;
        }

        .footer-image-container-r {
            padding-inline: 8rem;
        }
    }

    /*--------------------------------------------------------------------------------------------------*/
    /*----------------------------------------COL-XXL---------------------------------------------------*/
    /*--------------------------------------------------------------------------------------------------*/
    @media (min-width: 1400px) {

        h1 {
            font-size: 5rem;
            line-height: 5.25rem;
        }

        p {
            font-size: 1.75rem;
            line-height: 2rem;
        }

        .content {
            padding: 2rem 8rem 3rem;
        }

        .main-img-container {
            padding-inline: 19rem;
        }

        .hero-img {
            margin-block-start: 0;
            margin-block-end: .5rem;
        }

        .footer-image-container-l {
            padding-inline: 12rem;
        }

        .footer-image-container-r {
            padding-inline: 10rem;
        }
    }
}

/*--------------------------------------------------------------------------------------------------*/
/*----------------------------------------COL-XXXL--------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/
@media (min-width: 1600px) {

    h1 {
        font-size: 6rem;
        line-height: 6.25rem;
    }

    p {
        font-size: 2rem;
        line-height: 2.5rem;
    }

    .content {
        padding: 2rem 13rem 5rem;
    }

    .main-img-container {
        padding-inline: 16rem;
    }

    .footer-image-container-l {
        padding-inline: 14rem;
    }

    .footer-image-container-r {
        padding-inline: 12rem;
    }
}

/*--------------------------------------------------------------------------------------------------*/
/*----------------------------------------COL-XXXXL-------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/
@media (min-width: 1920px) {


    .content {
        padding: 2rem 17rem 5rem;
    }

    .main-img-container {
        padding-inline: 17rem;
    }

    .hero-img {
        margin-block-start: 0;
        margin-block-end: 0;
    }
}