/* General */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
}

html{
    background-color: #111;
    color: white;
    overflow-x: hidden;
}

@font-face{
    font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/pixelifysans/v1/CHylV-3HFUT7aC4iv1TxGDR9JnkEi1lR.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

body{
    margin: 0;
    padding: 0;
}

a{
    color: white;
}

/* Clase reutilizabile */

.container{
    max-width: 1920px;
    margin: 0 auto;
}

.green-button{
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none;
    font-weight: bold;
    background-color: #3C8527;
    border-top: 5px solid #52A535;
    border-bottom: 5px solid #2A641C;
    border-left: 0;
    border-right: 0;
    text-decoration: none;
    margin: 10px;
}

.green-button:hover{
    background-color: #2a641c;
}

/* Header  */
.header{                
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0px;
    background-color: rgba(38,36,35,.9);
    z-index: 1;
}

.header .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header .link .img{
    background-color: bisque;
}

.logo{ 
    justify-content: center;
}

.navlinks{
    list-style: none;
    display: flex;
    justify-content: space-around;   
}

.navlink span{
    font-family: 'Pixelify Sans';
}


.navlink a{
    margin: 30px;
    text-decoration: none;
    color: white;
    text-align: center;
}

.navlink a span:hover{
    color: #52A535;  
}

.section-announcement{
    margin-top: 100px;
    width: 100%;
    justify-content: center;
}


/* Announcement section */

.announcement-image{
    width: 100%;
    height: 900px;
    background-image: url("img/Homepage_Hero-A-1920_Fall-Game-Drop_2560x932.avif");
    background-repeat: no-repeat;
    background-position: center;
    justify-content: center;
}

.announcement-box{
    display: flex;
    position: relative;
    bottom: 150px;
}

.announcement-box-main{
    background-color: #111;
    padding: 20px;
    flex: 2;
}

.announcement-box p{
    font-size: 1.2em;
    margin-bottom: 10px;
} 

.announcement-box h1{
    font-family: "Pixelify Sans", "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
    font-size: 2em;
    text-decoration: none;
}

.announcement-box .link-button{
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none;
    font-weight: bold;
}

.announcement-box .link-button:hover{
    text-decoration: underline;
}

.announcement-box-images{
    flex: 1;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.announcement-box .image:hover img{
    border: solid 5px #52A535;
}

.announcement-box .image a{
    display: block;
}


/* Games section */

.section-games{
    justify-content: center;
    flex: 1;
}

.games-boxes{
    display: flex;
    justify-content: center;
}

.game-box img{
    justify-content: center;
}

.game-image{
    justify-content: center;
}

.game-image .poster{
    justify-content: center;
    margin: 20px;
}

.section-games h1{
    font-family: "Pixelify Sans", "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
    font-size: 50px;
    margin: 40px;
    text-align: center;
    text-decoration: none;
}

.game-details{
    margin: 10px;
    justify-content: center;
    text-decoration: none;
}

.game-details h2{
    text-decoration: none;
}

.game-details p{
    text-decoration: none;
    border-bottom: 4px, solid,
}

.game-icons{
    border-top: 2px solid darkgray;
    display: flex;
    
}

.game-icon{
    margin: 5px;
    list-style: none;
}

.game-icon i{
    font-size: 30px;
}


/* Trailers section */

.gameplay-trailer{

}

.gameplay-trailer h1{
    font-family: "Pixelify Sans", "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
    font-size: 50px;
    margin: 40px;
    text-align: center;
} 

.gameplay-trailer-inner {
    display: flex;
    margin: 0 auto;
}

.gameplay-trailer-lists{
    list-style: none;
}

.gameplay-trailer-list-title {
    background-color: rgb(61, 57, 56);
    padding: 10px;
    text-decoration: none;
    display: block;
}

.gameplay-trailer-list-title:hover {
    background-color: rgb(38, 36, 35);
}

.gameplay-trailer-content {
    background-color: rgb(61, 57, 56);
    padding: 20px;
}


/* News section */

.section-news{
    background-color: #262423;
}

.section-news h1{
    font-family: "Pixelify Sans", "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
    font-size: 60px;
    margin-top: 60px;
    text-align: center;
}

.section-news h2{
    text-align: center;
    font-size: 100%;

}

.section-news .section-new-link{
    text-align: center;
    text-decoration: none;
    color: #52A535;
    position: relative;
    top: 60px
}

.section-news .section-new-link:hover{
    text-decoration: underline;
    color:white;
}

.news{
    display: flex;
    list-style: none;
    flex-wrap: wrap;
}


.new-box .new-box-border{
    margin: 10px;
    width: 200px;
    height: 60px;
    background-color: rgba(38,36,35,.9);
    position: relative;
    top: 210px;
    right: 10px;
}

.new-box .new-box-title{
    display: block;
    text-decoration: none;
    text-align: center;
}

.new-box .new-box-details{
    text-align: center;
}

.game-trailer-list-video{
    position: relative;
}


/* Download section */

.section-downloads{
    background-color: #313131;
}

.section-download{
    justify-content: space-between;
    display: flex;
    align-items: center;
}

.section-download-left{
    display: flex;
}

.section-download-image{
    margin: 20px;
}

.section-download-redownload{
    margin: 20px;
}

.section-download-redownload-button{
    border: solid 2px white;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    margin: 20px;
    padding: 10px;
    justify-self: end;
}

.section-download-redownload-button:hover{
    background-color: white;
    color:#111;
}

.section-download-texts{
    margin: 20px;
}

.section-download-title{
    margin: 20px;
    font-family: "Pixelify Sans", "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
    font-size: 60px;
}

.section-download-text{
    margin: 20px;
}

.section-download-explore-button{
    margin: 20px;
}


/* Section content component */

.section-content-component{
    width: 700px;
    background-color: rgba(38,36,35);
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.section-content-component p {
    margin-bottom: .5em;
}

.section-content-component .asterisk {
    color: rgb(255, 96, 94);
}

.section-content-component input,
.section-content-component select {
    padding: 10px;
    background-color: rgb(38, 36, 35);
    color: rgb(237, 229, 226);
    border: 1px solid white;
}

.content-component-title{
    font-family: "Pixelify Sans", "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
    text-align: center;
    font-weight: bold;
    font-size: 2em;
    margin-bottom: .5em;
}

.content-component-accounts {
    display: flex;
}

.content-component-account{
    flex: 1;
    display: flex;
    flex-direction: column;
}


/* Section collectibles */

.section-collectibles-boxes{
    display: flex;
}

.section-collectible-box_1{
    margin: 10px;
}

.section-collectible-title{
    margin: 10px;
}

.section-collectible-text{
    margin: 10px;
}

.section-collectible-link{
    margin: 10px;
    color: #3C8527;
    text-decoration: none;
}

.section-collectible-link:hover{
    color:white;
}

.section-collectible-box_2{
    display: flex;
}

.section-collectible-download{
    position: relative;
}

.section-collectible-download-details{
    padding: 10px;
    background-color: rgba(38,36,35,.9);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}


.section-collectible-download-title{
    text-align: center;
}

.section-collectible-download-detail{
    text-align: center;
}


.section-collectible-box_3{
    text-align: center;
    margin-top: 20px;
    background-color: #000;
}

.section-collectibles-follows{
    flex: 2;
    display: flex;
    justify-content: center;
}

.section-collectible-follow{
    font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
    font-size: 10%;
}

.section-collectible-follow-link{
    text-decoration: none;
}

.section-collectible-follow-link .fa-brands{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 10px;
    justify-content: space-around;
    display: flex;
    align-items: center;
    background-color: #262423;
}

.section-collectible-follow-link .fa-youtube:hover{
    background-color: #fa0020;
}

.section-collectible-follow-link .fa-square-instagram:hover{
    background-color: #f1437a;
}

.section-collectible-follow-link .fa-facebook:hover{
    background-color: #046ae4;
}

.section-collectible-follow-link .fa-x-twitter:hover{
    background-color: #1891ee;
}

.section-collectible-follow-link .fa-tiktok:hover{
    background-color: #E53D4F;
}

.section-collectible-follow-link .fa-whatsapp:hover{
    background-color: #25D366;
}

.section-collectible-follow-link .fa-discord:hover{
    background-color: #5865F2;
}

.section-collectible-follow-link .fa-reddit:hover{
    background-color: #ff3c00;
}


/* Footer */

.footer{
    display: flex;
    background-color: #111;
}

.footer-box{
    margin: 10px;
}

.footer-images{
    margin: 10px;
    display: flex;
}

.footer-image{
    margin: 10px;
}

.footer-title{
    color: white;
}

.footer-texts{
    margin: 5px;
}

.footer-span{
    margin: 5px;
    color: #6CC349;
    flex-direction: column;
}

.footer-span:hover{
    text-decoration: underline;
}

.sub-footer{
    display: flex;
    justify-content: space-around;
    background-color: rgb(49, 49, 49);
}

.sub-footer-span{
    padding: 5px;
}