/*Basic site layout*/
body, html, main {
    width: 100vw;
    height:100vh;
    margin:0;
    background-color: #000;
    overflow-x: hidden
}

main {
    width: 100%;
    height: max-content;
    justify-content: center
}

.content {
    width:100%;
    font-family: Arial;
    font-weight: bold;
    font-size: 26px;
    color: #ddd
    
}

.topic {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-flow: column
}

p {margin: min(1vh,5px)}
main>div {margin-bottom: 2.5%}

details {
    text-align: left;
    border: 2px solid #FFF;
    border-radius: 20px;
    margin: 10px;
    padding: 10px;
    width: 66%;
    color: #F8F;
    font-weight: 100
}

summary {
    color: #FFF;
    font-weight: 800;
    cursor: pointer
}



/*Site Header/Footer-Specific CSS*/
.title {
    text-decoration: none;
    margin: 10px;
    font-size: 5vh
}

.icon {
    width: 5vh;
    height: 5vh;
    padding-top: 7px
}

header>div {height: 5vh}
header {border-bottom: 2px #888 solid}
header, footer {
    width: 100%;
    height: calc(5vh + 14px);
    display: flex;
    justify-content: center;
    overflow: hidden
}

footer {
    border-top: 2px solid #888;
    align-items: center;
    flex-flow: row;
    flex-wrap: wrap
}

footer>* {
    margin: 0 2.5% 0 2.5%;
    text-decoration:  none;
    font-size: 22px;
    font-weight: 100;
    font-family: Verdana;
    color: #EEE
}



/*Content CSS*/
#hero {
    height: 80vh;
    image-rendering: optimizeQuality
}

#heroic {
    background-color: #000;
    background-image: linear-gradient(#000 3%, #0000, #000 97%), linear-gradient(90deg, #000 3%, #0000, #000 97%);
    transition: 1s ease-in-out;
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    height: 100%;
    content: '';
    text-align: center;
    text-shadow:
        #000 5px 5px 5px,
        #000 5px -5px 5px,
        #000 -5px 5px 5px,
        #000 -5px -5px 5px
}

.badge {
    background-color: #000A;
    margin: min(1vh,10px);
    padding: min(1vh,5px);
    border: 2px solid #CFC;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none
}

.badge>img {
    height:100%;
    width: 6vh
}

.badge>p {
    width: 100%;
    margin: min(1vh,5px);
    font-size: min(7vw, 3vh);
    color: #CFC
}


.splitbadge>a {width: 50%}
.splitbadge {flex-flow:row}
.smallbadge {display:flex}
.smallbadge>img {width:26px}
.outline>img {margin: 0 10px 0 10px}
.outline {
    border: 2px solid white;
    border-radius: 15px
}

.herotext {font-size: min(7vw, 3vh)}
a.badge>p {color: #A0A}
a.badge {border: 2px solid #A0A}

.news {flex-flow: wrap}
.news>a {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    image-rendering: smooth;
    margin: 25px
}

.faqbook {width: 66%}

.games>* {
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    justify-content: center;
    border: 2px solid #FFF;
    border-radius: 20px;
    margin: 10px;
    padding: 10px;
    width: 66%
}

.games>div>img {
    width: 100%;
    height: 30vh;
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    border-radius: 25px;
    border:2px solid #fff
}

#game3, #game4 {background-position: center}

@media (min-aspect-ratio: 1/1) {
    .games>div>img {width: calc(60% - 4px)}

    .games>div>div {
        width: 40%;
        display: flex;
        flex-flow: column;
        text-align: center;
        align-items: center;
        justify-content: center
    }
}