body {
    text-align: center;
    background-color: white;
}

a {
    color: #ff5d23;
    text-decoration: none;
}

a:hover {
    background-color: #47bdff;
    color: #ffdc25;
    cursor: pointer;
}

hr {
    border-top: 4px dashed #cdcdcd;
}

#logo {
    width: 60%;
    border: none;
}

#menu {
    font-size: 1.8vw;
    font-family: 'Josefin Sans', sans-serif;
    margin: 32px;
}

#content {
    margin-top: 48px;
}

#musicScreen iframe {
    margin: 16px;
}

#aboutme {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1.5em;
    text-align: justify;
    margin: auto;
    width: 50%;
}

#aboutme img {
    width: 15vw;
    max-width: 180px;
}


.emptyFrame {
    width: 550px;
    height: 165px;
}

.pokiBadge {
    width: 80px;
    display: inline;
    float: right;
    margin-top: -4px;
    margin-right: 10px;
}

.cgBadge {
    width: 90px;
    display: inline;
    float: right;
    margin-top: -5px;
    margin-right: 10px;
}

@media screen and (max-width: 1000px) {
    #menu {
        font-size: 32px;
        margin: 0px;
        margin-bottom: 32px;
    }

    #aboutme {
        width: 80%;
        text-align: left;
    }

    #logo {
        width: 90%;
        height: 10%;
    }

}


/* games.html */

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 306px);
    grid-gap: 25px 20px;
    text-align: left;
    width: 960px;
    margin: 0 auto;
}

.game-item {
    width: 306px;
}

.game-item a {
    color: inherit;
}

.game-item a:hover {
    background-color: #ffdc25;
    cursor: pointer;
}

.no-hover {
    background-color: #fff !important;
    cursor: pointer;
}

.thumb {
    width: 100%;
    border-radius: 4px;
}

.title {
    margin-top: 8px;
    margin-bottom: 8px;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: bold;
    font-size: 1em;
}

.description {
    font-family: 'Lato', sans-serif;
    font-size: .875em;
    color: #222222bf;
	text-align: justify;
}


.genre {
    font-family: 'Lato', sans-serif;
    font-size: .7em;
    color: #0f0f0f;
    background-color: #f9d20c;
    width: fit-content;
    border-radius: 4px;
    padding: 4px;
    margin-top: -4px;
    display: inline;
    float: right
}


@media screen and (min-width:600px) and (max-width: 1000px) {
    .grid-container {
        grid-template-columns: repeat(2, 306px);
        width: 612px;
    }
}

@media screen and (max-width: 600px) {
    .grid-container {
        grid-template-columns: repeat(1, 306px);
        width: 306px;
    }
}