Template:Emblem/style.css

.emblemtable {
    width: 100%;
    min-width: 380px;
    max-width: 780px;
}

.emblemtable .emblem {
    margin: 3em auto 2em;
}

.emblemtable .summary img {
    max-width: 100%;
    max-height: 240px;
    object-fit: contain;
}

.item-name-main {
    display: block; text-align: center; font-size: 22px; font-weight: bold;
}

.item-name-sub {
    display: block; text-align: center; font-size: 16px; font-weight: bold; color: #555555;
}

.item-description {
    display: block;
    width: 100%;
    clear: both;
    text-align: center;
}

.emblemtable .rarity {
    text-align: center;
}

.emblemtable .data-row {
    text-align: center;
}

.emblemtable .data-row > td,
.emblemtable .data-row > th {
    width: calc(100% / 4);
}



/* Emblem */
div.emblem {
    position: relative;
    width: 100%;
    max-width: 558px;
    aspect-ratio: 558/106;
    /* container-type: inline-size; does not pass MediaWiki css sanitation, moved inline */
}

div.emblem > div {
    width: 100%;
    box-sizing: border-box;
    position: absolute;
}

div.emblem .name,
div.emblem .text {
    position: absolute;
    padding-left: 28%;
    padding-right: 4%;
    top:4%;
    bottom: 13%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    line-height: 1;
    text-align: center;
    color: #4f6881;
    text-shadow: 0 0 3px #fff;
    font-size: 32px;
    /* font-size: 5.8cqw; does not pass MediaWiki css sanitation, moved inline */
    font-weight: bold;
    text-shadow: 2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, -2px 2px 0 #fff;
}

div.emblem.emblem-favor .name {
    top:11%;
    bottom: 50%;
    text-transform: uppercase;
}

div.emblem .text {
    align-items: end;
    font-size: 30px;
    color: #4e1f87;
}
div.emblem .text > span {
    font-size: 36px;
    color: #a238df;
}

div.emblem .emblem-icon,
div.emblem .emblem-iconbg {
    position: absolute;
    height: 100%;
    width: auto;
    padding-top: 0.55%;
    padding-left: 0.7%;
    padding-bottom: 1.9%;
}

div.emblem .emblem-icon img,
div.emblem .emblem-iconbg img {
    height: 100%;
    width: auto;
}

div.emblem .emblem-bg img {
    width: 100%;
    height: auto;
}

div.emblem .year {
    position: absolute;
    bottom: 14%;
    left: 2%;
    width: auto!important;

    background-color: #ffffff;
    color: #4e1f87;
    font-style: italic;

    border-radius: 7px;
    padding: 0 6px 0 4px;
    font-weight: bold;
    line-height: 1.3;
}



div.emblem .emblem-bg {
    z-index: 1;
}

div.emblem .emblem-iconbg {
    z-index: 2;
}

div.emblem .emblem-icon,
div.emblem .icon {
    z-index: 3;
}

div.emblem .name,
div.emblem .text,
div.emblem .year {
    z-index: 4;
}


div.emblem.emblem-boss .emblem-icon{
    left: 5%;
}