neocity by ace

/* ==UserStyle==
@name           neocity
@namespace      aorivoid.net
@version        1.0.0
@description    Inspired by what you would expect to see in a neocities website.
@author         aorivoid
==/UserStyle== */

@-moz-document domain("aorivoid.net") {
    @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Slab:wght@100..900&display=swap');
    
    :root {
        --primary-color: #e8f7d9;
        --secondary-color: #f8fef4;
        --font-color: #a9c3ab;
        --link-color: #bdb89d;
        
        /* Scrollbar */
        --sb-track-color: #f8fef4;
        --sb-thumb-color: #a9c3ab;
        --sb-size: 3px;
    }
    body {
        background: url(/images/aowori.png);
        width: 790px;
        margin: auto;
        color: var(--font-color);
        font-family: 'Roboto Slab';
        background-attachment: fixed;
        font-size: 10pt;
    }
    body::-webkit-scrollbar {
      width: var(--sb-size);
    }

    body::-webkit-scrollbar-track {
      background: var(--sb-track-color);
      border-radius: 4px;
    }

    body::-webkit-scrollbar-thumb {
      background: var(--sb-thumb-color);
      border-radius: 4px;
    }

    @supports not selector(::-webkit-scrollbar) {
      body {
          scrollbar-color: var(--sb-thumb-color)
                         var(--sb-track-color);
      }
    }
    a, a:hover, a:focus {
        color: var(--link-color);
    }
    
    /* all nav */
    #nav {
        background: white;
        height: auto;
        position: fixed;
        float: left;
        margin-top: 30px;
        border: 3px double var(--primary-color);
        outline: 1px solid var(--secondary-color);
        border-radius: 15px;
        width: 120px;
        padding-top:10px;
        
    }
    #nav img {
        content: url('/images/nav_t3.jpg');
        width: 100%;
        height: auto;
        display: block;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }
    #nav h1 {
        display: none;
    }
    #nav ul {
        padding: 0; 
        margin: 0;
    }
    #nav ul:before {
        content:"navigation";
        display: block;
        width: 100%;
        text-align: left;
        font-weight: bold;
        padding: 0.3em;
        border-top: 1px dotted var(--primary-color);
        margin-top: 0px;
    }
    #nav ul li {
        display: block;
        text-align: left;
        border: 1px solid var(--primary-color);
        margin: 0.3em;
        padding: 0.15em;
        background: linear-gradient(110deg, white 63%, var(--primary-color) 100%);
    }
    #nav ul li:before {
        content:"♡ ";
        padding: 0 0.25em;
    }
    #nav ul li:hover {
        text-decoration: none;
    }
    #nav ul li a:hover {
        font-weight: bold;
        text-decoration: none;
    }
    #nav ul li:last-child {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        margin-bottom: 5px;
    }

    /* all things content */
    #content {
        background: white;
        position: initial;
        float: right;
        border: 3px double var(--primary-color);
        outline: 1px solid var(--secondary-color);
        border-radius: 15px;
        margin-top: 30px;
        width: 620px;
        padding-top: 0;
        margin-bottom: 30px;
    }
    #content img[src="/images/nav.jpg"] {
        display: none;
    }
    #content .entry_header {
        display: block;
        margin: 0 -9px -10px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        padding: 2px 0 1px 10px ;
        background: url('/images/grid.png');
        background: linear-gradient(0deg, #00000000 40%, var(--primary-color) 100%);
    }
    #content .entry_header h1 {
        margin-top: 20px;
        border: none;
        text-align: center;
        width: 100%;
        letter-spacing: 2.5px;
        text-shadow: 0 0 10px #FFFFFF;
       
    }
    #content .entry_header h2 {
        display: block;
        margin: -5px 0 15px 0;
        text-align: center;
    }
    
    #content .entry_header h2::before {
        content:"by aorivoid, at ";
    }
    #content .entry_content h1 {
        padding: 5px 20px;
        margin: 30px 10px 10px -10px;
        background: linear-gradient(270deg, #00000000 0%, var(--primary-color) 110%);
    }
    #content .entry_content {
        line-height: 22px;
        padding-left: 1px;
    }
    #content a {
        color: var(--link-color);
    }
    #content::after {
        background: linear-gradient(180deg, white 70%, var(--primary-color) 100%);
        min-height: 0px;
        min-height: 30px;
        padding: 0;
        margin: 0 -10px;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }
    
    /* guestbook */
    form[action="submit.php"] {
        display: block;
        width: 459px;
        margin: 1rem auto;
    }
    #post input[type="text"], #post input[type="url"], #post textarea {
        background-color:#fff;
        border: 1px solid var(--primary-color);
        padding: 4px 15px 4px 5px;
        font-family: 'Roboto Slab';
        color: var(--font-color);
        transition: 0.3s ease;
    }
    #post input[type="text"]:focus, #post input[type="url"]:focus, #post textarea:focus {
        background-color:var(--secondary-color);
        border: 1px solid var(--primary-color);
        outline: none;
        transition: 0.3s ease;
    }
    #post input[type="submit"] {
        border: 1px solid var(--primary-color);
        border-radius: 4px;
        font-family: 'Roboto Slab';
        background-color: var(--secondary-color);
        color: var(--font-color);
        padding: 2px 10px 3px 10px;
        transition: 0.3s ease;
    }
    #post input[type="submit"]:hover {
        background-color: white;
        transition: 0.3s ease;
    }
    #post td[name="name"], #post td[name="website"], #post td[name="comment"], #post td[name="check"] {
        background-color: var(--primary-color);
    }
    .message {
        border:1px solid var(--primary-color);
        border-bottom: 1px solid var(--primary-color);
        border-right: 1px solid var(--primary-color);
        background-color: var(--secondary-color);
    }
    .msgInfo {
        padding-left: 4px;
    }
    .msgAuthor {
        color: var(--link-color);
    }
    .msgContent {
        padding-left: 23px;
    }
    
    /* guides */
    .entry_content pre.code {
        border-radius: 5px;
        border: 1px dashed var(--primary-color);
        background-color: var(--secondary-color);
        font-family: 'Roboto Mono', monospace;
        padding: 5px 12px;
    }
    
    /* blog */
    .entry_content figure blockquote, .entry_content blockquote {
        border-left: 3px solid var(--primary-color);
        padding: 3px 20px;
        font-style: italic;
    }
    
}