@charset "UTF-8";

body, html {
    height: 100%;
}

#main {
    min-height: 90%;
    background-image: url("/img/noise.png");
    background-repeat: repeat;
}

.footer {
    color: white;
    background-image: linear-gradient(#2367a9, #050a30);
}

/* https://www.w3schools.com/howto/howto_css_zoom_hover.asp */
.zoom {
    transition: transform .2s; /* Animation */
    width: auto;
    height: auto;
}

.zoom:hover {
    /* (1000% zoom - Note: if the zoom is too large, it will go outside of the viewport)
       TranslateX by 50% to prevent overflow */
    transform: scale(1.2);
}

/* https://htmx.org/attributes/hx-indicator/ */
.htmx-indicator{
    display:none;
    opacity:0;
    transition: opacity 500ms ease-in;
}
.htmx-request .htmx-indicator{
    display:inline-block;
    opacity:1;
}
.htmx-request.htmx-indicator{
    display:inline-block;
    opacity:1;
}

/*********************************************************************************/
.htmx-swapping div, tr.htmx-swapping td {
    opacity: 0;
    transition: opacity 1s ease-out;
}

/*********************************************************************************/
/* <https://yugioh.fandom.com/wiki/Card_colors> */
.main-deck-list {
    color: #000;
    background-color: #FF8B53;
    background-image: url("/img/noise.png");
    background-blend-mode: overlay;
}
.extra-deck-list {
    color: #000;
    background-color: #BC5A84;
    background-image: url("/img/noise.png");
    background-blend-mode: overlay;
}
.side-deck-list {
    color: #000;
    background-color: #1D9E74;
    background-image: url("/img/noise.png");
    background-blend-mode: overlay;
}

/*********************************************************************************/
/* background-image: url("/img/noise.png"), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)); */
.effect {color: #000; background-color: #FF8B53; background-image: url("/img/noise.png"); }
.fusion {color: #000; background-color: #A086B7; background-image: url("/img/noise.png"); }
.link {color: #fff; background-color: #00008B; background-image: url("/img/noise.png"); }
.normal {color: #000; background-color: #FDE68A; background-image: url("/img/noise.png"); }
.ritual {color: #000; background-color: #9DB5CC; background-image: url("/img/noise.png"); }
.skill {color: #fff; background-color: #078cc4; background-image: url("/img/noise.png"); }
.spell {color: #fff; background-color: #1D9E74; background-image: url("/img/noise.png"); }
.synchro {color: #000; background-color: #CCCCCC; background-image: url("/img/noise.png"); }
.token {color: #000; background-color: #C0C0C0; background-image: url("/img/noise.png"); }
.trap {color: #fff; background-color: #BC5A84; background-image: url("/img/noise.png"); }
.xyz {color: #fff; background-color: #000; background-image: url("/img/noise.png"); }

/*********************************************************************************/
.effect_pendulum {
    color: #000;
    background-color: #1d9e74;
    background-image: url("/img/noise.png"), linear-gradient(#ff8b53 20%, rgba(0,0,0,0) 100%);
    background-blend-mode: normal;
}
.fusion_pendulum {
    color: #000;
    background-color: #1d9e74;
    background-image: url("/img/noise.png"), linear-gradient(#a086b7 20%, rgba(0,0,0,0) 100%);
    background-blend-mode: normal;
}
.normal_pendulum {
    color: #000;
    background-color: #1d9e74;
    background-image: url("/img/noise.png"), linear-gradient(#fde68a 20%, rgba(0,0,0,0) 100%);
    background-blend-mode: normal;
}
.ritual_pendulum {
    color: #000;
    background-color: #1d9e74;
    background-image: url("/img/noise.png"), linear-gradient(#9db5cc 20%, rgba(0,0,0,0) 100%);
    background-blend-mode: normal;
}
.synchro_pendulum {
    color: #000;
    background-color: #1d9e74;
    background-image: url("/img/noise.png"), linear-gradient(#cccccc 20%, rgba(0,0,0,0) 100%);
    background-blend-mode: normal;
}
.xyz_pendulum {
    color: #fff;
    background-color: #1d9e74;
    background-image: url("/img/noise.png"), linear-gradient(#000 20%, rgba(0,0,0,0) 100%);
    background-blend-mode: normal;
}

input[type=number] { 
    -moz-appearance: textfield;
    appearance: textfield;
    margin: 0; 
}

[data-loading] {
  display: none;
}