@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

:root {
  --card-width: 100%;
  --default-color1: rgb(182, 17, 17);
  --default-color2: rgb(218, 174, 0);
  --default-color3: rgb(255, 238, 0);
  --default-text: rgb(255, 251, 235);

  --switch-color1: #52BCE1;
  --switch-color2: rgba(227,5,21);
  --switch-color3: rgb(95, 95, 95);

  --switch2-color1: #67C3E4;
  --switch2-color2: #FB8E7C;
  --switch2-color3: rgb(58, 58, 58);

  --n3ds-color1: rgb(187, 10, 49);
  --n3ds-color2: rgb(241, 50, 139);
  --n3ds-color3: #0bd9fd;

  --atari-color1: rgb(255, 0, 0);
  --atari-color2: rgb(209, 113, 40);
  --atari-color3: rgb(70, 70, 70);

  --ds-color1: rgb(179, 179, 179);
  --ds-color2: rgb(179, 172, 134);
  --ds-color3: rgb(54, 54, 54);

  --snes-color1: rgb(219, 219, 219);
  --snes-color2: rgb(124, 0, 191);
  --snes-color3: rgb(191, 0, 191);

  --gba-color1: rgb(128, 136, 255);
  --gba-color2: rgb(211, 128, 255);
  --gba-color3: rgb(192, 192, 192);

  --pc-color1: rgb(192, 16, 16);
  --pc-color2: rgb(227, 207, 157);
  --pc-color3: rgb(36, 36, 36);

  --ps1-color1: rgb(206, 199, 187);
  --ps1-color2: rgb(116, 100, 70);
  --ps1-color3: rgb(23, 46, 82);

  --psp-color1: rgb(5, 28, 102);
  --psp-color2: rgb(184, 136, 136);
  --psp-color3: rgb(189, 189, 189);

  --ps2-color1: rgb(170, 21, 21);
  --ps2-color2: rgb(50, 39, 255);
  --ps2-color3: rgb(5, 81, 180);

  --android-color1: rgb(76, 175, 80);
  --android-color2: rgb(62, 231, 65);
  --android-color3: rgb(205, 220, 57);

  --vr-color1: rgb(76, 175, 80);
  --vr-color2: rgb(91, 236, 241);
  --vr-color3: rgb(205, 220, 57);

  --x360-color1: rgb(51, 204, 54);
  --x360-color2: rgb(0, 112, 2);
  --x360-color3: rgb(199, 216, 200);

  --arcade-color1: rgb(255, 230, 0);
  --arcade-color2: rgb(255, 123, 0);
  --arcade-color3: rgb(231, 31, 107);
}



.card {
  background: #2e313d;
  background-position: center;
  background-size: cover;
  width: var(--card-width);
  aspect-ratio: 1 / 1;
  min-height: 100px;
  padding: 3px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  font-size: 1.5em;
  color: rgb(88 199 250 / 0%);
  cursor: pointer;
  height: 100%;
}
.card .card-content{
    display: none;
}

.card:hover {
  color: var(--default-text);
  background-image: none !important;
  transition: all 1s;
}
.card:hover .card-content{
    display: block;
}
.card:hover:before, .card:hover:after {
  animation: none;
  opacity: 0;
}


.card::before {
  content: "";
  width: 104%;
  height: 102%;
  border-radius: 8px;
  background-image: linear-gradient(var(--rotate), var(--default-color1), var(--default-color2) 43%, var(--default-color3));
    position: absolute;
    z-index: -1;
    top: -1%;
    left: -2%;
    animation: spin 5s linear infinite;
}

.card::after {
  position: absolute;
  content: "";
  top: calc(400 / 6);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(400 / 6));
  background-image: linear-gradient(var(--rotate), var(--default-color1), var(--default-color2) 43%, var(--default-color3));
opacity: 1;
  transition: opacity 5s;
  animation: spin 5s linear infinite;
}

