wynnbuilder-forked-for-changes/styles.css

.header {
    padding: 2% 0% 0%;
    text-align: center;  
}

.all {
    font-family: 'Nunito',sans-serif;
    font-weight: 700;
}

th, td {
    padding-right: 10px;
}

.nomargin {
    padding: 0px;
}

div {
    padding: 0%;
}

.equipment{
    padding: 0%;
    display: grid;
    grid-template-columns: min-content min-content min-content;
    gap: 5px;
    grid-template-rows: min-content min-content auto;
}

.skillpoints {
    padding: 0% 4% 2%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    grid-auto-rows: minmax(60px, auto);
}

.powder-specials{
    padding: 0% 4% 2%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    grid-auto-rows: minmax(60px, auto);
}

.equipment, .skillpoints, .center, .header, .all, .nocolor{
    background: #121516;
    color: #aaa;
}
.hppeng{
    color: #20c2b6;
}
.ferricles{
    color: #5be553;
}
a.link{
    color: #A5FDFF;
}
.title{
    text-align: center;
    font-size: 150%;
}
.smalltitle{
    text-align: center;
    font-size: 125%;
}
.center {
    text-align: center;
}

.right {
    text-align: right;
}

.left {
    margin: 2px 2%;
    text-align: left;
}

.build-helmet, .build-chestplate, .build-leggings, .build-boots, .build-ring1, .build-ring2, .build-bracelet, .build-necklace, .build-weapon, .build-order, .build-overall, .build-melee-stats, .build-defense-stats, .spell-info, .set-info, .powder-special, .powder-special-stats {
    color: #aaa;
    background: #121516;
    border: 3px solid #BCBCBC;
    border-radius: 3px;
    width: 96%;
}

.spell-info {
    margin-bottom: 10px;
}

.itemcenter {
    text-align: center;
    margin-bottom: 16px;
}

.itemleft {
    text-align: left;
    margin-bottom: 16px;
}

.itemtable {
    margin: 2px 2%;
    width: 94%;
    margin-bottom: 16px;
}

.itemp, .damagep {
    margin: 2px 2%;
    padding: 0;
}
.space {
    margin-right: 5px;
}

.damageSubtitle {
    text-align: center;
    margin: 12px 2% 4px;
    /*margin-bottom: 16px;*/
    /*margin-top: 16px;*/
}


.positive {
    color: #5f5;
    /*text-shadow: 2px 2px 0 #153f15;*/
}

.negative {
    color: #f55;
    /*text-shadow: 2px 2px 0 #1f1515;*/
}

.Earth { color: #0a0; }
.Earth:before { content: "\2724" ' '; }
.Earth_powder { color: #0a0; }
.Earth_powder:before { content: "\2724"; }

.Thunder { color: #ff5; }
.Thunder:before { content: "\2726" ' '; }
.Thunder_powder { color: #ff5; }
.Thunder_powder:before { content: "\2726"; }

.Water { color: #5ff; }
.Water:before { content: "\2749" ' '; }
.Water_powder { color: #5ff; }
.Water_powder:before { content: "\2749"; }

.Fire { color: #f55; }
.Fire:before { content: "\2739" ' '; }
.Fire_powder { color: #f55; }
.Fire_powder:before { content: "\2739"; }

.Air { color: #fff; }
.Air:before { content: "\274b" ' '; }
.Air_powder { color: #fff; }
.Air_powder:before { content: "\274b"; }

.Neutral { color: #fa0; }
.Neutral:before { content: "\2724" ' '; }
.Damage { color: rgb(255, 198, 85)}

.Health {
    color: #a00;
    /*text-shadow: 2px 2px 0 #2a0000;*/
}
.Health:before {
    content: "\2764" ' ';
}

.skpInput, .skplabel {
    display: block;
    margin: auto;
}

/*Scrollbar*/
/* width */
::-webkit-scrollbar {
    width: 10px;
  }
  
/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #BCBCBC;
    border: #BCBCBC;
    border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #aaa;
    border-radius: 10px;
}

/* Ugly Corner */
::-webkit-scrollbar-corner{
    background: #110110;
}
.button-narrow {
    background-color: #666; 
    border: 2px solid #444;
    border-radius: 5px;
    color: #ddd;
    text-align: center;
    text-decoration: none;
    font-family: 'Nunito',sans-serif;
    font-weight: 700;
    font-size: 90%;
    display: inline-block;
}
button {
    background-color: #666; 
    border: 2px solid #444;
    border-radius: 5px;
    color: #ddd;
    text-align: center;
    text-decoration: none;
    font-family: 'Nunito',sans-serif;
    font-weight: 700;
    font-size: 120%;
    display: inline-block;
}
button:hover {
    background-color: #556;
}


button:active {
  background-color: #558;
  box-shadow: 0 3px #666;
  transform: translateY(1px);
}
input {
    background-color: #666; 
    border: 2px solid #444;
    border-radius: 5px;
    color: #ddd;
    text-align: center;
    text-decoration: none;
    font-family: 'Nunito',sans-serif;
    font-weight: 700;
    display: inline-block;
}
::placeholder{
    color: #aaa;
}
/* Tier colors tier colors */
.Normal{
    color: #fff;
}
.Unique{
    color:#ff5;
}
.Rare{
    color:#f5f;
}
.Legendary{
    color:#5ff;
}
.Fabled{
    color:#f55;
}
.Mythic{
    color:#a0a;
}
.Set{
    color:#5f5;
}
.restrict, .warning {
    color: #ff8180;
}

button.toggleOn{
    background-color:#0a0;
    border: 3 px solid rgb(0, 70, 0); 
}

.funnynumber {
    background-image: linear-gradient(to left, #f5f, #a0a, #5ff, #5f5, #ff5, #fa0, #a00);   -webkit-background-clip: text;
    color: transparent;
    display: inline-block;
    text-align: center;
    transform: translateX(calc(50vw - 50%));
}