/*This is the css code for the background color for the heroes page*/
            #body {
                background-color: orange;
    
            }

    /*This is the CSS code for the nav 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 hero list title*/

                #Title {
                    text-decoration: underline;
                    font-size: 100px;
                    padding-top: 25px;
                    padding-bottom: 50px;
                    font-weight: bold;
                    text-align: center;
                    color: gray;
                    
                }


/*The CSS code for the hr lines*/

                hr {
                    clear:both;
                    display:block;  
                    padding-top: 15px;
                    margin-left: 70px;
                    margin-right: 70px;
                    background-color:crimson;
                    
                }


/*CSS code for Tracer Picture and info*/

            .TracerContainer {
                display: flex;
    
            }

            .Tracer {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                
            }


            .TracerText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }
                

            #Tracer2 {
                width: 600px;
                height: 400px;
                
    
            }

            #TracerHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }
           


/*The CSS code for Reaper Picture and info*/

            .ReaperContainer {
                display: flex;
            }

            #Reaper2 {
                width: 600px;
                height: 400px;
    
            }

            .Reaper {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .ReaperText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #ReaperHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }


/*This is the CSS code for the Hanzo Picture and info*/

            .HanzoContainer {
                display: flex;
                
            }


            #Hanzo2 {
                width: 600px;
                height: 400px;
    
            }


            .Hanzo {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .HanzoText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #HanzoHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }


/*This is the CSS code for the Genji picture and info*/


            .GenjiContainer {
                display: flex;
                
            }


            #Genji2 {
                width: 600px;
                height: 400px;
    
            }


            .Genji {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .GenjiText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #GenjiHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }


/*This is the CSS code for the D.Va picture and info*/

            .DVAcontainer {
                display: flex;
                
            }


            #DVA2 {
                width: 600px;
                height: 400px;
    
            }


            .DVA {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .DVAText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #DVAHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }


/*This is the CSS code for the Bastion picture and info*/


            .BastionContainer {
                display: flex;
                
            }


            #Bastion2 {
                width: 600px;
                height: 400px;
    
            }


            .Bastion {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .BastionText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #BastionHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }


/*This is the CSS cod efor the Zenyatta picture and info*/


            .ZenyattaContainer {
                display: flex;
                
            }


            #Zenyatta2 {
                width: 600px;
                height: 400px;
    
            }


            .Zenyatta {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .ZenyattaText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #ZenyattaHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }


/*This is the CSS code for the Junkrat picture and info*/



            .JunkratContainer {
                display: flex;
                
            }


            #Junkrat2 {
                width: 600px;
                height: 400px;
    
            }


            .Junkrat {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .JunkratText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #JunkratHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }


/*This is the CSS code for the Roadhog picture and info*/



            .RoadhogContainer {
                display: flex;
                
            }


            #Roadhog2 {
                width: 600px;
                height: 400px;
    
            }


            .Roadhog {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .RoadhogText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #RoadhogHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }


/*This is the CSS code for the Widowmaker picture and info*/


            .WidowmakerContainer {
                display: flex;
                
            }


            #Widowmaker2 {
                width: 600px;
                height: 400px;
    
            }


            .Widowmaker {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .WidowmakerText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #WidowmakerHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }

/*This is the CSS code for the Soldier 76 picture and info*/


            .Soldier76Container {
                display: flex;
                
            }


            #Soldier762 {
                width: 600px;
                height: 400px;
    
            }


            .Soldier76 {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .Soldier76Text {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #Soldier76Heading {
                margin-left: 275px;
                font-size: 50px;
    
            }

/*This is the CSS code for the Pharah picture and info*/


            .PharahContainer {
                display: flex;
                
            }


            #Pharah2 {
                width: 600px;
                height: 400px;
    
            }


            .Pharah {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .PharahText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #PharahHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }

/*This is the CSS code for the Mercy picture and info*/


            .MercyContainer {
                display: flex;
                
            }


            #Mercy2 {
                width: 600px;
                height: 400px;
    
            }


            .Mercy {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .MercyText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #MercyHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }


/*This is the CSS code for the Reinhardt picture and info*/


            .ReinhardtContainer {
                display: flex;
                
            }


            #Reinhardt2 {
                width: 600px;
                height: 400px;
    
            }


            .Reinhardt {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .ReinhardtText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #ReinhardtHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }


/*This is the CSS code for the Bridgitte picture and info*/


            .BridgitteContainer {
                display: flex;
                
            }


            #Bridgitte2 {
                width: 600px;
                height: 400px;
    
            }


            .Bridgitte {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .BridgitteText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #BridgitteHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }


/*This is the CSS code for the Torbjorn picture and info*/


            .TorbjornContainer {
                display: flex;
                
            }


            #Torbjorn2 {
                width: 600px;
                height: 400px;
    
            }


            .Torbjorn {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .TorbjornText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #TorbjornHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }

/*This is the CSS code for the Mei picture and info*/


            .MeiContainer {
                display: flex;
                
            }


            #Mei2 {
                width: 600px;
                height: 400px;
    
            }


            .Mei {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .MeiText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #MeiHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }

/*This is the CSS code for the MCcree picture and info*/


            .MCcreeContainer {
                display: flex;
                
            }


            #MCcree2 {
                width: 600px;
                height: 400px;
    
            }


            .MCcree {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .MCcreeText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #MCcreeHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }


/*This is the CSS code for the Lucio picture and info*/


            .LucioContainer {
                display: flex;
                
            }


            #Lucio2 {
                width: 600px;
                height: 400px;
    
            }


            .Lucio {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .LucioText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #LucioHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }

/*This is the CSS code for the Ashe picture and info*/


            .AsheContainer {
                display: flex;
                
            }


            #Ashe2 {
                width: 600px;
                height: 400px;
    
            }


            .Ashe {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .AsheText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #AsheHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }

/*This is the CSS code for the Ana picture and info*/


            .AnaContainer {
                display: flex;
                
            }


            #Ana2 {
                width: 600px;
                height: 400px;
    
            }


            .Ana {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .AnaText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #AnaHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }

/*This is the CSS code for the Baptiste picture and info*/


            .BaptisteContainer {
                display: flex;
                
            }


            #Baptiste2 {
                width: 600px;
                height: 400px;
    
            }


            .Baptiste {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .BaptisteText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #BaptisteHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }

/*This is the CSS code for the Doomfist picture and info*/


            .DoomfistContainer {
                display: flex;
                
            }


            #Doomfist2 {
                width: 600px;
                height: 400px;
    
            }


            .Doomfist {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .DoomfistText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #DoomfistHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }

/*This is the CSS code for the Echo picture and info*/


            .EchoContainer {
                display: flex;
                
            }


            #Echo2 {
                width: 600px;
                height: 400px;
    
            }


            .Echo {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .EchoText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #EchoHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }

/*This is the CSS code for the Moira picture and info*/


            .MoiraContainer {
                display: flex;
                
            }


            #Moira2 {
                width: 600px;
                height: 400px;
    
            }


            .Moira {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .MoiraText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #MoiraHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }

/*This is the CSS code for the Orisa picture and info*/


            .OrisaContainer {
                display: flex;
                
            }


            #Orisa2 {
                width: 600px;
                height: 400px;
    
            }


            .Orisa {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .OrisaText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #OrisaHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }


/*This is the CSS code for the Sigma picture and info*/


            .SigmaContainer {
                display: flex;
                
            }


            #Sigma2 {
                width: 600px;
                height: 400px;
    
            }


            .Sigma {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .SigmaText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #SigmaHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }

/*This is the CSS code for the Sombra picture and info*/


            .SombraContainer {
                display: flex;
                
            }


            #Sombra2 {
                width: 600px;
                height: 400px;
    
            }


            .Sombra {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .SombraText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #SombraHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }

/*This is the CSS code for the Symmetra picture and info*/

            .SymmetraContainer {
                display: flex;
                
            }


            #Symmetra2 {
                width: 600px;
                height: 400px;
    
            }


            .Symmetra {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .SymmetraText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #SymmetraHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }

/*This is the CSS code for the Winston picture and info*/


            .WinstonContainer {
                display: flex;
                
            }


            #Winston2 {
                width: 600px;
                height: 400px;
    
            }


            .Winston {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .WinstonText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #WinstonHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }

/*This is the CSS code for the WreckingBall picture and info*/


            .WreckingBallContainer {
                display: flex;
                
            }


            #WreckingBall2 {
                width: 600px;
                height: 400px;
    
            }


            .WreckingBall {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .WreckingBallText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #WreckingBallHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }

/*This is the CSS code for the Zarya picture and info*/


            .ZaryaContainer {
                display: flex;
                
            }


            #Zarya2 {
                width: 600px;
                height: 400px;
    
            }


            .Zarya {
                margin-left: 150px;
                flex-basis: 40%;
                padding-bottom: 20px;
                padding-top: 20px;
    
            }

            .ZaryaText {
                padding-left: 75px;
                margin-right: 400px;
                padding-top: 50px;
    
            }

            #ZaryaHeading {
                margin-left: 275px;
                font-size: 50px;
    
            }