main > p {
	margin-bottom: 1rem;
}

main > p a {
    color: var(--pink-font-color);
}

main > p span {
    color: #b8d9ef;
}

.tier-list {
    overflow: hidden;
    border-radius: 0.5rem;
}

.tier {
	display: grid;
	grid-template-columns: 35px 1fr;
	align-items: center;
	background-color: var(--ui-bg-color);
}

.tier + .tier {
	margin-top: 1px;
	border-radius: 0;
}

.rank {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--bg-color);
}

.s-plus-rank .rank { background-color: #ff5555; }
.s-rank .rank { background-color: #ff7673; }
.a-plus-rank .rank { background-color: #ff9073; }
.a-rank .rank { background-color: #ffa56b; }
.b-rank .rank { background-color: #ffdf77; }
.c-rank .rank { background-color: #bde772; }
.d-rank .rank { background-color: #79e57a; }
.f-rank .rank { background-color: #76efc0; }

.characters-list {
	display: grid;
	grid-gap: 0.675rem;
	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    margin: 0.675rem;
}

.character {
    overflow: hidden;
    border-radius: 0.25rem;
	background-color: #000;
    border: 2px solid #000;
	transition: box-shadow 90ms cubic-bezier(0.25, 0.45, 0.25, 0.95)
}

.character div {
    position: relative;
    width: 100%;
    padding-top: 90%;
    overflow: hidden;
}

.character img {
    position: absolute;
    top: 0;
    left: 0;
    width: 140%;
    height: auto;
    margin: -10% 0 0 -25%;
}

.character span {
    display: block;
    width: 100%;
    color: #ababb3;
    font-weight: 600;
    font-size: 10px;
    text-align: center;
    white-space: nowrap;
}

#bestClassCharacters {
    margin-top: 1.5rem;
}

#bestClassCharacters h3 {
    margin: 1.5rem 0 0.75rem;
}

#bestClassCharacters a, .page-description a {
    color: var(--pink-font-color);
}

.page-description ul {
	margin: 0.5rem 0 1rem 1.25rem;
}

#tierListFAQ h3 {
    margin-bottom: 0.5rem;
}

@media (min-width: 729px) {
	.tier {
		grid-template-columns: 70px 1fr;
	}

	.rank {
		font-size: 1.375rem;
	}

	.characters-list {
		display: grid;
		grid-gap: 0.75rem;
		grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        margin: 0.75rem;
	}
}