/* Variables */
:root {
    --black: #000;
    --white: #fff;
    --main-margin: 0 auto;
    --max-width: 960px;
    --max-width-mobile: 768px; 
}

body {
    font-family: "Roboto", serif;
    margin: 0;

    h1 {
        font-size: 3em;
        font-weight: 500;
    }

    p {
        font-size: 1em;
        line-height: 1.55em;
    }

    a {
        color: var(--white);
        font-size: 1em;
    }

    section {
        &#banner {
            div {
                background-color: var(--black);
                color: var(--white);
                padding: 15px 0;

                span {
                    display: block;
                    margin: var(--main-margin);
                    max-width: var(--max-width);

                    a {
                        color: inherit;
                        font-size: inherit;
                        text-decoration: none;
                    }
                }                
            }
        }

        &#hero {

            div#image-container {
                background-color: black;
                background-size: cover;
                margin-bottom: 10px;

                div#image-content-container {
                    margin: var(--main-margin);
                    max-width: var(--max-width);

                    div#text-container {
                        display: flex;
                        flex-direction: column;                        
                        color: var(--white);
                        padding: 8% 0;
    
                        img {
                            width: 275px;
                        }

                        h1 {
                            margin-bottom: 0;
                        }
                        
                    }
                }                
            }

            div#video-modal {
                visibility: hidden;
                position: fixed;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9));
                opacity: 0;
                transition: opacity .5s ease-in-out;

                &.visible {
                    visibility: visible;
                    opacity: 1;

                    &>div {
                        position: fixed;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        max-width: var(--max-width);
                        width: 100%;
                        background-color: var(--black);
                        text-align: right;
                        margin: 0 auto;
    
                        a#close-video-modal {
                            display: inline-block;
                            color: var(--white);
                            text-decoration: none;
                            margin: 1% 2% 0 0;                  
                        }
        
                        video {
                            width: 90%;
                            height: auto;
                            padding: 2% 5% 5% 5%;
                        }
                    }
                }                                
            }
        }

        &#main {
            div#main-container {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-between;
                margin: var(--main-margin);
                max-width: var(--max-width);
                padding-top: 3em;

                div {
                    width: 47%;

                    img {
                        width: 100%;
                    }
                }

                h2 {
                    font-size: 1em;
                }

                p {
                    font-size: 1em;
                }
            }
        }
    }
}

@media screen and (max-width: 960px) {
    :root {
        --main-margin: 0 5%;
    }
}

@media screen and (max-width: 768px) {
    /* Mobile Variables */
    :root {
        --main-margin-amount: 7%;
        --main-margin: 0 var(--main-margin-amount);
    }

    body {
        h1 {
            font-size: 3em;
        }
        section {
            &#hero {
                div#image-container {
                    div#image-content-container {

                        div#text-container {
                            padding: 10% 0 20% 0;
                        }
                    }                    
                }
            }

            &#main {
                div#main-container {
                    flex-direction: column;
                    padding-top: 0;

                    div {
                        width: 100%;
                        margin-top: var(--main-margin-amount);
                    }

                    div:last-of-type {
                        margin-bottom: var(--main-margin-amount);
                    }
                }
            }
        }
    }
}