/* hard reset */
* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    position: relative;
    padding: 0; margin: 0;
} 

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body{
    background-image: linear-gradient(to left top, #000000, #12050c, #1b0c18, #1e1123, #1e1731, #1e1b3a, #1d2043, #18254d, #1f2852, #272b58, #2e2d5d, #363062);
    padding: 0 12%;
}

#navbar-icon{
    width: 40px;
    height: 40px;
}

h2{
    color: white;
}

h4{
    color: black;
}

.container {
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: auto;
}

.container .section{
    position: relative;
    width: 100%;
    height: 100%;
    background-blend-mode: multiply;
}

.container .section:nth-child(0){
    background-size: cover;
    background-attachment: fixed;
}

.landingSnippet{
    width: 500px;
}

.reveal{
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: all 2s ease;
}

.reveal.active{
    transform: translateY(0px);
    opacity: 1;
}

.card{
    height:100%;
}

@media (max-width: 991px){
    body{
        padding: 2%;
    }

    .navbar{
        width: 95% !important;
    }

    #navbarSupportedContent { 
        background-color: white;
        border-radius: 0.5em;
        padding: 1em;
    }

    #navbarSupportedContent button{
        width: 100%;
    }

    #nav-icon{
        width: 3.2em !important;
        height: 3.2em !important;
    }

    .landingSnippet{
        width: 100%;
    }

    .section{
        text-align: center;
    }
}

    .modal-body{
        padding: 3% 8%;
    }

@media (max-width: 565px){
    .masthead-heading{
        font-size: 5.2rem !important;
    }

    .masthead-subheading{
        font-size: 1.3em !important;
    }
}