*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Poppins', sans-serif;
}
.header-top{
    height: 2.5rem;
    background-color:rgb(22, 22, 22);

    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
.header-top img{
    height: 100%;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-right: 2rem;
}



.header-bottom{
    height: 4rem;

    display: flex;
    align-items: center;
}
.three-dot{
    height: 100%;
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
    padding-left: 11px;
    padding-right: 2rem;
}
.ea-logo{
    height: 100%;
    width: 12.5rem;   
}
.nav-list{
    display: flex;

    list-style: none;
    padding-left: 4rem;
}
.nav-list a{
    text-decoration: none;
    color: black;
}
.nav-list a:hover{
    color: orangered;
}
.nav-list li{
    display: flex;
    align-items: center;   
    
    font-size: 18px;
}
.nav-list img{
    height: 2rem;
    padding-top: 5px;
    padding-right: 2rem;
}




.section1{
    display: flex;

    height: 25.7rem;
    background-color: gray;
    background-image: url(https://th.bing.com/th/id/R.138b9df007a966f86ed52c4f7e0ad997?rik=oZDP0Er3UC2dsA&riu=http%3a%2f%2fwonderfulengineering.com%2fwp-content%2fuploads%2f2013%2f12%2fF1-wallpaper-15.jpg&ehk=n77eIv7LAaAnRIHhi8Do8RQylZgcvHlxgmqSuiAB2Q4%3d&risl=&pid=ImgRaw&r=0);
    background-size: cover;
}
.container{
    max-width: 1100px;
    width: 100%;
}
.section1 .container{
    width: 42%;    
    padding-left: 8rem;
    
    display: flex;
    flex-direction: column;
    align-items: center;
}
#main-logo{
    height: 4rem;
    width: 31rem;
}
h1{
    font-size: 3.2rem;
    text-align: center;
}
h2{
    font-size: 40px;
}
.section1 p{
    font-size: 26px;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.join-button{
    background-color: rgb(255, 80, 16);
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
    padding-left: 3rem;
    padding-right: 3rem;
    text-decoration: none;
    color: white;
    margin-top: 1rem;
    font-size: 20px;
    border-radius: 4px;
}










.section2{
    display: flex;
    justify-content: center;
}
.section2 .container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.game-list img{
    width: 100%;
    aspect-ratio: 1/1;
}
.game-list{
    list-style: none;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr ;
    grid-gap: 25px;
    padding-top: 2rem;
}
@media screen and (max-width: 1100px) {
    .game-list{
      grid-template-columns: 1fr 1fr;
    }
  }
  @media screen and (max-width: 550px) {
    .game-list{
      grid-template-columns: 1fr;
    }
  }
.section2 h2{
    padding-top: 3rem;
}
.latest-button{
    text-decoration: none;
    color: rgb(37, 37, 37);
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-bottom: 4rem;
    margin-top: 1.6rem;
    border: 2px solid black;
    border-radius: 3px;
    font-size: 17px;
}







.section3{
    display: flex;
    justify-content: center;
}
.section3 .container{
    display: flex;
    flex-direction: column;
}
.section3 h2{
    text-align: center;
    margin-bottom: 1rem;
}
.nav-bar{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.nav-items{
    list-style: none;
    padding-right: 1rem;
    padding-left: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.nav-items a{
    text-decoration: none;
    color: rgb(31, 30, 30);
    font-size: 17px;
}
.nav-items:hover{
    background-color: rgb(224, 224, 224);
}
.vl {
    border-left: 2px solid rgb(212, 207, 207);
    height: 1.5rem;
  }
.update-list img{
    width: 100%;
    padding-bottom: 14px;
}
.update-list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    grid-row-gap: 20px;
    grid-column-gap: 14px;
    margin-top: 3rem;
    
}
.update{
    flex-basis: 356px;
    flex-grow: 1;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding-bottom: 1rem;
}
.ea-inc{
    color:rgb(255, 71, 71);
    font-size: 16px;    
    padding-right: 1rem;
    font-weight:550;
    padding-left: 1rem;
    padding-right: 1rem;
}
.update span{
    
    font-size: 16px;
}
.update h3{
    font-size: 24px;
    font-weight: 550;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
}
.update p{
    font-size: 17px;
    padding-left: 1rem;
    padding-right: 1rem;
}
.readmore-button{
    text-decoration: none;
    color: rgb(37, 37, 37);
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-bottom: 3rem;
    margin-top: 3rem;
    border: 2px solid black;
    border-radius: 3px;
    font-size: 17px;
    align-self: center;
}
.section4{
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 33rem;
    background-color: gray;
    background-image: url(/images/section4-bg.jpg);
}
.section4 .container{
    display: flex;
    flex-direction: column;
    align-items: flex-start;

}
#ea-play{
    height: 7rem;
    margin-top: 8rem;
    margin-bottom: 12px;
}
#join-button2{
    text-decoration: none;
    color:white;
    border: 2px solid white;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 2rem;
    padding-right: 2rem;
    border-radius: 3px;
    margin-top: 1.5rem;
    margin-bottom: 7rem;
}
.section4 span{
    font-size: 18px;
    color: white;
}






.section5{
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 7rem;
    background-color: rgb(43, 183, 226);
}
.section5 .container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.section5 h3{
    font-size: 26px;
    color: rgb(22, 22, 22);
}
#learn-button{
    text-decoration: none;
    color:rgb(71, 71, 71);
    border: 2px solid black;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 2rem;
    padding-right: 2rem;
    border-radius: 3px;
}






.section6{
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-top: 3rem;
    background-color: rgb(234, 234, 234);
    height: 15rem;
}
footer .container{
    display: flex;
    flex-direction: column;
}
.footer-up{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.nav-links{
    display:flex;
    flex-direction:row;
    list-style: none;
}
.link{
    padding-right: 2.5rem;
    font-size: 14px;
}
.link a{
    text-decoration: none;
    color: black;    
}
.section6 span{
    font-size: 15px;
    font-weight: 600;
}
.social-medias{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    list-style: none;

    margin-bottom: 5rem;
}
.media{
    margin-left: 2rem;
}
.section6 a:hover{
    color: orangered;
}









.section7{
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 20rem;
}
.section7 .container{

display: flex;
flex-direction: column;
}
#ea-bottom-logo{
    height: 4rem;
    margin-right: 2rem;
}
.flag{
    height: 10px;
}
.down-button{
    height: 1.6rem;
}
.footer-bottom{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 10px;
}
.navbar{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 2rem;
}
.nav-bottom{
    display: flex;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr  1fr 1fr 1fr;
}
.nav-bottom-list{
    padding-right: 1.5rem;
    margin-top: 2rem;
}
.nav-bottom-list a{
    text-decoration: none;
    color: black;
}
.language-button{
    display: flex;
    flex-direction: column;
    border: 2px solid rgb(161, 160, 160);
    align-self: flex-start;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-top: 1rem;
}
.country{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.lang{
    font-size: 14px;
    color: gray;
}
.usa{
    font-size: 14px;
}
.prvcy-agrmnt{
    margin-left: 6rem;
}
.prvcy-agrmnt span{
    padding-right: 2rem;
    font-size: 14px;
}
.prvcy-agrmnt a{
    text-decoration: none;
    color: black;
}
.security-seal{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.security-seal a{
    text-decoration: none;
    color: black;
}
.security-seal span{
    margin-left: 6rem;
    font-size: 14px;
}
.copyright{
    margin-left: 6rem;
    font-size: 14px;
}