@font-face {
        font-family: pixel;
        src: url(https://dl.dropbox.com/s/kmhe7d3n18vdz5e/w95fa.woff?dl=0);
      }

      @font-face {
        font-family: "Silkscreen";
        src: url("Silkscreen-Regular.woff2") format("woff2");
      }
      
      /* MAIN BODY */
      body {
        <!--background-image: radial-gradient(circle at center, #000000aa 1px, transparent 0);  /* dots in the background */--!>
		background-image: url("images/BGalt.gif");
        background-size: 100%;  /* controls distance of dots */
        display: flex; 
        justify-content: center;  
        margin-top: 5%; 
        position: relative;
        font-family: 'Silkscreen', 'Arial', monospace;
        font-size: 14px;
        overflow: hidden;
      }

      /* SCROLLBAR */
      .container::-webkit-scrollbar {
        width: 10px;
      }

      .container::-webkit-scrollbar-track {
        background: #1e3c72;
		
      }

      .container::-webkit-scrollbar-thumb {
        background: #eeeeee;
        border-left: 1px white;
      }

      .container::-webkit-scrollbar-thumb:hover {
        background: white;
      }
      
      /* CURSOR */
      * {  cursor: url('https://cdn.cursors-4u.net/previews/wobbuffet-pokemon-3495bd0f-32.webp') 32 32, auto !important;
      }

      /* IMAGES */
      img {
       <!-- filter: grayscale(100%);  /* gives a greyscale to ALL images on the site. you can delete this and add it to specific elements too. */-->
	   
      }

      img:hover {
        filter: none; /* delete this if you want to preserve the greyscale when hovering over images. */
      }
      
      /* LINK BASE */
      a {
        color: inherit;
        text-decoration: none;
      }
      
      /* BOLD */
      b {
        font-weight: bold;
        color: #000000;
      }

      /* ITALIC */
      i {
        font-style: cursive;
        color: #000000;
      }

      /* SELECTED TEXT */
      ::selection {
        background-color: #90c9e9;
        color: white;
      }

      /* HIGHLIGHTED TEXT */
      .highlight {
        color: white;
        background-color: #1e3c72;
        padding: 1px 3px;
      }
      
      /* CRT EFFECT */
      body::before {
        content: " ";
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: linear-gradient(rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.25) 180%);
        z-index: 9000000;
        background-size:
          100% 4px,
          6px 100%;
        pointer-events: none;
      }

      /* TABLE */
      table {
        border-collapse: collapse;   /* removes double line in the calendar script. you can delete this if you want. */
      }
      
      /* MAIN WRAPPER FOR EVERYTHING */
      .mainwrapper {
        width: 80%;
        margin-top: 60px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; 
        align-items: stretch;   
        height: 30vh;    
      }
      
      /* WRAPPER FOR A (HORIZONTAL) ROW */
      .rowwrapper {
        display: flex;
        flex-direction: row; 
        align-items: flex-start;
        flex: 1;
      }

      /* GROUPING FOR COLUMNS. Makes it possible to add containers now vertically */
      .column-group {
        display: flex;
        flex-direction: column;   /* stacks children vertically */
        width: 25%;      /* control width of containers inside columns */  
        flex-shrink: 0;       
      }

      .column-group .container {
        width: auto !important; 
        margin: 5px; 
      }

      /* WRAPPER FOR "button" */
      .buttonwrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 3px;
        align-items: center;
      }

      .buttonwrapper a {
        display: inline-flex;
        white-space: nowrap;
      }

      .buttonwrapper img {
        margin-right: 3px;   /* this in case you want to add a cute pixel before your text for "button" */
      }
      
      /* BASIC CONTAINER */
      .container {
        box-sizing: border-box;
        background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
        padding-bottom: 5px;
        margin: 5px;
        overflow: scroll;
        overflow-x: hidden;
        overflow-y: auto;
        flex-shrink: 0;
		border : 3px solid #1e3c72;
		border-radius : 10px;
      }

      .container table { 
        width: 100%;  /* makes the calendar take up the entirety of a container's width. mainly for the calendar, you can delete this too if you wish. */
      }

      /* JUSTIFY FOR PARAGRAPHS */
      .container p {
        text-align: justify;
        text-justify: inter-word;
      }

      /* SPLIT CONTAINER */
      .container-split {
        display: flex;      
      }

      .split-left, .split-right {
        padding: 5px;       
        flex: 1;       
      }

      .split-right {
        border-left: 1px solid black; 
      }
      
      /* MAKES A CONTAINER FILL REMAINING SPACE TO THE RIGHT */
      .fill-remaining {
        flex: 1; /* takes the space remaining */
        min-width: 0; /* prevents that the content pushes the box oustide of the available space */
      }

      /* TITLES FOR CONTAINERS */
      .containertitle {
       
		color: white;
		background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);
        margin-bottom: auto;
