body {
    font-family: 'Corporative Alt Sans', 'IBM Plex Sans', sans-serif;
    font-weight: 500;
    background-color: rgb(55, 134, 171);
    color: rgba(255, 255, 255, 0.6);
    transition: all .6s;
}

h1 {
    font-family: 'Corporative', 'IBM Plex Sans', sans-serif;
    font-size: 2.75rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 1);
}

h2 {
    font-family: 'Corporative', 'IBM Plex Sans', sans-serif;
    font-weight: 900;
    color: rgba(255, 255, 255, 1);
}

p {
    font-size: 1.2rem;
}

ul {
    list-style-type: square;
}

li {
    margin-bottom: .5rem;
    line-height: 1.33;
}

a {
    text-decoration: none;
    color: rgba(255, 255, 255);
    border-bottom: 2px dotted rgba(255, 255, 255, 0.3);
}

.favs-box {
    border: 2px solid rgb(255, 255, 255, 0.2);
    border-radius: 12px;
}

.theme-bar button .small {
    font-size: 0.75rem;
}

button {
    background-color: rgba(0, 0, 0, 0);
    color: rgba(255, 255, 255, 0.6);
    border: 0;
    border-bottom: 3px solid rgba(0, 0, 0, 0);
    text-align: center;
}

button p.active {
    border-bottom: 3px solid rgba(200, 200, 200, 0.8);
}

@media screen and (min-width: 576px) {
    h1 {
        font-size: 3.5rem;
    }
    
    p {
        font-size: 1.27rem;
    }
    
    li {
        font-size: 1.1rem;
        margin-bottom: .5rem;
    }
    
    .theme-bar button .small {
        font-size: 0.8rem;
    }
}

/* ===== Dark mode ===== */

.dark-bg {
    background-color: rgba(0, 0, 0, 1);
}

.dark-bg h1,
.dark-bg h2,
.dark-bg button i,
.dark-bg button small,
.dark-bg #greeting-icon i,
.dark-bg a {
    color: rgb(150, 150, 150);
}

.dark-bg p,
.dark-bg li {
    color: rgb(120, 120, 120);
}

/* ===== Seasonal Themes ===== */

/* Winter */

.seasonal-bg.winter-theme {
    background-color: rgb(204, 240, 255);
}

.seasonal-bg.winter-theme h1,
.seasonal-bg.winter-theme h2,
.seasonal-bg.winter-theme button i,
.seasonal-bg.winter-theme #greeting-icon i,
.seasonal-bg.winter-theme a {
    color: rgb(112, 139, 219);
}

.seasonal-bg.winter-theme p,
.seasonal-bg.winter-theme li,
.seasonal-bg.winter-theme small,
.seasonal-bg.winter-theme button {
    color: rgb(46, 76, 130);
}

.seasonal-bg.winter-theme li::marker {
    color: rgb(157, 173, 223);    
    content: '\f2dc     ';
    font-family: FontAwesome;    
    font-weight: lighter;
}

.seasonal-bg.winter-theme a {
    border-bottom: 1px solid rgb(157, 173, 223)}

.seasonal-bg.winter-theme .favs-box {
    border: 1px solid rgb(157, 173, 223);
    border-radius: 0;
}

/* Christmas Theme */
.seasonal-bg.christmas-theme {
    background-color: rgb(255, 255, 240);
}

.seasonal-bg.christmas-theme h1,
.seasonal-bg.christmas-theme h2,
.seasonal-bg.christmas-theme button i,
.seasonal-bg.christmas-theme small,
.seasonal-bg.christmas-theme #greeting-icon i {
    color: darkred;
}

.seasonal-bg.christmas-theme p,
.seasonal-bg.christmas-theme li,
.seasonal-bg.christmas-theme a,
.seasonal-bg.christmas-theme button {
    color: green;
}

.seasonal-bg.christmas-theme a {
    border-bottom: 2px dashed darkred;
}

.seasonal-bg.christmas-theme li::marker {
    color: rgb(184, 5, 17);
    content: '\f06b     ';
    font-family: FontAwesome;
}

.seasonal-bg.christmas-theme .favs-box {
    border: 2px dotted darkred;
    border-radius: 12px;
}

.seasonal-bg.christmas-theme #greeting-icon .fa-hand {
    color: grey;
}

/* New Years Theme */
.seasonal-bg.ny-theme {
    background-color: rgb(24, 24, 24);
}

.seasonal-bg.ny-theme h1,
.seasonal-bg.ny-theme h2,
.seasonal-bg.ny-theme button i,
.seasonal-bg.ny-theme button small,
.seasonal-bg.ny-theme #greeting-icon i,
.seasonal-bg.ny-theme a {
    color: rgb(255, 216, 99);
}

