@font-face {
  font-family: "PressStart";
  src: url("PressStart2P.ttf")
    format("truetype");
}

@font-face {
  font-family: "KozGo";
  src: url("KozGoPr6N-Regular.otf")
    format("opentype");
}

@font-face {
  font-family: "KozGoBold";
  src: url("KozGoPR6N-Bold.otf")
    format("opentype");
}

:root {
  --font-family:"Courier", sans-serif;
  --font-size:small;
  --sidebar-border:1px solid #E6E6C3;
  --link-color:magenta;
  --bg-color:rgb(173, 19, 128);
  --text-color:white;
  --sidebar-bg:transparent;
  --content-bg:transparent;
  --content-padding:0;
  --bg-image:linear-gradient(#42277e, #42277e);

  /* for bg image, above would be url('site.com/image.jpg'); */
}
body {
  font-family:var(--font-family);
  font-size:var(--font-size);
  background-color:var(--bg-color);
  color:var(--text-color);
  background-image: 
	  url("https://pizzahorse.com/party/moon.png"),
	  linear-gradient(#42277e, #42277e),
	  linear-gradient(#50277e, #50277e),
	  linear-gradient(#5e267d, #5e267d),
	  linear-gradient(#6c247d, #6c247d),
	  linear-gradient(#7b237d, #7b237d),
	  linear-gradient(#88207c, #88207c),
	  linear-gradient(#951b81, #951b81),
	  linear-gradient(#a11881, #a11881),
	  linear-gradient(#ad1380, #ad1380);
  background-repeat: 
	  no-repeat, 
	  repeat-x, 
	  repeat-x, 
	  repeat-x,
	  repeat-x, 
	  repeat-x, 
	  repeat-x, 
	  repeat-x, 
	  repeat-x, 
	  repeat-x;
  background-size: 
	  10%, 
	  auto 11%, 
	  auto 11%, 
	  auto 11%, 
	  auto 11%, 
	  auto 11%,
	  auto 11%, 
	  auto 11%, 
	  auto 11%, 
	  auto 11%;
  background-position: 
	  right top, 
	  0% 0%, 
	  0% 11%, 
	  0% 22%, 
	  0% 33%, 
	  0% 44%,
	  0% 55%, 
	  0% 66%, 
	  0% 77%, 
	  0% 88%, 
	  0% 99%;
  background-attachment: fixed;
}
body a {
  color:var(--link-color);
}
.left {
  width:200px;
  display:flex;
  flex-wrap:wrap;
}
.box {
  width:200px;
  border:var(--sidebar-border);
  margin-bottom:15px;
  padding-bottom:10px;
  background-color:var(--sidebar-bg);
}
.flex {
  display:flex;
}
.container {
  max-width:1000px;
  margin:0 auto;
}
.right {
  margin-left:10px;
  background-color:var(--content-bg);
  padding:var(--content-padding);
  
}
.subtitle {
  font-weight:bold;
  padding-top:3px;
  margin-bottom:5px;
}
.boxwrap {
  padding-left:10px;
  padding-bottom:5px;
}
.footer {
  text-align:center;
}

.header {
  display:flex;
  flex-spacing:space-between;
  padding-bottom:10px;
}
.header-left {
  width:60%;
}
.header-left a {
 font-weight:bold;
}
.header-right {
  text-align:right;
  width:40%;
}
content {
    display:flex;
  margin:0 auto;
  width:700px;
  
}
.post .title {
  font-family: PressStart;
  font-style: italic;
  color:blue;
  font-size:large;
  font-weight:bold;
  margin-bottom:10px;
  padding-left:10px;
}
.post .date {
  margin-bottom:10px;
  color:yellow;
  font-style: bold;
}
.entry {
  padding-left:10px;
}
.postFooter {
  padding-top:10px;
  padding-left:10px;
}
.blogring {
  font-size:11px;
  font-weight:bold;
}
.boxwrap img {
  width:130px;
  display:block;
}

ul.starbullets {
  list-style: none;
  
}

ul.starbullets li::before {
  /* look up 'css code symbols' for more symbols */
  content: "\02605";
  color:yellow;
}

ul.arrow {
  list-style: none;
  
}

ul.arrow li::before {
  /* look up 'css code symbols' for more symbols */
  content: "\021AA";
  color:yellow;
}
.button {
  background-color: magenta;
  border: none;
  color: yellow;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: small;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 12px;
  font-family:var(--font-family);
  font-size:var(--font-size);
}

 @media only screen and (max-width: 730px) {
   .flex {
     flex-wrap:wrap;
   }
   .right {
     width:100%;
     order:1;
   }
   .left {
     width:100%;
     order:2;
     display:flex;
     flex-wrap:wrap;
     align-self:center;
     justify-content:center;
     margin-top:20px;
   }
}
@-webkit-keyframes snowflakes-fall {
		0% {
			top: -10%
		}
		100% {
			top: 100%
		}
	}
	
	@-webkit-keyframes snowflakes-shake {
		0%,
		100% {
			-webkit-transform: translateX(0);
			transform: translateX(0)
		}
		50% {
			-webkit-transform: translateX(80px);
			transform: translateX(80px)
		}
	}
	
	@keyframes snowflakes-fall {
		0% {
			top: -10%
		}
		100% {
			top: 100%
		}
	}
	
	@keyframes snowflakes-shake {
		0%,
		100% {
			transform: translateX(0)
		}
		50% {
			transform: translateX(80px)
		}
	}
	
	.snowflake {
		position: fixed;
		top: -10%;
		z-index: 9999;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-animation-name: snowflakes-fall, snowflakes-shake;
		-webkit-animation-duration: 10s, 3s;
		-webkit-animation-timing-function: linear, ease-in-out;
		-webkit-animation-iteration-count: infinite, infinite;
		-webkit-animation-play-state: running, running;
		animation-name: snowflakes-fall, snowflakes-shake;
		animation-duration: 10s, 3s;
		animation-timing-function: linear, ease-in-out;
		animation-iteration-count: infinite, infinite;
		animation-play-state: running, running
	}
	
	.snowflake:nth-of-type(0) {
		left: 1%;
		-webkit-animation-delay: 0s, 0s;
		animation-delay: 0s, 0s
	}
	
	.snowflake:nth-of-type(1) {
		left: 10%;
		-webkit-animation-delay: 1s, 1s;
		animation-delay: 1s, 1s
	}
	
	.snowflake:nth-of-type(2) {
		left: 20%;
		-webkit-animation-delay: 6s, .5s;
		animation-delay: 6s, .5s
	}
	
	.snowflake:nth-of-type(3) {
		left: 30%;
		-webkit-animation-delay: 4s, 2s;
		animation-delay: 4s, 2s
	}
	
	.snowflake:nth-of-type(4) {
		left: 40%;
		-webkit-animation-delay: 2s, 2s;
		animation-delay: 2s, 2s
	}
	
	.snowflake:nth-of-type(5) {
		left: 50%;
		-webkit-animation-delay: 8s, 3s;
		animation-delay: 8s, 3s
	}
	
	.snowflake:nth-of-type(6) {
		left: 60%;
		-webkit-animation-delay: 6s, 2s;
		animation-delay: 6s, 2s
	}
	
	.snowflake:nth-of-type(7) {
		left: 70%;
		-webkit-animation-delay: 2.5s, 1s;
		animation-delay: 2.5s, 1s
	}
	
	.snowflake:nth-of-type(8) {
		left: 80%;
		-webkit-animation-delay: 1s, 0s;
		animation-delay: 1s, 0s
	}
	
	.snowflake:nth-of-type(9) {
		left: 90%;
		-webkit-animation-delay: 3s, 1.5s;
		animation-delay: 3s, 1.5s
	}
	
	.snowflake:nth-of-type(10) {
		left: 25%;
		-webkit-animation-delay: 2s, 0s;
		animation-delay: 2s, 0s
	}
	
	.snowflake:nth-of-type(11) {
		left: 65%;
		-webkit-animation-delay: 4s, 2.5s;
		animation-delay: 4s, 2.5s
	}