margin-top: auto;
        padding: 4px;
		padding-bottom : 7px;
        font-style: italic;
        font-size: 20px;
      }
      .postheader{
		color:white;
		background: #2a5298;
        /*border: 1px solid black;*/
        padding: 2px;
        text-align: left;
		  
		  
	  }
      /* STYLE FOR MINI X inside titles for containers */
      .minix {
        font-weight: bold;
        font-style: normal;
        display: flex;
        float: right;
        align-items: rigth;
        gap: 10px;
		padding-right:5px;
		padding-left: 5px;
		color: white;
  background-image: linear-gradient(to bottom, #AB1A03, #FC4C31);
  border-style: outset;
  border-width:2px;
		background-color:red;
		border-bottom-color: white;
		border-radius : 5px; }
		
		/* STYLE FOR MINI _ inside titles for containers */
      .minidash {
        font-weight: bold;
        font-style: normal;
        display: flex;
        float: right;
        align-items: rigth;
         gap: 10px;
		padding-right:5px;
		padding-left: 5px;
		color: white;
		background-image: linear-gradient(to bottom, #1e3c72, #2a5298);
		border-bottom-color: white;
		border-radius : 5px;
		  border-style: outset;
  border-width:2px;
      }
	  
	  
	.miniwin{
        font-weight: bold;
        font-style: normal;
        display: flex;
        float: right;
        align-items: rigth;
         gap: 10px;
		padding-right:5px;
		padding-left: 5px;
		color: white;
		background-image: linear-gradient(to bottom, #1e3c72, #2a5298);
		border-bottom-color: white;
		border-radius : 5px;
		  border-style: outset;
  border-width:2px;
      }
	
.blogpostcnt {
/*color: #1e3c72;*/
background-color : white;
justify:center;
}


      /* IMAGES FOR MICROBLOG */
      .img-right {
        float: left;
        max-height: 50px;
height: auto;		
        width: auto;       /* keeps pic ratio */
        margin-left: 10px;
        margin-bottom: 5px;
        border: 1px solid black;
        aspect-ratio: 1 / 1;    /* forces square ratio. just in case your pic isn't square, but you can delete this if you want. */
        object-fit: cover;    
        object-position: center;
      }

    .articlecont {
	display:flex;
	box-sizing: border-box;
        border: 3px #1e3c72;
        background-image: linear-gradient(120deg, #eeeeee 0%, white 100%);
		marging-left: 10%;
        marging: 10px
		justify: center;
		maxwidth : 10%;
	}
     .posts {
		 
		 
	 }
	 .postxt {
		 padding: 10px;
		 
	 }


	/* BUTTON LINKS */
      .button {
        background: #1e3c72;
        color: white;
        border-radius: 10px;
        padding: 1px 5px 1px 5px;
      }

      .button:hover {
        background: #2a5298;
        color: white;
        border-radius: 10px;
      }

      /* UNDERLINE LINKS */
      .underline-link {
        text-decoration: underline;
      }

      .underline-link:hover {
        text-decoration: none;
      }

      /* FLOATING PICTURE */
      .floating-pic {
        position: relative;
        z-index: 10;
        pointer-events: none;  /* if you want to remove the greyscale filter when hovering, remove this. */
        width: auto;
      }

      /* HOUR & DATE for microblog entries */
      .blogminifooter {
        background: #2a5298;
        border: 1px solid black;
        padding: 2px;
        text-align: right;
      }

      /* WEBRING */
      .webring {
        display: flex;
        flex-wrap: wrap;
        max-height: 60px;
        line-height: 0px;
      }

      .webring img {
        height: auto;
        width: 59px;
        margin: 1px;
        cursor: pointer;
        object-fit: cover;
      }
	  #tag-filters { color:white;
	  }
.tagged:has(input:checked) article {display: none;}
/*add new tags to filter here!
 * follow the class naming conventions (no spaces, don't start it with a number)
 * remember on the actual page you can write the tag however you want!*/
.tagged:has(#all:checked) article,
.tagged:has(#personal:checked) article[class~="personal"],
.tagged:has(#secret:checked) article[class~="secret"],
.tagged:has(#art:checked) article[class~="art"] 
.tagged:has(#tech:checked) article[class~="tech"] {display: inline-block;}

.postit { 
display: flex;
padding: 10x;
margin: 15px;
background-color: yellow;
background-image: linear-gradient(to bottom right, #F4FA7F, #E2E84A);
 box-shadow: 10px 10px 5px grey;

}
.postitcont {
display: flex;
padding: 20px;
}