/* --- tooltips & scrollbars --- */

#s-m-t-tooltip {
    position:absolute;
    margin-top: 15px;
    z-index:9999;
    padding:3px 7px;
    background:#393939;
    color:#F6F6F6;
    font-size:14px;
    border:1px solid #666666;
    background-color:rgba(57,57,57,0.5);
    backdrop-filter:blur(3px);
    box-shadow:0px 0px 5px rgba(78, 78, 78, 0.1);
}

::-webkit-scrollbar-thumb {background-color:#75b1d6;}
::-webkit-scrollbar {background-color:transparent; width:1px; height:1px;}
::-webkit-scrollbar-track {margin:20px 0px;}

/* --- basics --- */

body {
    background-color:#282727;
    color:#F6F6F6;
    font-family: 'Work Sans', sans-serif;
    font-size:14px;
    line-height:1.5em;
    font-weight:400;
    text-align:justify;
    margin:0;
    background-image: linear-gradient(#666666 1px, transparent 1px), linear-gradient(90deg, #666666 1px, transparent 1px);
    background-size: 98px 50px;
    background-position:center center;
    background-attachment:fixed;
}

a {
color: #ccc;
text-decoration: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;

}
 
a:hover {
color: #cfcfcf;
}



b, strong, bold {
    font-weight:700;
}

u {
    text-decoration:none;
}

   



blockquote {
    padding:0px 5px 0px 15px;
    border-left:1px solid #666666;
    margin-left:5px;
    margin-right:0px;
}

   
ul {
    padding-left:15px;
}

    ul li {
        list-style-type:square;
    }
        
hr {
    border:none;
    border-bottom:1px solid #666666;
    width:calc(100% + 40px);
    margin:20px -20px 20px -20px;
}

svg.feather {
    width:18px;
    height:18px;
}

/* --- header styles --- */

h1 {
    margin-bottom:40px;
    background-color: #111;
        margin-left:0px;
        font-family:'Inconsolata', monospace;
        font-weight:400;
padding: 20px;
text-transform: lowercase;
border:0px solid #666666;
    box-shadow:0px 0px 15px rgba(78, 78, 78, 0.1);

    }

/* --- container --- */

.container {
    position:absolute;
    z-index:400;
    top:calc(50% - 301px);
    left:calc(50% - 551px);
    width:1100px;
    height:600px;
    background-color:#222222;
    border:1px solid #666666;
    box-shadow:0px 0px 5px rgba(78, 78, 78, 0.1);
    overflow:hidden;
}

.side {
    position:absolute;
    top:0px;
    right:0px;
    width:500px;
    height:600px;
    border-left:1px solid #666666;
}

    .side-title {
        position:absolute;
        z-index:42;
        top:0px;
        left:0px;
        width:500px;
        height:60px;
        box-sizing:border-box;
        padding:0px 80px 0px 20px;
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        border-bottom:1px solid #666666;
        font-size:1.5em;
        font-weight:600;
        font-family:'Inconsolata', monospace;
    }
    
        .side-title span {
            background-color:#222222;
            padding-right:4px;
        }

    .side-img {
        position:absolute;
        z-index:10;
        left:30px;
        bottom:30px;
        width:380px;
        height:480px;
        border:1px solid #666666;
        border-radius:50% 50% 0% 0% / 40% 40% 0% 0%;
        background-image:url('https://myth.nu/peggy/img/pc.jpg');
        background-size:cover;
        background-position:center center;
        box-shadow:inset 0px 0px 5px rgba(78, 78, 78, 0.1);
    }
    
    .side-nav {
        position:absolute;
        z-index:40;
        top:220px;
        right:-170px;  
        width:60px;
        height:200px;
        box-sizing:border-box;
        padding:75px 0px 20px 0px;
        border-left:1px solid #666666;
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        align-content:flex-start;
       background-color:rgba(57,57,57,0.5);
        backdrop-filter:blur(3px);
        box-shadow:0px 0px 5px rgba(78, 78, 78, 0.1);
        transform:scale(1,1);
        transition:all ease 0.8s;
    }



    
        .side-nav a {
      margin:20px 0px 20px 0px;
            cursor:pointer;
            display:flex;
	color: #fff; gap: 15px;
	font-weight:bold;
	text-transform: uppercase;
            align-items:center;
            justify-content:flex-start;
            transition:all ease 0.8s;
        font-family:'Inconsolata', monospace;
        }
        
            .side-nav a:hover svg {
                fill:#F6F6F6;
            }
        
            .side-nav:before {
                content:'';
                position:absolute;
                top:30.5px;
                right:30px;
                width:120px;
                height:1px;
                background-color:#666666;
            }
        
    .side-desc {
        position:absolute;
        z-index:50;
        bottom:50px;
        right:30px;
        width:260px;
        height:auto;
        max-height:300px;
        overflow:auto;
        box-sizing:border-box;
        padding:20px;
        border:1px solid #666666;
        background-color:rgba(57,57,57,0.5);
        backdrop-filter:blur(3px);
        box-shadow:0px 0px 5px rgba(78, 78, 78, 0.1);
        transform:scale(1,1);
        transition:all ease 0.8s;
    }
    
        .side-desc:hover {
            transform:scale(1.05,1.05);
        }

/* --- entries --- */

.entries {
    position:absolute;
    z-index:200;
    top:0px;
    left:0px;
    width:600px;
    height:600px;
    box-sizing:border-box;
    overflow:auto; 
    padding:0px 20px 20px 20px;

}




/* --- posts --- */

.post {
    position:relative;
    width:500px;
    padding: 20px;
    margin-top:40px;
    overflow:hidden;
    border:1px solid #666666;
    box-shadow:0px 0px 5px rgba(78, 78, 78, 0.1);
}

   
       

.entries a {
color: #fff;
text-decoration: wavy underline black; color: #ccc;
text-decoration: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
text-decoration: wavy underline black;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: none;
  text-underline-offset: 4px;
}


/* --- credit --- */

a.credit {
    position:fixed;
    right:10px;
    bottom:10px;
}

    a.credit svg {fill:#F6F6F6;}