/* site-wide CSS for the splash pop-up thing */

table.wario-splash_table {
    background-size: cover;
    background-repeat: no-repeat;
    /* background-attachment: local; */
    /* background-attachment:scroll; */

    border: 0px;
	border: none;
    margin: 0px;
	padding: 0px;
}
table.wario-splash-A_bg {
    /* shoutouts to https://css-tricks.com/almanac/functions/i/image-set/ */
    /* fallback for legacy browsers */
    background-image: url("wario-splash-A_0.5x.gif");
    /* a handful of modern browsers still fallback to this */
    background-image: -webkit-image-set(url("wario-splash-A.gif") 1x, url("wario-splash-A.gif") 2x, url("wario-splash-A_3x.gif") 3x);
    /* standard */
    background-image: image-set("wario-splash-A.gif" 1x, "wario-splash-A.gif" 2x, "wario-splash-A_3x.gif" 3x);
}
table.wario-splash-B_bg {
    background-image: url("wario-splash-B_0.5x.gif");
    background-image: -webkit-image-set(url("wario-splash-B.gif") 1x, url("wario-splash-B.gif") 2x, url("wario-splash-A_Bx.gif") 3x);
    background-image: image-set("wario-splash-B.gif" 1x, "wario-splash-B.gif" 2x, "wario-splash-B_3x.gif" 3x);
}



/* inspired by: https://christianheilmann.com/2020/07/16/a-css-only-click-to-animate-gif-solution/ */
.splash-click-to-hide img {
    display: block;
}
.splash-click-to-hide input[type=checkbox] {
    display: inline;
}
label.splash-click-to-hide {
/*  display: flex;
    float: none; */
    position: fixed;
    bottom: 0;
    right: 0;
}
/*
.splash-click-to-hide:hover, .splash-click-to-hide:focus-within {
	background-image: url(splash-B.png);
}
*/
/* the "input[type=checkbox]+div" case is unused */
.splash-click-to-hide input[type=checkbox]+img, input[type=checkbox]+div, input[type=checkbox]+table {
    /* "unset" for ease of modification; checked and unchecked
	    style tags can be swapped and it should (hopefully) still work. */
    height: unset;
    /* you might think "display: initial;" or "display: unset;" for
        the table would make sense here. but no, that breaks stuff lol. */
}
.splash-click-to-hide input[type=checkbox]:checked+img, input[type=checkbox]:checked+div, input[type=checkbox]:checked+table {
    height: 0; /* for img and perhaps div */
    display: none; /* for tables */
}
/* another way of doing the same thing */
/*
label.splash-click-to-hide:has(input:checked) img {
    height: 0;
}
*/