/*CSS file for faith site example*/

/*Base Styling*/
body{
    background-image: url("kumiko-wooden-lattice-stockcake.jpg");
    background-repeat: repeat;
}

article, aside, nav, footer{
    background-color: ivory;
    margin-left: 25%;
}

#banner{
    width: 100%;
    height: 20em;
    background-color: ivory;
}

textarea{
    height: 10em;
    width: 20em;
}

#navigate{
    list-style: none;
    background-color: ivory;
    text-align: center;
}

#navigate li{
        display: inline-block;
        padding-right: 2em;
}

#navigate li a{
    text-decoration: none;
}

/*Styling for Tablets and Desktop*/
@media screen and (width > 600px){
    #main{
        display: grid;
        grid-template-rows: 70em 10em;
        grid-template-columns: 20em 1fr 20em;
    }

    article, aside, nav, footer{
    margin: 1em
    }

    nav{
        grid-row-start: 1;
        grid-row-end: span;
        grid-column-start: 1;
        grid-column-end: span;

    }

    aside{
        grid-row-start: 1;
        grid-row-end: span;
        grid-column-start: 3;
        grid-column-end: span;
    }

    article {
        grid-row-start: 1;
        grid-row-end: span;
        grid-column-start: 2;
        grid-column-end: span;

    }

    footer{
        grid-row-start: 2;
        grid-row-end: span;
        grid-column-start: 2;
        grid-column-end: span;
    }

    footer{
        text-align: center;
    }

   iframe{
        height: 20em;
        width: 100%;
    }

    #dispQuran{
        height: 25em;
        width: 100%;
    }

    form{
        margin-left: 10px;
    }

    #navigate li a h3:hover{
        background-color: lightsteelblue;
    }

    #yTube(
        height: 20em;
        width: 1fr;
    )

}