.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial;
  text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-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:https://proxy.everskies.com/a/https://proxy.everskies.com/a/2.5s,1s;animation-delay:https://proxy.everskies.com/a/https://proxy.everskies.com/a/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,https://proxy.everskies.com/a/https://proxy.everskies.com/a/1.5s;animation-delay:3s,https://proxy.everskies.com/a/https://proxy.everskies.com/a/1.5s}

@font-face {font-family: confuse; src: url("https://suneaterlibrary.neocities.org/fonts/Compliant-Confuse-1o-BRK.ttf.woff");}
@font-face {font-family: inkbleed; src: url("https://suneaterlibrary.neocities.org/fonts/Inkbleed.ttf.woff");}
@font-face {font-family: cloud; src: url("fonts/bianzhidai-Pearl.woff");}


* {
  box-sizing: border-box;
}

/*element styling starts here*/

header {
	
	width: 100%;
	height: 100px; /* change banner height here*/
	background-color: #b6714e; 
  opacity: 0.8;
  background-image: linear-gradient(-45deg, #ab4217, #ab4217 50%, #b6714e 50%, #b6714e);
  background-size: 10px 10px;
  border: 5px dashed;
  text-align: center;
  color: #450c01;
}

header span {
	font-size: 2.5rem;
	position: absolute;
	bottom: 0;
	background-color: #b6714e;
  opacity: 0.8;
  
}

.blog {
  width: 100%;
	height: 50px; /* change banner height here*/
	background-color: #b6714e; 
  opacity: 0.8;
  background-image: linear-gradient(-45deg, #ab4217, #ab4217 50%, #b6714e 50%, #b6714e);
  background-size: 10px 10px;
  border: 5px dashed;
  text-align: left;
  
  
  
}

/*body*/
body {
  overflow: hidden;
  background-image: url("assets/fatguys_brown.png");
  background-position: center;
  background-repeat: no-repeat;
  padding: 10px;
  color: #6E260E;
  font-family: inkbleed;
  text-align: center;
}

/*containers*/

.banner { 
  position: relative;
  left:auto;
  right:auto;
  border: 6px ridge #A0522D;
	padding: 5px;
	overflow: hidden;
	background-color: #d09d84;
	max-width: 95rem;
	max-height: 90px;	
	margin-left:auto;
	margin-right:auto;
}

.banner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.side_banner { 
  position: absolute;
  right:200px;
  top: 120px;
	border-radius: 5px;
	padding: 5px;
	overflow: hidden;
	width:19rem;
	height:45rem;
	background-color: #C09175;	
}

	.side_banner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


.container {
  background-color:#C09175;
  overflow-y: auto;
  text-align: center;
	max-width: 90em;
	height: 45rem;
	margin: 10px auto;
	border: 3px ridge;
	outline-offset: 4px;
	display: flex;
	flex-wrap: wrap;
	flex-shrink: 1;
	padding: 5px;
	gap: 5px;
	
}
  
  .container_main {
  position: relative;
  background-color:#C09175;
  overflow-y: auto;
  text-align: center;
  width: 75rem;
	max-width: 75rem;
	height: 45rem;
	margin: 10px auto;
	border: 3px groove;
	outline-offset: 4px;
	display: flex;
	flex-wrap: wrap;
	padding: 5px;
	gap: 5px;
  top: 2px;
  right: 160px;
}

/* these control the column widths */

.small { flex: 1 1 9%; border: 5px solid transparent;padding: 15px; border-image: url(assets/border_aztec_1.png) 30 round;}
.large { flex: 1 1 82%; }
.full { height: 35rem;;}
.half { flex: 1 1 49%;}


section {
  display: flex;
	border: 6px ridge #A0522D;
	border-radius: 5px;
	padding: 5px;
	overflow-y: auto;
	background: #d1aa8c;
  background: radial-gradient(circle,rgba(209, 170, 140, 1) 0%, rgba(173, 110, 92, 1) 100%);
	max-width: 50rem;
	height: 35rem;

}
	
nav {
  
  border-style: dotted;
  border:	 2px dotted;
	border-radius: 5px;
  opacity: 0.8;
  background-color: #E3C9BC; 
  max-height: 205px;
}

nav div {
	text-align: center;
	font-size: 1.25rem;
	margin: 5px 5px 10px 5px;
}

nav a {
	display: block;
	margin: 5px;
	background: brown;
	border: 5px solid;
	padding: 2px 7px;
	text-decoration: none;
}
	  
footer {
	text-align: center;
	margin-bottom: 5vw;
	font-size: 0.8rem;
	border: 2px dotted;
	color: #450c01;
}

/*text*/

h1{
  font-size: 2rem;
	letter-spacing: 2px;
	font-weight: normal;
	text-align: center;
	padding-bottom: 5px;
	font-family: Cloud;
}

a:link {
  color: #800000;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: #4A0404;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color:#F5DEB3;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: #4d5d53;
  background-color: transparent;
  text-decoration: underline;
}