.SWITCH .card::before {
  background-image: linear-gradient(var(--rotate), var(--switch-color1), var(--switch-color2) 43%, var(--switch-color3));
}
.SWITCH .card::after {
  background-image: linear-gradient(var(--rotate), var(--switch-color1), var(--switch-color2) 43%, var(--switch-color3));
}
.SWITCH2 .card::before {
  background-image: linear-gradient(var(--rotate), var(--switch2-color1), var(--switch2-color2) 43%, var(--switch2-color3));
}
.SWITCH2 .card::after {
  background-image: linear-gradient(var(--rotate), var(--switch2-color1), var(--switch2-color2) 43%, var(--switch2-color3));
}
.N3DS .card::before {
  background-image: linear-gradient(var(--rotate), var(--n3ds-color1), var(--n3ds-color2) 43%, var(--n3ds-color3));
}
.N3DS .card::after {
  background-image: linear-gradient(var(--rotate), var(--n3ds-color1), var(--n3ds-color2) 43%, var(--n3ds-color3));
}
.Atari .card::before {
  background-image: linear-gradient(var(--rotate), var(--atari-color1), var(--atari-color2) 43%, var(--atari-color3));
}
.Atari .card::after {
  background-image: linear-gradient(var(--rotate), var(--atari-color1), var(--atari-color2) 43%, var(--atari-color3));
}
.DS .card::before {
  background-image: linear-gradient(var(--rotate), var(--ds-color1), var(--ds-color2) 43%, var(--ds-color3));
}
.DS .card::after {
  background-image: linear-gradient(var(--rotate), var(--ds-color1), var(--ds-color2) 43%, var(--ds-color3));
}
.SNES .card{
    background-position: center left;
}
.SNES .card::before {
  background-image: linear-gradient(var(--rotate), var(--snes-color1), var(--snes-color2) 43%, var(--snes-color3));
}
.SNES .card::after {
  background-image: linear-gradient(var(--rotate), var(--snes-color1), var(--snes-color2) 43%, var(--snes-color3));
}
.GBA .card::before {
  background-image: linear-gradient(var(--rotate), var(--gba-color1), var(--gba-color2) 43%, var(--gba-color3));
}
.GBA .card::after {
  background-image: linear-gradient(var(--rotate), var(--gba-color1), var(--gba-color2) 43%, var(--gba-color3));
}
.PC .card::before {
  background-image: linear-gradient(var(--rotate), var(--pc-color1), var(--pc-color2) 43%, var(--pc-color3));
}
.PC .card::after {
  background-image: linear-gradient(var(--rotate), var(--pc-color1), var(--pc-color2) 43%, var(--pc-color3));
}
.PS1 .card::before {
  background-image: linear-gradient(var(--rotate), var(--ps1-color1), var(--ps1-color2) 43%, var(--ps1-color3));
}
.PS1 .card::after {
  background-image: linear-gradient(var(--rotate), var(--ps1-color1), var(--ps1-color2) 43%, var(--ps1-color3));
}
.PSP .card::before {
  background-image: linear-gradient(var(--rotate), var(--psp-color1), var(--psp-color2) 43%, var(--psp-color3));
}
.PSP .card::after {
  background-image: linear-gradient(var(--rotate), var(--psp-color1), var(--psp-color2) 43%, var(--psp-color3));
}
.PS2 .card::before {
  background-image: linear-gradient(var(--rotate), var(--ps2-color1), var(--ps2-color2) 43%, var(--ps2-color3));
}
.PS2 .card::after {
  background-image: linear-gradient(var(--rotate), var(--ps2-color1), var(--ps2-color2) 43%, var(--ps2-color3));
}
.Android .card::before {
  background-image: linear-gradient(var(--rotate), var(--android-color1), var(--android-color2) 43%, var(--android-color3));
}
.Android .card::after {
  background-image: linear-gradient(var(--rotate), var(--android-color1), var(--android-color2) 43%, var(--android-color3));
}
.VR .card::before {
  background-image: linear-gradient(var(--rotate), var(--vr-color1), var(--vr-color2) 43%, var(--vr-color3));
}
.VR .card::after {
  background-image: linear-gradient(var(--rotate), var(--vr-color1), var(--vr-color2) 43%, var(--vr-color3));
}
.X360 .card::before {
  background-image: linear-gradient(var(--rotate), var(--x360-color1), var(--x360-color2) 43%, var(--x360-color3));
}
.X360 .card::after {
  background-image: linear-gradient(var(--rotate), var(--x360-color1), var(--x360-color2) 43%, var(--x360-color3));
}
.Arcade .card::before {
  background-image: linear-gradient(var(--rotate), var(--arcade-color1), var(--arcade-color2) 43%, var(--arcade-color3));
}
.Arcade .card::after {
  background-image: linear-gradient(var(--rotate), var(--arcade-color1), var(--arcade-color2) 43%, var(--arcade-color3));
}
.card-content .to-small{
    background-image: linear-gradient(45deg, gold, rgb(255, 240, 157));
    color: #212534;
    border-radius: 5px;
    padding: 3px;
    font-size: 10px;
    position: absolute;
    top: 10px;
    left: 10px;
}
.card-content .title{
    color: rgb(88 199 250 / 0%);
    transition: color 1s;
}
.card:hover .card-content .title{
  color: var(--default-text);
  transition: color 1s;
}
.div-icons{
    position: absolute;
    bottom: 10px;
    right: 10px;
}
.box-icons{
    background-image: linear-gradient(45deg, rgb(49, 93, 238), rgb(157, 191, 255));
    text-align: center;
    width: 26px;
    height: 26px;
    border-radius: 100%;
    font-size: 20px;
    padding-top: 3px;
    margin-left: 1px;
    margin-right: 1px;
}
.box-icons img{
    width: 80%;
    margin-top: -12px;
}
.card-content .row-links a{
    color: #fff !important;
    font-size: 13px;
}


@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}

a {
  color: #212534;
  text-decoration: none;
  font-family: sans-serif;
  font-weight: bold;
}
.col-display-games{
    flex: 0 0 auto;
    width: 16.6%;
    padding: 5px !important;
}
.col-info-esp
{
    flex: 0 0 auto;
    width: 50%;
}
@media screen and (max-width: 2000px) {
    .col-display-games{
        flex: 0 0 auto;
        width: 20%;
    }
}
@media screen and (max-width: 1500px) {
    .col-display-games{
        flex: 0 0 auto;
        width: 25%;
    }
}
@media screen and (max-width: 1200px) {
    .col-display-games{
        flex: 0 0 auto;
        width: 33.33%;
    }
}
@media screen and (max-width: 799px) {
    .col-display-games{
        flex: 0 0 auto;
        width: 50%;
    }
    .card{
      font-size: 12px !important;
      min-height: 200px;
    }
    .div-icons{
      bottom: 1px;
      right: 1px;
    }
    .col-info-esp
    {
        flex: 0 0 auto;
        width: 100%;
        text-align: left;
    }
    .card-content .row-links a{
      color: #fff !important;
      font-size: 11px;
  }
    
}
@media screen and (max-width: 389px) {
    .col-display-games{
        flex: 0 0 auto;
        width: 100%;
    }
}