/* CSS HEX 
--oxford-blue: #001427ff;
--hookers-green: #708d81ff;
--jasmine: #f4d58dff;
--engineering-orange: #bf0603ff;
--dark-red: #8d0801ff;
*/

html, body {
    margin: 0;
    font-family: 'Poppins', 'Black', 'Roboto', sans-serif;
    background-color: #0B1622;
}

h1 {
    color: #f4d58dff;
    text-align: center;
    font-size: 2em;
    margin: 0;
}

#gameheader {
    text-decoration: underline overline #b30000;
    text-underline-offset: 5px;
    font-size: 2em;
    color: #f4d58dff;
}

#gameinfo {
    color: #f4d58dff;
    text-align: center;
    font-size: 1.2em;
    margin: 0;
    padding-top: 20px;
}

.pred {
    color: #b30000;
    text-decoration: underline;
}

#gamelink {
    color: #8d0801ff;
}

h4 {
    font-size: 1.2em;
    margin: 0;
    padding-top: 10px;
}

#info {
    text-align: center;
    margin-bottom: 40px;
}

.wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    row-gap: 50px;
    column-gap: 50px;
    margin: 200;
    margin-top: -0;
}

@media (min-width: 2064px) {
    .wrap {
        margin: 400px;
        margin-top: -0;
    }
}

.el {
    border-radius: 30px;
}

.el2 {
    width: 800px;
    background: #151F2E;
    height: 300px;
    display: flex;
    align-items: center;
}

.el1 {
    width: 400px;
    height: 300px;
    background: #151F2E;

}

.el2 img {
    width: 300px;
    border-radius: 20px;
    padding: 30px;
    object-fit: cover;
}

#gameimg {
    object-fit: cover;
}

.el2 .text {
    width: 40%; 
}

.el3 {
    width: 370px;
    background: #151F2E;
    height: 300px;
}

.el4 {
    width: 375px;
    height: 300px;
    background: #151F2E;
}

.el5 {
    width: 400px;
    height: 300px;
    background: #151F2E;
}

.p.header {
    text-decoration: underline;
    color: #f4d58dff;
    text-align: center;
    font-size: 1.2em;
    padding-top: 5px;
    font-size: 1.5em;
}

.p.header2 {
    color: #f4d58dff;
    text-align: center;
    font-size: 1.2em;
    margin: 0;
    padding-top: 20px;
    text-align: left;
    padding-left: 20px;
}

.p.header3 {
    text-decoration: underline;
    color: #f4d58dff;
    text-align: top;
    font-size: 1.2em;
    margin: 0;
}

* {
    /*border: red 0.1px solid;*/
}

#verticalhoe {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border: red 1px solid;
    word-wrap: break-word;
}

/* @media screen and (min-width: 601px) and (max-width: 1200px) {
    .wrap {
        flex-direction: column;
        align-items: center;
    }
    .el1, .el2, .el3, .el4, .el5 {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        align-items: center;
    }
}
 */
/*@media (max-width: 1200px) {
    .el2 img {
        display: none;
    }
}*/

@media (max-width: 1649px) {
    .el1, .el2, .el3, .el4, .el5 {
        width: 400px;
        height: 300px;
        padding: 0 20px;
        box-sizing: border-box;
        align-items: center;
    }
    #gameimg {
        display: none;
    }
    .wrap {
        margin: 10;
    }
    .lineimg2 {
        display: block;
    }
}

@media (max-width: 869px) {
    .el1, .el2, .el3, .el4, .el5, .wrap {
        display: none;
    }
}

@media (min-width: 869px) {
    .mobileviewforgameganggangchicachica {
        display: none;
    }
}

#mobileimg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    width: 70%;
}

.lineimg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    padding: 40px;
    -webkit-filter: drop-shadow(1px 1px 0 white)
                drop-shadow(-1px 1px 0 white)
                drop-shadow(1px -1px 0 white)
                drop-shadow(-1px -1px 0 white);

filter: drop-shadow(1px 1px 0 white)
        drop-shadow(-1px 1px 0 white)
        drop-shadow(1px -1px 0 white)
        drop-shadow(-1px -1px 0 white);
}

.lineimg2 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    padding: 40px;
    -webkit-filter: drop-shadow(1px 1px 0 white)
                drop-shadow(-1px 1px 0 white)
                drop-shadow(1px -1px 0 white)
                drop-shadow(-1px -1px 0 white);

filter: drop-shadow(1px 1px 0 white)
        drop-shadow(-1px 1px 0 white)
        drop-shadow(1px -1px 0 white)
        drop-shadow(-1px -1px 0 white);
}

.p.headermobile {
    text-decoration: underline;
    color: #f4d58dff;
    text-align: center;
    font-size: 1.5em;
    margin: 0;
}

.p.headermobile2 {
    color: #f4d58dff;
    text-align: center;
    font-size: 1.2em;
    margin: 0;
    padding-top: 20px;
    padding-left: 20px;
}

.p.headermobile3 {
    color: #f4d58dff;
    text-align: center;
    font-size: 1.2em;
    margin: 0;
    padding-top: 20px;
    padding-bottom: 80px;
}

ol li {
    list-style-position: inside;
}

@media (max-width: 499px) {
    .topnav {
        display: block;
    }
    .topnav #myLinks {
        display: block;
    }
}

.videossect {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}