@import url('https://fonts.googleapis.com/css2?family=Cousine:ital,wght@0,400;0,700;1,400;1,700&family=Jersey+10&display=swap');
      #swagbox {
        width: fit-content;
        /* width: 10em; */
        max-width: 80vw;
        /* margin: auto; */
        text-align: center;
        border-width: 1em;
    }
    
    b1 {
        font-family: "Jersey 10", sans-serif;
        font-weight: 400;
        font-style: normal;
    }
    b {
        background-color: #000;
        color: #0f0;
    }
    body {
        font-family: "IBM VGA", monospace;
        -webkit-font-smoothing: none;
        color: #dadada;
        font-size: 18px;
        /* font-family: sans-serif; */
        background: 
        linear-gradient( 
        rgba(0, 0, 0, 0.85), 
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0.85) ),
        url("/images/supermachine/bg.gif");
        /* background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSu5pWes0oqVIm0gCQmso0zNqCxTHfdUIZSnQ&s"); */
        background-attachment: fixed;
    }
    .fungrid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: center;
        width: calc(100% - 2em);
        max-width: 90vw;
        margin: auto;
    }
    .funitem {
        font-family: "Jersey 10";
        /* font-family: Impact; */
        font-weight: 100;
        font-size: 1.25em;
        text-align: center;
    }
    #title { width: 20em; max-width: 90vw; margin: auto; }
    img { max-width: 90vw; }
    .sex {
        border: 10px solid transparent; /* Required for border-image */
        padding: 0px;
        border-image: url(/images/supermachine/bg3.gif) 50 round;
        border-image-slice: 50 fill;
    }
    .windows-box-shadow, .minesweeper .content > label {
        box-shadow: -2px -2px #e0dede, -2px 0 #e0dede, 0 -2px #e0dede, -4px -4px white, -4px 0 white, 0 -4px white, 2px 2px #818181, 0 2px #818181, 2px 0 #818181,  2px -2px #e0dede, -2px 2px #818181, -4px 2px white, -4px 4px black, 4px 4px black, 4px 0 black, 0 4px black, 2px -4px white, 4px -4px black;
    }
    .inverse-windows-box-shadow, .minesweeper .content > label:active {
        box-shadow: -2px -2px #818181, -2px 0 #818181, 0 -2px #818181, -4px -4px black, -4px 0 black, 0 -4px black, 2px 2px #e0dede, 0 2px #e0dede, 2px 0 #e0dede,  2px -2px #818181, -2px 2px #e0dede, -4px 2px black, -4px 4px white, 4px 4px white, 4px 0 white, 0 4px white, 2px -4px black, 4px -4px white;
    }
    #gridbox {
        display: grid; 
        /* background-image: url("/images/supermachine/bg2.gif");
        background-size: 445px; */
        background: #0a0a0a;
        margin: auto; 
        width: 60em;
        max-width: 90vw;
        padding: 0.5em;
        gap: 0.5em;
        align-items: top;
        overflow: visible;
    }
    @media screen and (width <= 60em) {
        #gridbox {
            display: grid;
            grid-template-columns: minmax(0, 1fr) !important;
            max-width: 90vw;
            justify-items: center;
            justify-content: center;
        }
        .fungrid { grid-template-columns: repeat(3, 1fr); }
    }
    .img_container { width: 100%; height: 16em; max-width: 90vw; margin:auto }
    .img_container img { width: 100%; height: 100%; object-fit: contain }
    .sumbox {
        display: grid;
        grid-template-columns: 7em 1fr;
        gap: 1em;
        align-items: center;
        color: #04f;
    }
    .sumbox b1 {color: #04f;}
    .sumbox:hover {color: #0ff; cursor: pointer;}
    .sumbox:hover b1 {color: #0ff;}
    a:link { color: #04f; font-weight: normal; }
    a:visited { color: #a0f;  font-weight: normal;}
    a:hover { color: #0ff; }
    a:active { color: #04f; }
    .toph_cont {width: 100%; display: grid; grid-template-rows: min-content min-content; gap: 0.25em; text-align: center; align-self: center;}
    .toph_cont img { width: 100%; }
    datus {font-family: monospace; display: inline; font-size: 0.75em;}
    
    .window_title {
        background: linear-gradient(to right, #003, #04f); 
        /* background: linear-gradient(to right, #400, #f00);  */
        color: #fff;
        width: calc(100% - 8px); 
        padding: 4px; 
        display: grid; 
        grid-template-columns: 1fr repeat(3,20px);
        align-items: center;
        gap: 4px;
        margin-bottom: 8px;
        border: #000 solid 1px;
        right: -1px
    }
    .window_box {
        background: #b4b4b4;
        width: 61.5em;
        max-width: calc(90vw + 1.5em);
        margin: auto;
        padding-bottom: 8px;
        margin-bottom: 1em;
        filter: drop-shadow(4px 8px 2px #000000ee);
    }
    .diapo { color: black; background: none !important;}
    .diapo b1 {color: black;}