/* general formatting --> */

html{
    color:white;
}
body{
    margin:auto;
}
a{
    font-family: helvetica-neue-lt-pro-cond, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-decoration:none;
    font-size:20px;
    color:white;
}
section.backing{
    background-color: white;
    background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
    padding-top:60px;
    width:1680px;
    height:910px;
    margin:auto;
    position:relative;
    z-index: -9999;
}
.header_light{
    font-family: polymath-text, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size:80px;
    width:1000px;
    line-height:1;
}
.header_heavy{
    font-family: helvetica-neue-lt-pro-cond, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size:80px;
    text-shadow:0 0 20px rgb(255, 255, 255);
}
.light_banner{
    background-color: rgb(255, 148, 0, 0.6);
    position:relative;
    top:0;
    left:0;
    margin:auto;
}
h3{
    font-weight:300;
    font-family: polymath-text, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size:80px;
    width:1000px;
    line-height:1;
}
.light_banner_head{
    background-color: rgb(255, 148, 0, 0.6);
    top:0;
    left:0;
    margin:auto;
    position:absolute;
    margin-top:250px;
    padding-bottom:40px;
    margin-bottom:0px;
    width:100%;
}
.header_center{
    margin:auto;
    width:800px;
    margin-right:auto;
    margin-left:auto;
    padding-top:50px;
    text-align:center;
    font-weight:300;
}
.center{
    padding-left: 50px;
    width:700px;
    font-family: polymath-text, sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-left:440px;
    font-size:18px;
}
.header_left{
    padding-left: 50px;
    padding-top:160px;
    margin-bottom:40px;
    font-weight:300;
}
.left{
    padding-left: 50px;
    width:520px;
    font-family: polymath-text, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size:18px;
}

/* top banner --> */

@media (max-width:640px){
.banner{
    background-color: rgb(255, 148, 0);
    position:relative;
    top:0;
    left:0;
    width:100%;
    height:60px;
    z-index: 9999;
}
}

header a{
    padding-top:25px;
    display:inline-block;
    font-size:25px;
}
.button_container img{
    width:80px;
    height:80px;
    padding-top:0px;
}
.button_container{
    margin: 10px 10px 10px 10px;
	padding: 15px;
	height: 100px;
	float: left;
	overflow: hidden;
	box-sizing: border-box;
	text-align: center;
}
.selected{
    color: rgb(255, 148, 0);
    text-shadow:0 0 20px rgb(255, 255, 255);
}


/* home landing --> */

section.landing{
    background-image:url(../images/overwatch\ images/landing.jpg.webp);
}

.landing a#btn_story{
    margin-left: 55px;
    padding: 10px 10px 10px 10px;
    border-radius: 5px;
    border:1px solid rgb(255, 255, 255);
}
.landing .header_light{
    padding-left: 50px;
    padding-top:160px;
    margin-bottom:40px;
}

.landing .light_banner{
    position:absolute;
    margin-top:810px;
    margin-bottom:0px;
    bottom:0;
    width:100%;
    height:160px;
}

section.landing ul{
    display:flex;
    padding-left:80px;
    text-align:center;
}
section.landing aside{
    width:220px;
    margin: 20px 40px 10px 40px;
}
section.landing-items{
    display:block;
}
section.landing li{
    font-size:0;
}
.head{
    font-family: polymath-text, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size:25px;
    margin-bottom:10px;
    margin-top:25px;
}
.category{
    font-family: polymath-text, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size:13px;
    line-height:8px;
}
.year{
    font-family: polymath-text, sans-serif;
    font-weight: 100;
    font-style: normal;
    font-size:13px;
    line-height:5px;
}

/* landing character --> */

section.landing_char{
    background-image:url(../images/overwatch\ images/characters.jpg);
}
.landing_char a#btn_char{
    margin-left:800px;
    border-radius: 5px;
    border:1px solid rgb(255, 255, 255);
    padding: 10px 10px 10px 10px;
}
.landing_char p{
    width:1000px;
    margin-right:auto;
    margin-left:auto;
    margin-top:300px;
    margin-bottom:20px;
    text-align:center;
}

/* landing about --> */

section.landing_about{
    background-image:url(../images/overwatch\ images/about.jpg);
    background-position: top;
    height:890px;
    padding-top:0px;
}
.landing_about .light_banner{
    margin-top:0px;
    height:120px;
}
.landing_about a#btn_about{
    border-radius: 5px;
    border:1px solid rgb(255, 255, 255);
    padding: 10px 10px 10px 10px;
    margin-left:1490px;
}
.landing_about .header_light{
    margin:auto;
    width:800px;
    margin-right:auto;
    margin-left:auto;
    padding-top:28px;
    text-align:center;
    font-size:70px;
}
.landing_about .des{
    font-family: polymath-text, sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align:right;
    width:600px;
    margin-left:1020px;
    margin-top:30px;
    margin-bottom:40px;
}

/* footer --> */

