/*
                 _|_
                 |
             .-'''''-.
          .-'         '-.
       .-'  :::::_:::::  '-.
   ___/ ==:...:::-:::...:== \___
  /_____________________________\
':'-._________________________.-' _
 ':::\ @-,`-[-][-^-][-]-`,-@ /  _| |_
  '::| .-------------------. | |_ @ _|
   ::|=|*   ___  _  ___   *|=|'.| |
   ':| |'   ))_) )) ))_)  '| |::.^|
    :|=|'  ((`\ (( ((     '|=|::::::.
     | |'        _        '| |:::::::.
     |=|'      _| |_      '|=|':::::.
     | |'  ( GHOSTVEIL ) '| | ':::'
     |=|*  )   |_|    (  *|=| '::'
     | '-------------------' .::::'
     |_____________________.::::::'
   .'___________________.::::::''
   |_______________.::::'':::'''
 .'_____________.::::::''::::''
            .:::'''' .'::::'
         .:::::''':.   .:::::'
WELCOME TO THE GRAVEYARD CODE for CSS!

Thank you for being interested in my website code.
I wanted something simple, but also combine a few
favorite features from some other templates. Lucky
for you I also love code commenting so if you want
to use this code, please feel free to do so and
follow along easily!

{ template bases/tools from:
- teppyslayouts.neocities.org 
and more I will add later }
*/


    	/* You can import your own google fonts just paste is here. You can have more than one font (this is 2) */
		@import url('https://fonts.googleapis.com/css2?family=Fondamento:ital@0;1&family=Jacquard+24&display=swap');

		body {
			margin: 0;
			padding: 0;
			/* Change the font family name to the name of the fonts from your import above just without the '+'s */
			font-family: Fondamento;
			font-size: 14px;
			background: #000;
			background-image: url(images/moonBG.jpg);
		}
		img {
			max-width: 100%;
		}
		
		/*/// Floating Images Section ///*/
		.candle-pos {
            position: absolute; /* Enables positioning the image */
            top: 750px; /* Adjusts the vertical position */
            right: -55px; /* Adjusts the horizontal position */
            width: 200px; /* Increased image width */
            height: auto; /* Maintain aspect ratio */
            margin: 0; /* Resets any default margin */
        }
        .hands-pos {
            position: absolute; /* Enables positioning the image */
            top: 200px; /* Adjusts the vertical position */
            right: 975px; /* Adjusts the horizontal position */
            width: 200px; /* Increased image width */
            height: auto; /* Maintain aspect ratio */
            margin: 0; /* Resets any default margin */
        }
        
        
        /*//////////////////////*/
        
        
		.outer {
			width: 1000px;
			margin: auto;
			position: relative;
		}

		.header {
			/* I have an image, but if you want a solid color, cuncomment this= background: #000; */
			width: 100%;
			height: 160px;
			border: 1px solid white;
			background-image: url(images/moon.gif);
			background-repeat: no-repeat;
			background-size: cover;
		}
		/* This is Main section, you can use an image or solid color */
		.section {
			background-image: url(images/1.png) ;
			border: 1px white;
			padding: 20px;
			min-height: 750px/*calc(100vh - 280px)*/;
		}
		.nav a {
			color: #FFF;
			text-decoration: none;
			text-transform: uppercase;
			letter-spacing: 1px;
			font-size: 11px;
			font-weight: bold;
		}
		.nav-item {
			display: inline-block;
			border: 1px solid #FFF;
			position: relative;
			padding: 12px 24px;
			bottom: -1px;
		}
		.nav-item-active {
			display: inline-block;
			border: 2px solid #256;
			position: relative;
			padding: 12px 24px;
		}
		
	
		
		/* This is the Center Contect Box settings */
		.content {
			width: 680px;
			float: left;
			height: 700px;
			background: #FFF;
			text-align: center;
		}
		
		
		.side {
			width: 250px;
			float: right;
		}
		
		.clear {
			clear: both;
		}
		/* side bar box settings*/
		.side-box {
			background: #EEE;
			padding: 12px;
			min-height: 200px;
		}
		textarea.code {
			background: #FFF;
			color: #000;
			font-family: monospace;
			padding: 12px;
			width: 100%;
		}
		.breadcrumbs {
			background: #EEE;
			display: inline-block;
			padding: 3px 6px;
			font-size: 12px;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			color: #666;
		}

		.breadcrumbs a {
			text-decoration: none;
			color: #666;
			font-weight: bold;
		}

		h1 {
			background: #000;
			color: #FFF;
			font-size: 14px;
			text-transform: uppercase;
			letter-spacing: 1px;
			padding: 3px 6px;
		}

		h2 {
			font-size: 1em;
			border-bottom: 1px dotted #FFF;
		}
		.border {
			border: 1px solid #FFF;
		}

		/* blinker or image size class */
		.thumbnail > div {
			height: 85px;
			width: 145px;
			border: 1px dashed #FFF;
			vertical-align: middle;
			background-size: 160%;
			background-position: top;
			float: left;
			margin-right: 14px;
		}

		.item {
			margin-bottom: 24px;
			min-height: 110px;
		}

		.item-small {
			margin-bottom: 24px;
		}
		h2 a {
			text-decoration: none;
			color: #FFF;
		}
		.post-info {
			font-style: italic;
			margin-bottom: 12px;
		}
		.nav-item.nav-top {
			border: none;
		}
		.site-title {
			color: #FFF;
			margin-top: 40px;
			margin-left: 70px;
		}
		.site-title a {
			color: #FFF;
			text-decoration: none;
			/* Title Font */
			font-family: 'Jacquard 24', cursive;
			font-size: 45px;
		}
		.update {
			display: inline;
			margin-right: 24px;
			color: #FFF;
		}
		.updates {
			font-size: 14px;
			margin-top: 6px;
			margin-bottom: 3px;
			margin-right: 295px;
			
		}
		/* Floating banner image position settings, may need to be changed depending on your image*/
		.float {
			position: absolute;
			width: 300px;
			right: 20px;
			top: -10px;
		}
		.post-content img {
			max-width: 90%;
		}
		.muted {
			opacity: 0.3;
		}