/*This is the CSS code for the website body*/
            #Body {
                background-color: orange;
                
               }



/*This is the CSS code for my Background video*/
                #MyVideo {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    -o-object-fit: cover;
                        object-fit: cover;
                    -o-object-position: center;
                        object-position: center;
                }



      /*This is the CSS code for the navigation bar*/
                ul {
                    list-style-type: none;
                    margin: 0;
                    padding: 0;
                    overflow-x: hidden;
                    background-color: #333;
                    position: relative;
                    z-index: 10;
                }


                li {
                    float: left;
                    margin-left: 235px;
                    
                }


                li a {
                    display: block;
                    color: white;
                    text-align: center;
                    padding: 14px 25px;
                    text-decoration: none;
                    font-size: 20px;
                    
                }


                li a:hover:not(.active) {
                    background-color: #111;
                    
                }

                
                .active {
                    background-color: #4CAF50;
                    
                }





    /*This is the CSS code for the overwatch title in the center of the background video*/

                .Overlay {
                    min-height: 100vh;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    
                } 

                .Overlay h1 {
                    font-size: 150px;
                    color: darkorange;
                    font-weight: 600;
                    margin: 2rem 3rem 0;
                    mix-blend-mode: overlay;
                    padding: 5px 15px;
                    text-align: center;
    
                }
                


        /*This is the CSS code for the Lucio and Zenyatta pictures*/
                
                .column {
                    float: right;
                    width: 700px;
                    margin: -150px 150px 50px 50px;
                    position: relative;
                    z-index: 10;
                    
                    
                }


                #ZenyattaImg {
                    height: 400px;
                    width: 650px;
                    width: 100%;
    
                }


                #LucioImg {
                    height: 400px;
                    width: 900px;
                    width: 100%;
    
                }



        /*This is the CSS code for h1 what is overwatch*/
                #Title1 {
                    text-align: center;
                    color: peachpuff;
                    font-size: 50px;
                    font-family: inherit;
                    text-decoration: underline;
    
                }



        /*This is the CSS code for the first paragraph explaing what overwatch is*/
                #p1 {
                    margin-left: 300px;
                    margin-right: 300px;
   
                }



        /*This is the CSS code for the youtube video*/

                #YoutubeVid {
                    width: 1500px;
                    height: 800px;
                    
                }

                .YoutubeVid {
                    margin-left: 10%;
                    padding-bottom: 20px;
                }



        /*This is the CSS code for heading 2 gameplay*/

                #Title2 {
                    text-decoration: underline;
                    color: dimgray;
                    font-size: 35px;
                    font-weight: bold;

                }


        /*This is the CSS code for the Overwatch Image*/

                .OverwatchImg {
                    text-align: center;
                    padding-bottom: 20px;
    
                }

                #img-fluid {
                    max-width: 100%;
                    height: auto;
    
                }


        /*This is the CSS code for heading 3 Plot*/
                #Title3 {
                    text-decoration: underline;
                    font-size: 35px;
                    color: dimgray;
    
                }