footer .banner{
    background-color: rgb(255, 148, 0);
    height:80px;
    margin-bottom:0px;
}
footer img{
    text-align:center;
    width:70px;
    margin-left:810px;
    margin-top:10px;
    margin-bottom:0px;
}
footer p{
    margin-bottom:0px;
    margin-top:5px;
    font-family: polymath-text, sans-serif;
    font-weight: 300;
    font-style: normal;
    margin-left:825px;
    font-size:10px;
}

/* character landing --> */

section.characters{
    background-image:url(../images/overwatch\ images/reaper-skins-overwatch-2.jpg);
}

/* tank landing --> */

section.tanks{
    background-image:url(../images/overwatch\ images/Doomfist_ban.jpg);
}
.tanks p{
    width:450px;
}

/* damage landing --> */

section.damage{
    background-image:url(../images/overwatch\ images/Pharah_ban.jpg);
}
.damage p{
    width:400px;
}

/* support landing --> */

section.support{
    background-image:url(../images/overwatch\ images/Zenyatta_ban.jpg);
}
.support p{
    width:450px;
}

/* character grid --> */

section.character-grid{
    background-color: rgb(33, 143, 254);
    padding-top:60px;
    width:1680px;
    margin:auto;
    position:relative;
    z-index:-9999;
    padding-bottom:40px;
}
section.character-grid ul{
    display:flex;
    flex-wrap: wrap;
    padding-left:175px;
    text-align:center;
    padding-bottom:50px;
    padding-top:10px;
    margin-bottom:0px;
}
section.character-grid aside{
    width:200px;
    margin: 20px 30px 10px 30px;
    background-color: rgb(255, 148, 0);
    border-radius:8px;
    border:2px solid rgb(255, 148, 0);
}
section.character-grid-items{
    display:block;
}
section.character-grid li{
    font-size:0;
}
section.character-grid img{
    width:200px;
    height:200px;
    border-radius:8px;
    background-color:rgb(35, 32, 32);
}
.character-grid .title{
    font-size:20px;
}

/* story landing --> */

section.story{
    background-image:url(../images/overwatch\ images/story.jpg);
}

/* locations landing --> */

section.locations{
    background-image:url(../images/overwatch\ images/Maps.jpg);
    background-position: top;
    height:830px;
}
.locations h3{
    width:1000px;
    margin-right:auto;
    margin-left:auto;
    margin-top:260px;
    margin-bottom:320px;
    text-align:center;
}
section.locations ul{
    display:flex;
    padding-left:300px;
    text-align:center;
    padding-bottom:18px;
    padding-top:20px;
}
section.locations aside{
    width:300px;
    margin: 20px 30px 10px 30px;
}
section.locations-items{
    display:block;
}
section.locations li{
    font-size:0;
}
section.locations img{
    width:50px;
    height:50px;
    display:inline-block;
}
.keys{
    font-family: polymath-text, sans-serif;
    font-weight: 400;
    font-style: normal; 
    font-size:18px;
    text-align:center;
}

/* maps --> */

section.location-grid{
    background-color: rgb(33, 143, 254);
    padding-top:60px;
    width:1680px;
    height:4000px;
    margin:auto;
    position:relative;
    z-index:-9999;
}
section.location-grid ul{
    display:flex;
    flex-wrap: wrap;
    padding-left:150px;
    text-align:center;
    padding-bottom:50px;
    padding-top:10px;
}
section.location-grid aside{
    width:400px;
    margin: 20px 30px 10px 30px;
    background-color: rgb(255, 148, 0);
    border-radius:8px;
    border:2px solid rgb(255, 148, 0);
}
section.location-grid-items{
    display:block;
}
section.location-grid li{
    font-size:0;
}
section.location-grid img{
    width:400px;
    height:250px;
    border-radius:8px;
}
.location-grid .title{
    font-size:20px;
    text-transform: uppercase;
}

/* how to landing --> */

section.gameplay{
    background-image:url(../images/overwatch\ images/gameplay.jpg.avif);
}

/* quick play modes --> */

section.play-modes{
    background-image:url(../images/overwatch\ images/modes.jpg);
    height:840px;
}
.play-modes h3{
    width:1000px;
    margin-right:auto;
    margin-left:auto;
    margin-top:180px;
    margin-bottom:140px;
    text-align:center;
}
section.play-modes ul{
    display:flex;
    padding-left:15px;
    text-align:center;
    padding-bottom:60px;
    padding-top:12px;
}
section.play-modes aside{
    width:270px;
    margin: 20px 30px 10px 30px;
}
section.play-modes-items{
    display:block;
}
section.play-modes li{
    font-size:0;
}
.title{
    font-family: helvetica-neue-lt-pro-cond, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size:18px;
}
.mode{
    font-family: polymath-text, sans-serif;
    font-weight: 400;
    font-style: normal; 
    font-size:14px;
    text-align:left;
}

/* about landing --> */

section.about{
    background-image:url(../images/overwatch\ images/about_us.png);
}

/* about development --> */

section.development{
    background-image:url(../images/overwatch\ images/about2.jpeg);
    height:850px;
}
.development .light_banner_head{
    margin-top:180px;
}