*{
    box-sizing:border-box;
}

body,html{
    background-color:#fff;
    color:#000;
    margin:0;
    overflow-x:hidden;
    overscroll-behavior:none;
    padding:0;
}

#app{
    height:100vh;
    padding:1.5em 1.5em 4em;
    width:100vw;
}

body,button,html,input,select,textarea{
    font-family:"Roboto Slab", "Roboto Flex", "Roboto",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif;
    line-height:1.5;
}

code,pre{
    font-family:"Roboto Mono", monospace;
}

.material-symbols-sharp{
    font-size:1em;
    font-variation-settings:'FILL' 0;
    vertical-align:middle;
}

button{
    cursor:pointer;
    font-weight:600;
    -webkit-appearance:none;
    align-items:center;
            appearance:none;
    background-color:transparent;
    border:2px solid #000;
    display:inline-flex;
    font-size:.9em;
    gap:.2em;
    padding:.45em 1.05em;
}

button .material-symbols-sharp{
    font-size:1.2em;  
}

button.primary{
    background-color:#000;
    color:#fff;
}

button.primary .material-symbols-sharp{
    font-variation-settings:'FILL' 1;
}

button.nostyle{
    background-color:transparent;
    border:none;
    padding:0;
}

input{
    border:2px solid #000;
    font-size:1em;
    outline:none;
    padding:.2em .4em;
}

::-webkit-input-placeholder{
    color:#666;
}

::placeholder{
    color:#666;
}

img,video{
    -webkit-filter:brightness(.9) contrast(1.7) grayscale(1);
            filter:brightness(.9) contrast(1.7) grayscale(1);
}

a{
    color:inherit;
    cursor:pointer;
}

a:not(.nostyle){
    color:#000;
    -webkit-text-decoration:underline;
    text-decoration:underline;
    text-decoration-thickness:2px;
}

a:not(.nostyle):visited{
    color:#444;
}

a.nostyle{
    -webkit-text-decoration:none;
    text-decoration:none;
}

p{
    margin:0;
}


.custom-emoji{
    height:1.2em;
    margin:-.2ex 0;
    object-fit:contain;
    vertical-align:middle;
    width:1.2em;
}

.notif-header>h1,.page>h1{
    margin-bottom:1rem;
    margin-top:.5rem;
}


::selection{
    background-color:#000;
    color:#fff;
}

.app-nav{
    background:#fff;
    border-top:1px solid #aaa;
    bottom:0;
    left:0;
    padding:0;
    position:fixed;
    right:0;
    z-index:1000;
}

.app-nav ul{
    display:flex;
    justify-content:space-around;
    list-style:none;
    margin:0;
    padding:0;
}

.app-nav li{
    align-items:center;
    border-top:3px solid transparent;

    display:flex;
    font-size:1.5em;
    height:100%;
    justify-content:center;
    padding:calc(.75em - 3px) .5em calc(.75em + 3px);
}

.app-nav li.active{
    border-top:3px solid #000;
}

.app-nav li.active .material-symbols-sharp{
    font-variation-settings:'FILL' 1;
}

.app-nav a{
    -webkit-text-decoration:none !important;
    text-decoration:none !important;
}

#post-fab{
    border:1px solid white;
    bottom:2.5em;
    font-size:2em;
    height:2em;
    padding:0;
    position:fixed;
    right:.5em;
    width:2em;
}

.app-nav li.compose-li{
   padding-bottom:0;
   padding-top:.25em;
}