body{
    background-color: #242424;
    color: white;
}

button{
    transition: transform 0.2s, box-shadow 0.2s, scale 0.5s;
    cursor: pointer;
    border: solid 3px white;
    background-color: #6d6d6d;
    color: white;
    border-radius: 10px;
    box-shadow: black 0px 10px 5px;
}
button:hover{
    transform: translate(0px, -5px);
    box-shadow: black 0px 15px 5px;
    scale: 1.1;
}
button:active{
    transform: translate(0px, 10px);
    box-shadow: black 0px 0px 5px;
}

#header{
    text-align: center;
    text-decoration: underline;
    font-weight: 900;
    font-size: 28px;
}
#body{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gameSection{
    margin-top: 50px;
    width: 80%;
}

.gameImageListWrapper{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    outline: solid 1px black;
    font-size: 16px;
    border-radius: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 20px;
    background-color: #565656;
    gap: 5px;
    padding: 5px;
}

.gameImageListWrapper > .gameImageList{
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.gameImage{
    margin: 0px;
    outline: solid 1px black;
    border-radius: 8px;
    background-color: #cdcdcd;
    color: black;
}

.consoleTitle{
    font-weight: 900;
    font-size: 24px;
}

.gameImage > div{
    margin-left: 5px;
    margin-right: 5px;
}
.gameImage > .image > a > img{
    width: 150px;
    cursor: pointer;
}
.gameImage > .image{
    width: 150px;
    height: 220px;
}
.gameImage > .source{
    border-top: solid 1px black;
}

/* automate headers  */
.DefaultList > div:nth-child(1) > .location::after{ content: "US (ESRB)"; }
.DefaultList > div:nth-child(2) > .location::after{ content: "Canada (ESRB)"; }
.DefaultList > div:nth-child(3) > .location::after{ content: "EU (pegi)"; }
.DefaultList > div:nth-child(4) > .location::after{ content: "Australia (ACB)"; }
.DefaultList > div:nth-child(5) > .location::after{ content: "Germany (USK)"; }
.DefaultList > div:nth-child(6) > .location::after{ content: "Japan (CERO)"; }

/* panel data issues */

.NonRealImage{
    outline: solid 2px orange;
    position: relative;
}
.NonRealImage::after{
    padding-left: 5px;
    padding-right: 5px;
    color: orange;
    content: "Non real image";
}

.RequiresSignin{
    outline: solid 2px yellow;
    position: relative;
}
.RequiresSignin::after{
    padding-left: 5px;
    padding-right: 5px;
    color: yellow;
    content: "Requires Sign in";
}

.SourceMismatch::after{
    padding-left: 5px;
    padding-right: 5px;
    content: "Source Mismatch";
}
.MissingVersion{
    outline: solid 2px red;
    background-color: pink;
    position: relative;
}
.MissingVersion::after{
    padding-left: 5px;
    padding-right: 5px;
    color: red;
    content: "Missing Version";
}
.MissingVersion > .image::before{
    font-weight: bolder;
    font-size: 12px;
    /* content: "This version likely does not exist. A lot of effort has been put into searching for it with no luck.\A\AIf you find a real instance of it, contact Crawdad105.";*/
    content: "This version likely does not exist.";
    white-space: pre-wrap;
    position: absolute;
}

.BadSource{
    outline: solid 2px orange;
    position: relative;
}
.BadSource::after{
    padding-left: 5px;
    padding-right: 5px;
    color: orange;
    content: "Bad Source";
}
.BadSource > .image::before{
    font-weight: bolder;
    font-size: 12px;
    /* content: "The source is no longer useful.\A\AIf you find a real instance of it, contact Crawdad105."; */
    content: "The source is no longer useful.";
    white-space: pre-wrap;
    position: absolute;
}

.MaybeVersion{
    outline: solid 2px orange;
    background-color: rgb(255, 214, 198);
    position: relative;
}
.MaybeVersion::after{
    padding-left: 5px;
    padding-right: 5px;
    color: orange;
    content: "Missing Version?";
}
.MaybeVersion > .image::before{
    font-weight: bolder;
    font-size: 12px;
    /* content: "This version may or may not exist. Some effort has been put into searching for it.\A\AIf you find a real instance of it, contact Crawdad105.";*/
    content: "This version may or may not exist.";
    white-space: pre-wrap;
    position: absolute;
}

.ExistsVersion{
    position: relative;
    outline: solid 1px lime;
}
.ExistsVersion::after{
    padding-left: 5px;
    padding-right: 5px;
    color: green;
    content: "Does Exist";
}
.ExistsVersion > .image::before{
    font-weight: bolder;
    font-size: 12px;
    content: "This version does exist but sources are bad.";
    white-space: pre-wrap;
    position: absolute;
}

.MightVersion{
    position: relative;
    outline: solid 2px yellow;
    background-color: rgb(255, 240, 198);
}
.MightVersion::after{
    padding-left: 5px;
    padding-right: 5px;
    color: goldenrod;
    content: "Might Exist?";
}
.MightVersion > .image::before{
    font-weight: bolder;
    font-size: 12px;
    /* content: "This version might exist according to a source however there is no proof.\A\AIf you find a real instance of it, contact Crawdad105."; */
    content: "Version might exist according to a source.";
    white-space: pre-wrap;
    position: absolute;
}

.OverImageDetails > .image::before{
    color: white;
    text-shadow: black 2px 0px 0px, black -2px 0px 0px, black 0 2px 0px, black 0 -2px 0px;
}

.gameSeperator{
    border: solid 3px white;
    border-radius: 10px;
}