.seasonal-bg.ny-theme li::marker {
    color: rgb(255, 216, 99);
    content: '\e4dc     ';
    font-family: FontAwesome;
    font-weight: lighter;
}

/* Valentines Theme */
.seasonal-bg.valentines-theme {
    background-color: pink;
}

.seasonal-bg.valentines-theme h1,
.seasonal-bg.valentines-theme h2,
.seasonal-bg.valentines-theme button i,
.seasonal-bg.valentines-theme small,
.seasonal-bg.valentines-theme #greeting-icon i {
    color: darkred;
}

.seasonal-bg.valentines-theme p,
.seasonal-bg.valentines-theme li,
.seasonal-bg.valentines-theme a,
.seasonal-bg.valentines-theme button {
    color: darkred;
}

.seasonal-bg.valentines-theme a {
    border-bottom: 2px dashed red;
}

.seasonal-bg.valentines-theme li::marker {
    color: red;
    content: '\f004     ';
    font-family: FontAwesome;
}

.seasonal-bg.valentines-theme .favs-box {
    border: 2px dotted red;
    border-radius: 12px;
}

.seasonal-bg.valentines-theme #greeting-icon .fa-hand {
    color: red;
}


/* Spring Theme */
.seasonal-bg.spring-theme {
    background-color: #e2ffdf;
}

.seasonal-bg.spring-theme h1,
.seasonal-bg.spring-theme h2,
.seasonal-bg.spring-theme button i,
.seasonal-bg.spring-theme small,
.seasonal-bg.spring-theme #greeting-icon i {
    color: #8975b8;
}

.seasonal-bg.spring-theme p,
.seasonal-bg.spring-theme li,
.seasonal-bg.spring-theme a,
.seasonal-bg.spring-theme button {
    color: #948f8c;
}

.seasonal-bg.spring-theme a {
    border-bottom: 2px dashed #d0adb1;
}

.seasonal-bg.spring-theme li::marker {
    color: #d0adb1;
    content: '\f4d8     ';
    font-family: FontAwesome;
}

.seasonal-bg.spring-theme .favs-box {
    border: 2px dotted #d0adb1;
    border-radius: 12px;
}

.seasonal-bg.spring-theme #greeting-icon .fa-hand {
    color: #d0adb1;
}

/* Summer Theme */
.seasonal-bg.summer-theme {
    background-color: #FBF5DE;
}

.seasonal-bg.summer-theme h1,
.seasonal-bg.summer-theme h2,
.seasonal-bg.summer-theme button i,
.seasonal-bg.summer-theme small,
.seasonal-bg.summer-theme #greeting-icon i {
    color: #DC3C22;
}

.seasonal-bg.summer-theme p,
.seasonal-bg.summer-theme li,
.seasonal-bg.summer-theme a,
.seasonal-bg.summer-theme button {
    color: #3D74B6;
}

.seasonal-bg.summer-theme a {
    border-bottom: 2px dotted #DDA853;
}

.seasonal-bg.summer-theme li::marker {
    color: #DDA853;
    content: '\f185     ';
    font-family: FontAwesome;
    font: var(--fa-font-solid);
}

.seasonal-bg.summer-theme .favs-box {
    border: 1px solid #DDA853;
    border-radius: 12px;
}

.seasonal-bg.summer-theme #greeting-icon .fa-hand {
    color: #DDA853;
}

/* Autumn Theme */
.seasonal-bg.autumn-theme {
    background-color: #9A4444;
}

.seasonal-bg.autumn-theme h1,
.seasonal-bg.autumn-theme h2,
.seasonal-bg.autumn-theme button i,
.seasonal-bg.autumn-theme small,
.seasonal-bg.autumn-theme #greeting-icon i {
    color: #D6D46D;
}

.seasonal-bg.autumn-theme p,
.seasonal-bg.autumn-theme li,
.seasonal-bg.autumn-theme a,
.seasonal-bg.autumn-theme button {
    color: #F4DFB6;
}

.seasonal-bg.autumn-theme a {
    border-bottom: 2px dotted #DE8F5F;
}

.seasonal-bg.autumn-theme li::marker {
    color: #DE8F5F;
    content: '\f06c     ';
    font-family: FontAwesome;
    font: var(--fa-font-solid);
}

.seasonal-bg.autumn-theme .favs-box {
    border: 2px solid #DE8F5F;
    border-radius: 12px;
}

.seasonal-bg.autumn-theme #greeting-icon .fa-hand {
    color: #DE8F5F;
}