* {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.container {
    display: flex;
    justify-content: space-around;
    align-items: center;

}

#textOutputOUT {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2rem;
    padding: 10px;
    text-align: center;
    width: 300px;
    height: 200px;

}

#mbTable,
#mbTable tr,
#mbTable tr td {
    margin-top: 20px;
    border: 1px solid black;
    border-collapse: collapse;
}

#mbTable tr td {
    width: 5vw;
    height: 5vw;
}

#colorPallete tr td,
#colorPallete tr {
    border: 5px solid black;
    border-collapse: separate;
}

#colorPallete tr td {
    width: 5vw;
    height: 5vw;
    text-align: center;
    font-size: xx-large;
}
#lic{
    font-size: 0.8rem;
    color: #000000;
    background: #ffffff;
    padding-left: 20px;
    user-select: none;
}
a img {
    height: 1rem;
    width: auto;
  }
/* MEDIA QUERY FOR SMALLER DEVICES */
@media only screen and (max-width: 980px) {
    .container{
        flex-direction: column;
    }
    #mbTable {
        margin-bottom: 20px;
    }
    #mbTable tr td {
        width: 7vw;
        height: 7vw;
    }
    #colorPallete tr td {
        width: 7vw;
        height: 7vw;
        text-align: center;
        font-size: xx-large;
    }

  }

/* COLOR CODES */
#colorPallete tr #colorPA {
    background-color: rgb(255, 255, 255);
    /* a = White */
}

#colorPallete tr #colorPB {
    background-color: rgb(105, 105, 105);
    /* b = DimGray */
    color: white;
}

#colorPallete tr #colorPC {
    background-color: rgb(0, 0, 0);
    /* c = Black */
    color: white;
}

#colorPallete tr #colorPD {
    background-color: rgb(100, 149, 237);
    /* d = CornflowerBlue */
}

#colorPallete tr #colorPE {
    background-color: rgb(0, 0, 205);
    /* e = MediumBlue */
    color: white;
}

#colorPallete tr #colorPF {
    background-color: rgb(25, 25, 112);
    /* f = MidnightBlue */
    color: white;
}

#colorPallete tr #colorPG {
    background-color: rgb(0, 191, 255);
    /* g = DeepSkyBlue */
}

#colorPallete tr #colorPH {
    background-color: rgb(0, 255, 255);
    /* h = Cyan */
}

#colorPallete tr #colorPJ {
    background-color: rgb(143, 188, 143);
    /* j = DarkSeaGreen */
}

#colorPallete tr #colorPK {
    background-color: rgb(46, 139, 87);
    /* k = SeaGreen */
    color: white;
}

#colorPallete tr #colorPL {
    background-color: rgb(0, 255, 127);
    /* l = SpringGreen */
}

#colorPallete tr #colorPM {
    background-color: rgb(34, 139, 34);
    /* m = ForestGreen */
}

#colorPallete tr #colorPN {
    background-color: rgb(154, 205, 50);
    /* n = YellowGreen */
}

#colorPallete tr #colorPO {
    background-color: rgb(128, 128, 0);
    /* o = Olive */
    color: white;
}

#colorPallete tr #colorPP {
    background-color: rgb(240, 230, 140);
    /* p = Khaki */
}

#colorPallete tr #colorPQ {
    background-color: rgb(255, 255, 0);
    /* q = Yellow */
}

#colorPallete tr #colorPR {
    background-color: rgb(184, 134, 11);
    /* r = DarkGoldenrod */
}

#colorPallete tr #colorPS {
    background-color: rgb(139, 69, 19);
    /* s = SaddleBrown */
    color: white;
}

#colorPallete tr #colorPT {
    background-color: rgb(255, 140, 0);
    /* t = DarkOrange */
}

#colorPallete tr #colorPU {
    background-color: rgb(178, 34, 34);
    /* u = Firebrick */
}

#colorPallete tr #colorPV {
    background-color: rgb(255, 0, 0);
    /* v = Red */
}

#colorPallete tr #colorPW {
    background-color: rgb(255, 192, 203);
    /* w = Pink */
}

#colorPallete tr #colorPY {
    background-color: rgb(255, 20, 147);
    /* y = DeepPink */
}

#colorPallete tr #colorPZ {
    background-color: rgb(153, 50, 204);
    /* z = DarkOrchid */
}







/* 
CONFETTI */

.tag {
    font-size: 1.2rem;
    font-weight: bold;
    color: #000000;
    background: #ffffff;
    margin-top: 40px;
    padding: 10px 20px;
    transition: transform 0.2s, box-shadow 0.2s;
    user-select: none;
    transition: 1s;
}

.tag:hover {
    color: #ffffff;
    background: #000000;

}

@keyframes confetti {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translate(calc(-50px + 100px * var(--dir-x)), calc(-50px + 100px * var(--dir-y))) rotate(720deg);
        opacity: 0;
    }
}

.confetti {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--color, #ff4d4d);
    border-radius: 50%;
    animation: confetti 1s ease-out;
}