/* Content Wrapper Style Start */
     /* Fix Anchor overlap contents
    Reference from: https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header */
    .anchor {
        padding-top: 100px;
        margin-top: -100px;
        z-index: -1;
    }

    body {
        
        background: rgb(220, 235, 225);
    }

    .main {
        margin-left:auto;
        margin-right: auto;
        width: 95%;
        height: auto;
        display: grid;
        grid-gap: 15px 0px 0px 0px;
    }

    footer {
        height: 60px;
        background:rgb(200, 233, 174);
        margin-right: auto;
        margin-left: auto;
        margin-top: 20px;
        border-style:groove;
        border-color: bisque;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
    }

    footer div {margin-right: 15px; font-family: cursive, 'Times New Roman', Times, serif;}
    footer div a {text-decoration: none; font-weight: bold; color: darkolivegreen}
    /* Content Wrapper Style End */


    
   

    /* Header Start */
    header {
        z-index: 1;
        position:fixed; 
        width: 100%;
        height: auto;
        background:rgb(200, 233, 174);
        display: flex;
        flex-direction: row;
        align-content: center;
        border-style:groove;
        border-color: bisque;
        top: 0px;
        right: 10px;
    }

    #logo {
        display: flex;
        width: 40%;
        height: auto;
        flex-direction: row;
        align-content: center;
    }

        #header-img {
            width: 80px;
            height: auto;
            margin-left: 20px;
            margin-top: 10px;
        }

        #title {
            margin-left: 10px;
            width: 100%;
            font-family: 'Sacramento', cursive;
            font-size: 2em;
            font-weight: bold;
            align-self: center;
        }

    #naV {
        justify-self: flex-end;
        height: auto;
        width: 100%;
        display: grid;
        flex-wrap: wrap;
        grid-template-columns: repeat(auto-fill, auto);
        grid-template-rows: repeat(auto-fill,auto);
    }

    header ul {
        margin-right: 10px;
        width: 100%;
        list-style-type: none;
        float: right;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    header ul li {
        margin: 5px 5px 0px 15px;
    }

    .nav-link{
        text-decoration: none; /*No underline*/
        display: inline-block; /*Anchor box*/
        padding: 10px 15px 10px 15px;
        font-weight: bolder;
        font-style: oblique;
        color: rgb(0, 0, 0);
        font-size: 1rem;
    }

    li a:hover {
        background: rgba(156, 163, 156, 0.3);
        box-shadow: -1.5px 1.5px 0.5px 0 lightslategrey;
        transition: all 0.5s ease;
    }
    /* Header End */
    

    /*Main Content Style Start */

    form label {font-weight: bold;}
    #email {width: 80%;}
    

    #main {
        /* Grid display defined above*/
        grid-template-columns: 30% 70%;
        grid-template-rows: auto auto auto auto auto auto auto auto;
        grid-template-areas:
        "top_tile top_tile"
        "email video"
        "feature_tile feature_tile"
        "feature feature"
        "product_tile product_tile"
        "product product"
        "buy_tile buy_tile"
        "buy buy";
    }

    #top_title{grid-area: top_tile;}
    #feature_title{grid-area: feature_tile;}
    #product_title{grid-area: product_tile;}
    #buy_title {grid-area: buy_tile;}

    .titles {
        font-size: 2em;
        margin-top: 10px;
        text-align: center;
        justify-self: center;
        align-self:flex-end;
        border-radius: 40%;
        width: 80%;
        font-family: 'Acme', sans-serif; 
    }

    #form, #vid, #features, #products, #buy {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    #features div, #products div, #buy div {margin: 5px;}

    #form {
        grid-area: email; width: 100%; height: 100%;
        text-align: center; flex-direction: column; flex-wrap: wrap;
        background-color: rgba(163, 173, 76, 0.144);
        border-radius: 40px;
        justify-self: center;
        align-self: center;
        box-shadow: 2px 2px 2px 0 silver;
    }
    #vid{grid-area: video; width: 100%; text-align: center; flex-direction: column;}

    /*Feature grid*/
    #features{grid-area: feature; width: 100%; flex-direction: column; height: auto;}
        .feature_block {
                padding: 20px;
                width: 70%; 
                display: flex; 
                flex-direction: row;
                background: linear-gradient(135deg, rgba(226, 226, 226, 0.151) 0%,rgba(221, 221, 221, 0.082) 16%,rgba(219,219,219,0.21) 24%,rgba(216,216,216,0.17) 38%,rgba(211, 211, 211, 0.075) 59%,rgba(209, 209, 209, 0.13) 70%,rgba(230, 230, 230, 0.096) 84%,rgba(254, 254, 254, 0.11) 100%);
                border-style: outset;
            }

            /*Hover transition*/
            .feature_block:hover {
                animation-name: feature_hov;
                animation-duration: 300ms;
                animation-fill-mode: forwards;
                transition: all 400ms ease;
            }
            @keyframes feature_hov{
                100% {
                    transform: scale(1.05);
                    border-style: outset;
                    background-color: rgb(235, 250, 207);
                    box-shadow: 15px 15px 1px 1px rgba(192, 192, 192, 0.247);
                }
            }

            .feature_type {text-align: left; font-weight: bolder; font-family: 'Hammersmith One', sans-serif;}
            .feature_desc {text-align: right;}

    /*Prodcut Grid*/
    #products{
        grid-area: product;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
        .product_block {
            margin-left: 30px;
            margin-right: 30px;
            border-style: outset;
            padding: 5px;
            width: 400px;
            text-align: center;
            background: linear-gradient(135deg,
             hsl(138,67%,86%) 0%,hsl(140,54%,81%) 10%,
             hsl(143,44%,73%) 19%,hsl(144,49%,75%) 31%,
             hsl(144,55%,76%) 50%,hsl(143,51%,67%) 65%,
             hsl(133,58%,80%) 83%,hsl(121,67%,87%) 100%);
            box-shadow: 15px 15px 1px 1px rgba(192, 192, 192, 0.247);
            border-radius: 10px;
        }
        .product_name{
            font-weight: bold; 
            font-family:'Hammersmith One', sans-serif;
            color: rgb(107, 74, 24);
        }
        .product_img img{width: 30%; height: auto;}
        .product_desc{font-family:cursive;}

        /*Hover transition*/
        .product_block:hover {
            animation-name: product_hov;
            animation-duration: 300ms;
            animation-fill-mode: forwards;
            transition: all 400ms ease;
        }
        @keyframes product_hov{
            100% {
                transform: scale(1.05) translate(-20px, -20px);
                box-shadow: 25px 25px 1px 1px rgba(192, 192, 192, 0.4);
            }
        }

    /*Buy Grid*/
    #buy {grid-area: buy; width: 100%; text-align: center;}
        .buy_block{
            margin-left: 30px;
            margin-right: 30px;
            border-style: outset;
            padding: 5px;
            width: 300px;
            text-align: center;
            background: linear-gradient(45deg, hsl(207,38%,95%) 0%,
            hsl(204,71%,73%) 69%,hsl(205,83%,91%) 100%);
            box-shadow: 15px 15px 1px 1px rgba(192, 192, 192, 0.247);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
            .buy_name{
                font-weight: bold;
                font-size: 1.1em;
                font-family: 'Hammersmith One', sans-serif;
            }
            .buy_img img{
                width: 50px;
                height: 50px;
            }
            .buy_desc{
                font-style: italic;
                color: rgb(69, 78, 77);
                font-weight: bold;
            }
            .buy_btn{
                width: 30%;
                display: block;
                padding: 2px 5px 2px 5px;
                font-family: 'Titillium Web', sans-serif;
                text-decoration: none;
                font-weight: bold;
                background: rgb(189, 245, 192);
                color: black;
                box-shadow: 1px 1px 0.5px 0 silver;
                text-decoration: none;
            }
            .buy_btn:hover{
                animation-name:buy_btn_hov;
                animation-duration: 300ms;
                animation-fill-mode: forwards;
                transition: all 400ms ease-in-out;
            }
            @keyframes buy_btn_hov {
                100%{
                   background-color:rgb(204, 213, 127);
                }
            }

        .buy_block:hover {
            animation-name:buy_hov;
            animation-duration: 300ms;
            animation-fill-mode: forwards;
            transition: all 400ms ease;
        }
        @keyframes buy_hov{
            100% {
                transform:  translate(1px, 0px);
                box-shadow: 20px 20px 2px 2px rgba(192, 192, 192, 0.4);
            }
        }

    /*Main Content Style End */

    /* Media Query: display < 800 px Start */
    @media (max-width: 800px){
        body {margin-top: 150px;}
        .nav-link{font-size: .8em;}
        #title{font-size: 1em;}
        #features{flex-direction: row; height: 600px;}
        .feature_block{width: 80%;}
        .product_block{width: 300px;}
    }
    /* Media Query: display < 800 px End */