@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css?family=Fragment+Mono&display=swap');

/* ---- MAIN ---- */

body {
    margin: 2rem;
    background-color: #E0F9C0;
    font-family: "Raleway";
    color: #2f2f2f;
}

.title {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.title img {
    max-height: 12rem;
}

/* ---- CARD ---- */
.version-cards {
    margin: 0 auto;
    max-width: 70rem;
    width: 90%;
}

.version-card {
    background-color: #F7F7F7;
    padding: 1rem 2rem;
    margin-block: 2rem;
    border: 4px solid #00000005;
    position: relative;
}

.date {
    color: #00000052;
    font-size: 1.2rem;
    margin-left: 0.5rem;
}

.title-container {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #e1e1e1;
    padding-inline: 0.5rem;
}

h1 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-block: 0;
}

.title-container span {
    height: fit-content;
    margin-top: 1.6rem;
    color: #00000087;
}

/* content */
.info {
    margin: 1rem;
    margin-top: 2rem;
}

h2 {
    margin: 0;
    padding: 0.5rem 1rem;
    width: fit-content;
    color: #000000b3;
}

h2 span {
    vertical-align: -3px;
    margin-right: 0.1rem;
}

ul {
    margin: 0;
    list-style: none;
}

ul li::before {
    content: "\25A0";
    display: inline-block;
    width: 1.2em;
    margin-left: -1.3em;
}

li {
    margin-block: 0.7rem;
    font-size: 1.1rem;
    line-height: 1.6rem;
}

li b,
li i,
li span {
    font-size: 1.2rem;
}

li span {
    font-family: "Fragment Mono";
    background-color: #ececec;
    padding: 0.2rem 0.5rem;
}

.info li a {
    color: #0047d6;
}

.info li a:hover {
    color: #043494;
}

/* info types */

:root {
    --new: #b6e1dc;
    --new-span: #b6e1dc38;
    --change: #ead9a6;
    --change-span: #ead9a638;
    --remove: #e69986;
    --remove-span: #e6998638;
    --fix: #d5d5d5;
    --fix-span: #d5d5d538;
    --improve: #caf5cd;
    --improve-span: #caf5cd38;
}

.new>h2 {
    background-color: var(--new);
}

.new ul li::before {
    color: var(--new);
}

.new li span {
    background-color: var(--new-span);
}

.change>h2 {
    background-color: var(--change);
}

.change ul li::before {
    color: var(--change);
}

.change li span {
    background-color: var(--change-span);
}

.remove>h2 {
    background-color: var(--remove);
}

.remove ul li::before {
    color: var(--remove);
}

.remove li span {
    background-color: var(--remove-span);
}

.fix>h2 {
    background-color: var(--fix);
}

.fix ul li::before {
    color: var(--fix);
}

.fix li span {
    background-color: var(--fix-span);
}

.improve>h2 {
    background-color: var(--improve);
}

.improve ul li::before {
    color: var(--improve);
}

.improve li span {
    background-color: var(--improve-span);
}