/* main.css */

body {
    position: relative;
}

/* navbar fixed-top scroll offset */

*[id]:before {
    display: block;
    content: " ";
    margin-top: -75px;
    height: 75px;
    visibility: hidden;
}

/* Light mode */
@media (prefers-color-scheme: light) {

    nav,
    body {
        background-color: #fcf3da;
        color: black;
    }
    .navbar {
        background-color:#fff !important;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {

    nav,
    body {
        background-color: black;
        color: white;
    }
    .navbar {
        background-color: #343a40!important;
        color: #dedede;
    }

}

.navbar-light .navbar-brand {
    color: rgba(0, 0, 0, .9);
    font-weight: 700;
}

.main {
    padding-top: 75px;
}

div#learn-more {
    margin-left: 15px;
    margin-right: 15px;
}


/*Navbar */

.navbar-emoji-picker {
    display: inline-block;
    padding: 0;
}

.navbar-emoji-picker li {
    display: inline-block;
    padding-left: 0rem !important;
    padding-right: 0rem !important;
}


.nav-link {
    display: inline-block !important;
    padding: 0.3rem 0.20rem !important;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.5;
}

.nav-link.active,
.nav-link.search-link {
    filter: none;
    -webkit-filter: none;
    opacity: 1;
}

.alert-dismissible .close {
    padding: 0.5rem 1.25rem;
}

.emoji-list li .btn {
    padding: 0;
}

.nav-search-link {
    margin-left: 0.4rem;
}

.search-clear {
    color: #666;
}

.navbar-toggler {
    border: hidden;
    padding: 0;
}

.navbar-search {
    display: block;
    padding: 0.2rem 1rem;
}

.h1, h1 {
    font-size: 3rem;
    text-align: center;
}

h1.mobile-brand {
    font-size: 1.5rem;
    padding-bottom: 10px;
}

hr.cat-divider {
    margin: 2rem auto;
}

h2 {
    text-transform: uppercase;
    font-size: 1.1rem;
    letter-spacing: 0.2rem;
    color: #666;
    text-align: center;
    margin: 2rem auto;
}

ul.emoji-list {
    text-align: center;
    padding: 0;
}

ul.emoji-list li {
    list-style-type: none;
    display: inline-block;
    line-height: 100px;
    vertical-align: top;
    min-width:6rem;
}

.emoji-symbol {
    font-size: 3rem;
}

.emoji-description {
    line-height: 0.70rem;
    font-size: 0.76rem;
}

.emoji-tags {
    display: none;
}

.oi.oi-magnifying-glass {
    top: 4px;
}

.footer {
    margin-bottom: 60px;
}