/***** BRICK THEME *****/

.header-brick {
    background-color: #e5e5f7;
    background-size: 20px 20px;
    background-image:  repeating-linear-gradient(to right, #176317, #176317 1px, #0b420b 1px, #0b420b);
    border-bottom: 5px solid #176317;
}
.title-brick {
    color: white;
    text-shadow: 2px 2px 2px rgb(75, 13, 13);
}
.text-brick {
    color: white;
    text-shadow: 2px 2px 2px rgb(75, 13, 13);
}
.container-brick {
    background-color: #0b420b;
}
.column-brick {
    background: repeating-linear-gradient( -45deg, #0b420b, #0b420b, #136413 5px, #176317 25px );
}

.start-bg-brick {
    background-color: #e5e5f7;
    background-size: 20px 20px;
    background-image:  repeating-linear-gradient(to right, #176317, #176317 1px, #0b420b 1px, #0b420b);
    border-right: 2px ridge #289628;
    border-bottom: 2px ridge #289628;
}
.start-bg2-brick {
    background: repeating-linear-gradient( -45deg, #0b420b, #0b420b, #136413 5px, #176317 25px );
}

.small-card.start-brick {
  background-color: #561206;
  background-image:  linear-gradient(30deg, #da1e1e 12%, transparent 12.5%, transparent 87%, #da1e1e 87.5%, #da1e1e), linear-gradient(150deg, #da1e1e 12%, transparent 12.5%, transparent 87%, #da1e1e 87.5%, #da1e1e), linear-gradient(30deg, #da1e1e 12%, transparent 12.5%, transparent 87%, #da1e1e 87.5%, #da1e1e), linear-gradient(150deg, #da1e1e 12%, transparent 12.5%, transparent 87%, #da1e1e 87.5%, #da1e1e), linear-gradient(60deg, #da1e1e77 25%, transparent 25.5%, transparent 75%, #da1e1e77 75%, #da1e1e77), linear-gradient(60deg, #da1e1e77 25%, transparent 25.5%, transparent 75%, #da1e1e77 75%, #da1e1e77);
  background-size: 20px 35px;
  background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
  border: 1px solid #5c0404;
}

.card.black-color-brick {
    color: #063b06;
    text-shadow: 1px 1px 8px #c4d8c4;
}
.card.red-color-brick {
    color: #d60202;
    text-shadow: 0px 0px 8px #ddcccc;
}
.hard-game-brick {
    color: #063b06;
    box-shadow: 1px 1px 4px black;
}
.easy-game-brick {
    color: #d60202;
    box-shadow: 1px 1px 4px black;
}
.easy3-brick {
    color: #d60202;
}
.easy4-brick {
    color: #063b06;
}
.hard3-brick {
    color: #063b06;
}
.hard4-brick {
    color: #d60202;
}

.hard-game-brick, .easy-game-brick {
  background-color: #ffffff;
  background-size: 10px 10px;
  background-image: repeating-linear-gradient(45deg, #00000010 0, #00000010 1px, #ffffff 0, #ffffff 50%);
  border: 1px solid black;
}

.hard-game-brick > p, .easy-game-brick > p {
    color: black;
}

.hard-game-brick:hover, .easy-game-brick:hover {
  background-color: #561206;
  background-image:  linear-gradient(30deg, #da1e1e 12%, transparent 12.5%, transparent 87%, #da1e1e 87.5%, #da1e1e), linear-gradient(150deg, #da1e1e 12%, transparent 12.5%, transparent 87%, #da1e1e 87.5%, #da1e1e), linear-gradient(30deg, #da1e1e 12%, transparent 12.5%, transparent 87%, #da1e1e 87.5%, #da1e1e), linear-gradient(150deg, #da1e1e 12%, transparent 12.5%, transparent 87%, #da1e1e 87.5%, #da1e1e), linear-gradient(60deg, #da1e1e77 25%, transparent 25.5%, transparent 75%, #da1e1e77 75%, #da1e1e77), linear-gradient(60deg, #da1e1e77 25%, transparent 25.5%, transparent 75%, #da1e1e77 75%, #da1e1e77);
  background-size: 20px 35px;
  background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
  border: 2px solid #5c0404;
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  box-shadow: 0px 2px 10px rgb(46, 134, 46);
}

.hard-game-brick:hover > p {
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.easy-game-brick:hover > p  { 
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.cardback-brick {
    background-color: #561206;
    background-image:  linear-gradient(30deg, #da1e1e 12%, transparent 12.5%, transparent 87%, #da1e1e 87.5%, #da1e1e), linear-gradient(150deg, #da1e1e 12%, transparent 12.5%, transparent 87%, #da1e1e 87.5%, #da1e1e), linear-gradient(30deg, #da1e1e 12%, transparent 12.5%, transparent 87%, #da1e1e 87.5%, #da1e1e), linear-gradient(150deg, #da1e1e 12%, transparent 12.5%, transparent 87%, #da1e1e 87.5%, #da1e1e), linear-gradient(60deg, #da1e1e77 25%, transparent 25.5%, transparent 75%, #da1e1e77 75%, #da1e1e77), linear-gradient(60deg, #da1e1e77 25%, transparent 25.5%, transparent 75%, #da1e1e77 75%, #da1e1e77);
    background-size: 20px 35px;
    background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
    outline: 2px solid #5c0404;
}
.reset-brick {
    border-radius: 0.5rem;
    border: 5px solid rgb(23, 99, 23);
    color: rgb(23, 99, 23);
}
.foundations-brick {
    background-image: repeating-linear-gradient(to right, #176317, #176317 1px, #0b420b 1px, #0b420b);
    background-color: #e5e5f7;
}
.foundation-brick {
    border: 4px solid rgb(23, 99, 23);
    border-radius: 0.5rem;
    color: #176317;
    box-shadow: 0 0 3px #176317 inset;
    text-shadow: 0px 0px 4px #267e14;
}
.sidebar-brick {
    background-color: #e5e5f7;
    background-size: 20px 20px;
    background-image:  repeating-linear-gradient(to right, #176317, #176317 1px, #0b420b 1px, #0b420b);
}
.theme-btn-brick {
    background: repeating-linear-gradient( -45deg, #0b420b, #0b420b, #136413 5px, #176317 25px );
    text-shadow: 2px 2px 2px black;
    box-shadow: 1px 1px 2px #0e720e;
    border-right: 3px ridge #2b862b;
    border-bottom: 3px ridge #297929;
    border-top: none;
    border-left: none;
}
.newgame-brick {
    color: white;
    text-shadow: 2px 2px 2px rgb(75, 13, 13);
}
.newtext-brick {
    text-shadow: 2px 2px 2px rgb(75, 13, 13);
}

/*****  WAVE THEME *****/

.header-wave {
    background-color: #9c7e28;
    background-image: radial-gradient(#251805 0.75px, #9c7e28 0.75px);
    background-size: 15px 15px;
    border-bottom: 5px solid #c0b433;
}
.title-wave {
    color: white;
    text-shadow: 2px 2px 2px #0b2f52;
}
.text-wave {
    color: white;
    text-shadow: 2px 2px 2px #0b2f52;
}
.container-wave {
    background-color: #9c7e28;
}
.column-wave {
    background-color: #164673;
    background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #164673 15px ), repeating-linear-gradient( #204a9255, #204a92 );
}

.start-bg-wave {
    background-color: #9c7e28;
    background-image: radial-gradient(#251805 0.75px, #9c7e28 0.75px);
    background-size: 15px 15px;
    border-right: 2px ridge #be9c3d;
    border-bottom: 2px ridge #be9c3d;
}
.start-bg2-wave {
    background-color: #164673;
    background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #164673 15px ), repeating-linear-gradient( #204a9255, #204a92 );
}

.small-card.start-wave {
  background-color: #978a08;
  background-image: radial-gradient( ellipse farthest-corner at 15px 15px , #c5b62b, #c5bb2b 50%, #978a08 50%);
  background-size: 15px 15px;
  border: 1px solid #f8eb56;
}

.card.black-color-wave {
    color: #164673;
    text-shadow: 0px 0px 8px #cbd4dd;
}
.card.red-color-wave {
    color: #a3960a;
    text-shadow: 0px 0px 8px #dbd9c8;
}
.hard-game-wave {
    color: #164673;
    box-shadow: 1px 1px 4px black;
}
.easy-game-wave {
    color: #a3960a;
    box-shadow: 1px 1px 4px black;
}
.easy3-wave {
    color: #a3960a;
}
.easy4-wave {
    color: #164673;
}
.hard3-wave {
    color: #164673;
}
.hard4-wave {
    color: #a3960a;
}

.hard-game-wave, .easy-game-wave {
  background-color: #ffffff;
  background-size: 10px 10px;
  background-image: repeating-linear-gradient(45deg, #00000010 0, #00000010 1px, #ffffff 0, #ffffff 50%);
  border: 1px solid black;
}

.hard-game-wave > p, .easy-game-wave > p {
  color: black;
}

.hard-game-wave:hover, .easy-game-wave:hover {
  background-color: #978a08;
  background-image: radial-gradient( ellipse farthest-corner at 15px 15px , #c5b62b, #c5bb2b 50%, #978a08 50%);
  background-size: 15px 15px;
  border: 2px solid #f8eb56;
  color: white;
  text-shadow: -1px -1px 0 #756c06, 1px -1px 0 #756c06, -1px 1px 0 #756c06, 2px 3px 0 #756c06;
  box-shadow: 0px 2px 10px rgb(136, 145, 55);
}
.hard-game-wave:hover > p {
  color: white;
  text-shadow: -1px -1px 0 #756c06, 1px -1px 0 #756c06, -1px 1px 0 #756c06, 2px 3px 0 #756c06;
}
.easy-game-wave:hover > p  {
  color: white;
  text-shadow: -1px -1px 0 #756c06, 1px -1px 0 #756c06, -1px 1px 0 #756c06, 2px 3px 0 #756c06;
}

.cardback-wave {
    background-color: #978a08;
    background-image: radial-gradient( ellipse farthest-corner at 15px 15px , #c5b62b, #c5bb2b 50%, #978a08 50%);
    background-size: 15px 15px;
    outline: 2px solid #f8eb56;
}
.reset-wave {
    border-radius: 0.5rem;
    border: 5px solid #c0b433;
    color: #c0b433;
}
.foundations-wave {
    background-color: #9c7e28;
    background-image: radial-gradient(#251805 0.75px, #9c7e28 0.75px);
    background-size: 15px 15px;
}
.foundation-wave {
    border: 4px solid #c0b433;
    color: #c0b433;
    border-radius: 0.5rem;
    box-shadow: 0 0 3px #c0b433 inset;
    text-shadow: 0px 0px 4px #d6c93a;
}
.sidebar-wave {
    background-color: #9c7e28;
    background-image: radial-gradient(#251805 0.75px, #9c7e28 0.75px);
    background-size: 15px 15px;
}
.theme-btn-wave {
    background-color: #164673;
    background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #164673 15px ), repeating-linear-gradient( #204a9255, #204a92 );
    text-shadow: 2px 2px 2px black;
    box-shadow: 1px 1px 2px #2a4c86;
    border-right: 3px ridge #2a4c86;
    border-bottom: 3px ridge #2a4c86;
    border-top: none;
    border-left: none;
}

.newgame-wave {
    color: white;
    text-shadow: 2px 2px 2px #0b2f52;
}
.newtext-wave {
    text-shadow: 2px 2px 2px #0b2f52;
}

/***** CHECKER THEME *****/

.header-checker {
    background-color: #282828;
    background-image:  linear-gradient(#323232 3px, transparent 3px), linear-gradient(90deg, #323232 3px, transparent 3px), linear-gradient(#323232 1.5px, transparent 1.5px), linear-gradient(90deg, #323232 1.5px, #282828 1.5px);
    background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
    background-position: -3px -3px, -3px -3px, -1.5px -1.5px, -1.5px -1.5px;
    border-bottom: 5px solid #7b7878;
}
.title-checker {
    color: white;
    text-shadow: 2px 2px 2px black;
}
.text-checker {
    color: white;
    text-shadow: 2px 2px 2px black;
}
.container-checker {
    background-color: #282828;
    background-image:  linear-gradient(#323232 3px, transparent 3px), linear-gradient(90deg, #323232 3px, transparent 3px), linear-gradient(#323232 1.5px, transparent 1.5px), linear-gradient(90deg, #323232 1.5px, #282828 1.5px);
    background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
    background-position: -3px -3px, -3px -3px, -1.5px -1.5px, -1.5px -1.5px;
}
.column-checker {
    background-color: #646464;
    background-image:  linear-gradient(#7b7878 1.5px, transparent 1.5px), linear-gradient(to right, #7b7878 1.5px, #646464 1.5px);
    background-size: 30px 30px;
}

.start-bg-checker {
    background-color: #282828;
    background-image:  linear-gradient(#323232 3px, transparent 3px), linear-gradient(90deg, #323232 3px, transparent 3px), linear-gradient(#323232 1.5px, transparent 1.5px), linear-gradient(90deg, #323232 1.5px, #282828 1.5px);
    background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
    background-position: -3px -3px, -3px -3px, -1.5px -1.5px, -1.5px -1.5px;
    border-right: 2px ridge #555;
    border-bottom: 2px ridge #555;
}
.start-bg2-checker {
    background-color: #646464;
    background-image:  linear-gradient(#7b7878 1.5px, transparent 1.5px), linear-gradient(to right, #7b7878 1.5px, #646464 1.5px);
    background-size: 30px 30px;
}

.small-card.start-checker {
  background-color: #7c0000;
  background-image:  linear-gradient(135deg, #000000 25%, transparent 25%), linear-gradient(225deg, #000000 25%, transparent 25%), linear-gradient(45deg, #000000 25%, transparent 25%), linear-gradient(315deg, #000000 25%, #7c0000 25%);
  background-position:  15px 0, 15px 0, 0 0, 0 0;
  background-size: 15px 15px;
  background-repeat: repeat;
  border: 1px solid #9b0909;
}

.card.black-color-checker {
    color: #111;
    text-shadow: 0px 0px 8px rgb(224, 224, 224);
}
.card.red-color-checker {
    color: #9b0909;
    text-shadow: 0px 0px 8px #dbcdcd;
}
.hard-game-checker {
    color: #111;
    box-shadow: 1px 1px 4px black;
}
.easy-game-checker {
    color: #9b0909;
    box-shadow: 1px 1px 4px black;
}
.easy3-checker{
    color: #9b0909;
}
.easy4-checker{
    color: #111;
}
.hard3-checker{
    color: #111;
}
.hard4-checker {
    color: #9b0909;
}

.hard-game-checker, .easy-game-checker {
  background-color: #ffffff;
  background-size: 10px 10px;
  background-image: repeating-linear-gradient(45deg, #00000010 0, #00000010 1px, #ffffff 0, #ffffff 50%);
  border: 1px solid black;
}

.hard-game-checker > p, .easy-game-checker > p {
  color: black;
}

.hard-game-checker:hover, .easy-game-checker:hover {
  background-color: #7c0000;
  background-image:  linear-gradient(135deg, #111 25%, transparent 25%), linear-gradient(225deg, #111 25%, transparent 25%), linear-gradient(45deg, #111 25%, transparent 25%), linear-gradient(315deg, #000000 25%, #7c0000 25%);
  background-position:  15px 0, 15px 0, 0 0, 0 0;
  background-size: 15px 15px;
  background-repeat: repeat;
  border: 2px solid #810606;
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 2px 3px 0 #000;
  box-shadow: 0px 2px 10px rgb(95, 0, 0);
}
.hard-game-checker:hover > p {
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 2px 3px 0 #000;
}
.easy-game-checker:hover > p  {
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 2px 3px 0 #000;
}

.cardback-checker {
    background-color: #7c0000;
    background-image:  linear-gradient(135deg, #111 25%, transparent 25%), linear-gradient(225deg, #111 25%, transparent 25%), linear-gradient(45deg, #111 25%, transparent 25%), linear-gradient(315deg, #000000 25%, #7c0000 25%);
    background-position:  15px 0, 15px 0, 0 0, 0 0;
    background-size: 15px 15px;
    background-repeat: repeat;
    outline: 2px solid #9b0909;
}
.reset-checker {
    border-radius: 0.5rem;
    border: 5px solid #7b7878;
    color: #7b7878;
}
.foundations-checker {
    background-color: #282828;
    background-image:  linear-gradient(#323232 3px, transparent 3px), linear-gradient(90deg, #323232 3px, transparent 3px), linear-gradient(#323232 1.5px, transparent 1.5px), linear-gradient(90deg, #323232 1.5px, #282828 1.5px);
    background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
    background-position: -3px -3px, -3px -3px, -1.5px -1.5px, -1.5px -1.5px;
}
.foundation-checker {
    border: 4px solid #7b7878;
    color: #7b7878;
    border-radius: 0.5rem;
    box-shadow: 0 0 3px #7b7878 inset;
    text-shadow: 0px 0px 4px #8f8c8c;
}
.sidebar-checker {
    background-color: #282828;
    background-image:  linear-gradient(#323232 3px, transparent 3px), linear-gradient(90deg, #323232 3px, transparent 3px), linear-gradient(#323232 1.5px, transparent 1.5px), linear-gradient(90deg, #323232 1.5px, #282828 1.5px);
    background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
    background-position: -3px -3px, -3px -3px, -1.5px -1.5px, -1.5px -1.5px;
}
.theme-btn-checker {
    background-color: #646464;
    background-image:  linear-gradient(#7b7878 1.5px, transparent 1.5px), linear-gradient(to right, #7b7878 1.5px, #646464 1.5px);
    background-size: 30px 30px;
    text-shadow: 2px 2px 2px black;
    box-shadow: 1px 1px 2px #555;
    border-right: 3px ridge #666;
    border-bottom: 3px ridge #666;
    border-top: none;
    border-left: none;
}

.newgame-checker {
    color: white;
    text-shadow: 2px 2px 2px black;
}
.newtext-checker {
    text-shadow: 2px 2px 2px #111;
}