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: 20px;
}

.nomargin {
    padding: 0px;
}

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

div {
    padding: 0%;
}

.equipment {
    padding: 0%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    grid-template-rows: min-content auto;
}

.skillpoints {
    padding: 0% 4% 2%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    grid-auto-rows: minmax(60px, auto);
}
.equipment, .skillpoints, .center, .header, .all{
    background: #121516;
    color: #aaa;
}
.hppeng{
    color: #20c2b6;
}
.ferricles{
    color: #5be553;
}
a.link{
    color: #A5FDFF;
}
.title{
    text-align: center;
    font-size: 150%;
}
.center {
    text-align: center;
}

.right {
    text-align: right;
}

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

.build, .spells, .misc {
    padding: 2%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    grid-auto-rows: minmax(60px, auto);
    width: 94%;
    background: #121516;
}

.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 {
    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;
}

.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;
    /*text-shadow: 2px 2px 0 #002a00;*/
}
.Earth:before {
    content: "\2724" ' ';
}

.Thunder {
    color: #ff5;
    /*text-shadow: 2px 2px 0 #3f3f15;*/
}
.Thunder:before {
    content: "\2726" ' ';
}

.Water {
    color: #5ff;
    /*text-shadow: 2px 2px 0 #153f3f;*/
}
.Water:before {
    content: "\2749" ' ';
}

.Fire {
    color: #f55;
    /*text-shadow: 2px 2px 0 #1f1515;*/
}
.Fire:before {
    content: "\2739" ' ';
}

.Air {
    color: #fff;
    /*text-shadow: 2px 2px 0 #3f3f3f;*/
}
.Air:before {
    content: "\274b" ' ';
}

.Neutral {
    color: #fa0;
    /*text-shadow: 2px 2px 0 #2a2a00;*/
}
.Neutral:before {
    content: "\2724" ' ';
}

.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 {
    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;
}
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{
    color: #ff006a;
}