html {
    font-size: 4vmin;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-shadow: 0.1em 0.1em 0.2em black;
    color: white;
    background: rgba(0, 0, 0, 0);
    height: fit-content;
}

body {
    height: fit-content;
}

h3 {
    margin: 0;
}

hr{
    width: auto;
    margin: 0.2em;
    opacity: 10%;
}

.font-small {
    font-size: 0.75em;
}

.font-medium {
    font-size: 1em;
}

.font-large {
    font-size: 1.5em;
}

.vertical-spacing {
    margin-left: 0.5em;
    margin-right: 0.5em;
}

.vertical-center {
    margin-top: auto;
    margin-bottom: auto;
}

.horizontal-spacing {
    margin-left: 0.5em;
    margin-right: 0.5em;
}

.horizontal-center {
    margin-left: auto;
    margin-right: auto;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.row {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
    align-items: baseline;
}

.wrap {
    overflow-wrap: anywhere;
}

.hidden {
    display: none;
    visibility: hidden;
}

.filled-box {
    background: #2E2D31;
    border: 0.15em solid white;
    box-sizing: border-box;
}


#container { 
    margin: auto;
    width: 95%;
}

#logo {
    height: 7em;
    width: max-content;
    filter: drop-shadow(0 0 3px white);
}

#ribbon-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.ribbon-grid-cell {
    filter: drop-shadow(0 0 3px white);
    padding: 5px;
}

.ribbon-image-small {
    width: 2em;
    min-width: 30px;
    height: 2em;
    min-height: 30px;
}

.ribbon-image-large {
    height: 100%;
    width: auto;
    aspect-ratio: 1/1;
    filter: drop-shadow(0 0 10px lightgray);
    animation: anim-pulse 1s ease-in-out infinite alternate;
}

@keyframes anim-pulse {
    from {
        filter: drop-shadow(0 0 10px lightgray);
    }
    to {
        filter: drop-shadow(0 0 5px lightgray);
    }
  }

.rounded {
    border-radius: 1em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
}

#ribbon-info-box {
    display: flex;
    padding: 0.75em;
}

#available-in {
    font-weight: bold;
}

#ribbon-info-box-top {
    height: 4em;
}

#ribbon-info-box-image-container {
    font-size: 2em;
    position: relative;
    aspect-ratio: 1 / 1;
    width: auto;
    text-align: center;
    align-content: center;
    border-radius: 100%;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    /* background: gray; */
    /* border: 2px solid #940C15; */
    /* padding: 2%; */
}

#progress-bar {
    width: 100%;
    height: 2em;
    position: relative;
    overflow: hidden;
}

#progress-bar-text {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

#progress-bar-fill {
    background-color: limegreen;
    height: 100%;
    /* filter: drop-shadow(0 0 10px limegreen); */
}

#title-conferred {
    font-style: italic;
}

.completed > img {
    opacity: 30%;
}

.completed::before{
    font-size: 2em;
    font-weight: bold;
    position: absolute;
    content: "\2713";
    color: limegreen;
    width: 100%;
    height: 100%;
    text-align: center;
    bottom: 0.25em;
    opacity: 100%;
    z-index: 2;
}

input {
    position: relative;
    appearance: none;
    background: white;
    width: 1em;
    height: 1em;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

input::after {
    font-weight: bold;
    position: relative;
    content: "\2713";
    color: black;
    opacity: 0;
    /* height: 100%; */
    font-size: 0.8rem;
    /* width: 100%; */
    display: block;
}

input:checked::after {
    opacity: 1;
}

.fire-red {
    color:#FF7327;
}
.leaf-green {
    color: #00DD00;
}
.ruby {
    color: #A00000;
}
.sapphire {
    color: #0000A0;
}
.emerald {
    color: #00A000;
}
.colosseum {
    color: #B6CAE4;
}
.xd {
    color: #604E82;
}
.diamond {
    color: #AAAAFF;
}
.pearl {
    color: #FFAAAA;
}
.platinum {
    color: #999999;
}
.heart-gold {
    color: #B69E00;
}
.soul-silver {
    color: #7D7D92;
}
.black {
    color: #444444;
}
.white {
    color: #E1E1E1;
}
.black-2 {
    color: #424B50;
}
.white-2 {
    color: #E3CED0;
}
.x {
    color: #025DA6;
}
.y {
    color: #EA1A3E;
}
.omega-ruby {
    color: #AB2813;
}
.alpha-sapphire {
    color: #26649C;
}
.sun {
    color: #F1912B;
}
.moon {
    color: #5599CA;
}
.ultra-sun {
    color: #E95B2B;
}
.ultra-moon {
    color: #226DB5;
}
.sword { 
    color: #00A1E9;
}
.shield {
    color: #BF004F;
}
.brilliant-diamond {
    color: #44BAE5;
}
.shining-pearl {
    color: #DA7D99;
}
.legends-arceus {
    color: #36597B;
}
.scarlet {
    color: #F34134;
}
.violet { 
    color: #8334B7;
}