:root{
	--offblack:#0d0d0d;
	--offwhite:#ccc;
	--darkgrey:#222;
	--lightgrey:#999;
	--lightgrey2:#888;
	--darkgrey2:#444;
	--black:#000;
	--offwhite2:#eee;
	--red:#8b0000;
	--white:#fff;
	--red2:#ff3333;
	--red3:#DA1632;
	--offblack2:#1a1a1a;
	/*--mainbgimg:url(https://64.media.tumblr.com/40df69e452859877c3b2b3212732aaa7/271d65e1b722841d-8d/s75x75_c1/04f1c8df991327e198e59c87b9b64cf091963b08.gifv);*/
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Basics */
body {
    font-family: calibri, Arial, sans-serif;
    background: var(--offblack); 
    color: var(--offwhite);
    font-size:13px;
    display: flex;
    min-height: 100vh;
    letter-spacing:1px;
}
  
textarea {
    background:var(--darkgrey);
    color:var(--lightgrey);
    letter-spacing:1px;
    font-size:10px;
}
    
/* Links */
a:link,a:visited,a:active {
    color: var(--lightgrey2);
    text-decoration: none;
}
a:hover {
    color:var(--darkgrey2);
}
  
/* Scrollbar */
::-webkit-scrollbar-thumb {
    background-color: var(--black); 
    border:1px solid var(--offwhite2);
    border-radius: 3px;
}

::-webkit-scrollbar { 
    width: 7px; 
    height: 0px; 
    background: transparent;
}
    

/* Sidebar */
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 200px;
    background: var(--red);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.sidebar h2 {
    font-family: 'Nosifer', cursive;
    font-size: 16px;
    color: var(--white);
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px var(--black);
}

.sidebar a {
    color: var(--white);
    text-decoration: none;
    margin: 10px 0;
    transition: color 0.3s;
}

.sidebar a:hover {
    color: var(--red2);
}
    
.blinkie {
    margin-bottom:5px;
}

/* Main Content */
.content {
    flex: 1;
    padding: 50px 20px 20px 50px; 
    background: var(--mainbgimg) repeat-x;
}

.site-name {
    font-family: 'Nosifer', cursive;
    font-size: 22px;
    color: var(--red3);
    margin-bottom: 10px;
    text-shadow: 3px 3px 6px var(--black);
    text-align:center;
}
    
.slogan {
    text-align:center;
    font-style:italic;
    color:var(--lightgrey);
}

.post {
    background: var(--offblack2);
    border: 2px solid var(--red);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 0 10px var(--red);
    max-width: 500px;
    width: 100%;
}

.post h3 {
    font-family: 'Creepster', cursive;
    margin-bottom: 10px;
    color: var(--red3);
    letter-spacing:4px;
}



/* This makes layout responsive ! */
@media (max-width: 768px) {
    body {
        flex-direction: column;
    }

    .sidebar {
        position: relative;
        height: auto;
        width: 100%;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
        

    .sidebar h2 {
        width: 100%;
        text-align: center;
        margin-bottom:5px;
    }

    .content {
        padding: 15px;
        padding-top:50px;
    }

    .site-name {
        font-size: 22px;
        text-align: center;
    }
}