@font-face {
    font-family: FixedSys;
    src: url("assets/fonts/fixedsys-8514oem-unicode.otf.woff2") format("woff2");
}


html, body { 
    border: 0;
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: FixedSys;
    background: url(assets/background.png) rgb(56, 171, 206);
}
#container { padding: 1em; }
/* #menu { border: 0; width: 20%; height: 100%; }*/
#content { margin: 0 auto; }

#menu ul { display: flex; align-items: center; gap: 3em; }
#menu li { display: flex; }

/* // windows xp background color */
figcaption { background: #ff5454; }

.drawing {
    display: inline-block;
    box-shadow: 0px 0px 50px  rgb(56, 171, 206);;
    border: solid 5px black;
}
.drawing img {
    border-style: solid;
    border-width: 15px;
    border-color: black #757575 lightgray #757575;
    object-fit: contain;
    width: calc(100% - 30px);
    height: 370px;
    background: #242247;
    background: linear-gradient(156deg, rgba(36, 34, 71, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(3, 153, 216, 1) 81%, rgba(0, 212, 255, 1) 100%);
}
.drawing figcaption {
    border-top: 3px solid;
    padding: 4px;
}

.drawing.follow-hyottoko img {
    height: 200px;
}

.twitch-assets {
    display: inline-block;
}

.twitch-assets table {
    background: #000000;
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 50%, rgba(255, 255, 255, 1) 100%);
}

.banners {
    display: flex;
    flex-wrap: wrap;
}

.banner-link {
    display: inline-block;
    margin: 1em 40px;
}
.banner-link figure {
    margin: 0;
}

.banner {
    width: 320px;
}

.mirror {
    display: inline-block;
    transform: scaleX(-1);
}


.wingsparachan-table {
    background: rgb(105, 202, 219);

    tr th { background: rgba(29, 28, 28, 0.4); }
}

.wingsparachan-table td { text-align: center; }
.wingsparachan-table .win { background: rgb(44, 255, 55); }
.wingsparachan-table .lose { background: rgb(255, 86, 86); }

.wingsparachan-banner img {
    width: 640px;
}


.icon {
    background-size: contain;
    height: 24px;
    display: inline-block;
}
.icon.icon-house { background-image: url("assets/gfx/home.png"); aspect-ratio: 359/388; }
.icon.icon-controller { background-image: url("assets/gfx/controller.png"); aspect-ratio: 370/319; }
.icon.icon-achan { background-image: url("images/achan/profile_image.png"); aspect-ratio: 1/1; }

kbd { background: rgb(143, 144, 165); color: white; padding: .2em .5em; border-width: 2px; border-style: solid; border-color:  white white grey grey; }

.game-cover-cell {
    text-align: center;
}

.game-cover-cell img { border: dashed 4px; }