.card-container{
        height: 250px;
        width:250px;
        display: grid;
        grid-template-columns: 0fr 0fr 0fr;
        row-gap: 0px;
        justify-items: left;
            
        }
  .card2{
            width: 250px;
            height: 250px;
            box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
            overflow: hidden;
       }

h1 {
  font-family: 'ScreenMatrix', sans-serif;
  font-size: 3.5em;
  line-height: 0.75em;
  color: olive;
  margin-bottom: 0;
}

#logo {
  width: 0.75em;
  vertical-align: baseline;
  margin-right: 0.25em;
}

small {
  font-size: 0.75em;
}

header,
footer {
  text-align: center;
}

nav {
  margin-top: 1em;
}

table {
  width: auto;
  margin: 1.5em auto;
  border: calc(var(--bordecel) * 2) solid darkgray;
  border-collapse: collapse;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
}

td {
  width: var(--anchocel);
  height: var(--anchocel);
  padding: 0;
  border: var(--bordecel) solid darkgray;
  cursor: crosshair;
}

nav>button, #analogous>button {
  width:  40px;
  height: 40px;
  border-radius: 20px;
  border: 1px solid darkgray;
  cursor: pointer!important;
  font-size: 0.75em;
    margin:1px;

}

.blanquear{
    color:#ccc;
}

.seleccion {
  box-shadow: inset 2px 2px 5px darkslategray;
}
.W100 {
  background-color:#FFFFFF;
}
.svgW100 {
  fill: #FFFFFF;
}
.A056 {
  background-color:#BED1D5;
}
.svgA056 {
  fill: #BED1D5;
}
.A055 {
  background-color: #92D6ED;
}
.svgA055 {
  fill: #92D6ED;
}

.A054 {
  background-color: #B0DBE4;
}
.svgA054 {
  fill: #B0DBE4;
}
.A053 {
  background-color: #4E91C6;
}
.svgA053 {
 fill: #4E91C6;
}
.A052 {
  background-color: #2875A1;
}
.svgA052 {
  fill: #2875A1;
}

.A051 {
  background-color: #194866;
}
.svgA051 {
  fill: #194866;
}

/* ======================================== */

.V046 {
  background-color:#C4E1A6;
}
.svgV046 {
  fill: #C4E1A6;
}
.V045 {
  background-color: #ABD1C4;
}
.svgV045 {
  fill: #ABD1C4;
}

.V044 {
  background-color: #B5CABB;
}
.svgV044 {
  fill: #B5CABB;
}
.V043 {
  background-color: #019389;
}
.svgV043 {
 fill: #019389;
}
.V042 {
  background-color: #82B67B;
}
.svgV042 {
  fill: #82B67B;
}

.V041 {
  background-color: #015B3F;
}
.svgV041 {
  fill: #015B3F;
}
/* ======================================== */

.C015 {
  background-color:#D4C4B4;
}
.svgC015 {
  fill: #D4C4B4;
}
.C014 {
  background-color: #D9BDA5;
}
.svgC014 {
  fill: #D9BDA5;
}

.C013 {
  background-color: #CB9A79;
}
.svgC013 {
  fill: #CB9A79;
}
.C012 {
  background-color: #CBA36C;
}
.svgC012 {
 fill: #CBA36C;
}
.C011 {
  background-color: #C39363;
}
.svgC011 {
  fill: #C39363;
}

.C010 {
  background-color: #9D6133;
}
.svgC010 {
  fill: #9D6133;
}
/* ======================================== */

.R025 {
  background-color:#DEB8AF;
}
.svgR025 {
  fill: #DEB8AF;
}
.R024 {
  background-color:#E2CFC9;
}
.svgR024 {
  fill: #E2CFC9;
}

.R023 {
  background-color:#CC7267;
}
.svgR023 {
  fill: #CC7267;
}

.R022 {
  background-color:#E0978C;
}
.svgR022 {
  fill: #E0978C;
}

.R021 {
  background-color:#BC5B55;
}
.svgR021 {
  fill: #BC5B55;
}

.R020 {
  background-color:#A62B2D;
}
.svgR020 {
  fill: #A62B2D;
}

/* ======================================== */
.A036 {
  background-color:#E1D8B9;
}
.A035 {
  background-color:#EADCB5;
}
.A034 {
  background-color:#F2DC8D;
}
.A033 {
  background-color:#E1AA03;
}
.A032 {
  background-color:#E8CA59;
}
.A031 {
  background-color:#CA8B09;
}
.svgA036 {
  fill: #E1D8B9;
}
.svgA035 {
  fill: #EADCB5;
}
.svgA034 {
  fill: #F2DC8D;
}
.svgA033 {
  fill: #E1AA03;
}
.svgA032 {
  fill: #E8CA59;
}
.svgA031 {
  fill: #CA8B09;
}

/* ======================================== */
.G005 {
  background-color:#D7D7D7;
}
.G004 {
  background-color:#BABABA;
}
.G003 {
  background-color:#A8ADB1;
}
.G002 {
  background-color:#8A8A8A;
}
.svgG005 {
  fill: #D7D7D7;
}
.svgG004 {
  fill: #BABABA;
}
.svgG003 {
  fill: #A8ADB1;
}
.svgG002 {
  fill: #8A8A8A;
}

/* ======================================== */
.N001 {
  background-color:#3D3E42;
}
.svgN001 {
  fill:#3D3E42;
}
/* ======================================== */
.B100 {
  background-color:#DED5D0;
}
.svgB100 {
  fill:#DED5D0;
}