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

/* Basics */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
font:9px 'lato', calibri, Arial, sans-serif;
letter-spacing:1px;
line-height:11px;
background: #eee url(EternaForest.png);
color: #9C5A3C;}auto;.alias {cursor: alias;}

/* Scrollbar */
::-webkit-scrollbar-thumb { background-color: #304a00; border:1px dotted #0e0300; border-radius: 8px; }
::-webkit-scrollbar { width: 5px; height: 0px; background: transparent; }

/* Links etc. */
a:link, a:visited, a:active { color:#f57900;text-decoration:none; }
a:hover { color:#9C5A3C; }  
b { color:#ffdd57;letter-spacing:2px; }
i { font-weight:bold; }

/* Title */
.title {
    font:12px silkscreen;color:#f57900;text-transform:uppercase;margin-bottom:3px; border-bottom:1px dashed #f57900
}

/* Do not delete */
.block::after {
    content: ""; display: block; clear: both;
}

/* Centered container. I wouldn't recommend changing the width, this layout breaks super easily */
.container {
    max-width: 702px;
    width: 100%;
    margin: 0 auto;
    border:1px solid #0e0300;
    background:#0e0300;
    border-radius:8px;
}

/* Navigation */
.navigation {
    border-top-left-radius:8px;border-top-right-radius:8px;
    background: linear-gradient(90deg, #304a00);
    padding: 5px;
    box-shadow: 0 2px 8px #0e0300;
    text-align: center;
    font:10px 'silkscreen';
    line-height:13px;
    border-bottom:1px dashed #304a00;
}
.navigation a {
    display: inline-block; margin-right:20px;   color: #FF7E00; text-decoration: none; font-weight:bold;
}
.navigation a:hover {
    color: #0e0300;
}

/* Three boxes. I wouldn't recommend changing the width, this layout breaks super easily. */
.three-boxes {
    padding:5px;
    overflow:auto;
    max-height:80px;
}

.box1 {
    float: left;
    width: 227px; 
    margin-right:5px;
    padding: 5px;padding-top:0px;
    border-radius: 8px;
    background: linear-gradient(180deg, #0e0300, #304a00);
    box-shadow: 0 2px 8px #304a00;
    text-align: left;
}

.box2 {
    float: left;
    width: 221px;
    margin-right:5px;
    padding: 5px;padding-top:0px;
    border-radius: 8px;
    background: linear-gradient(180deg, #0e0300, #304a00);
    text-align: left; 
    box-shadow: 0 2px 8px #304a00;
}

.box3 {
    float: left;
    width: 227px;
    padding: 5px;padding-top:0px;
    border-radius: 8px;
    background: linear-gradient(180deg, #0e0300, #304a00);
    text-align: left; 
    box-shadow: 0 2px 8px #304a00;
}

/* Header */
.header-section {
    height:150px;
    margin: 0 5px;
    padding: 5px; 
    border-radius: 8px;
    background:#304a00 url(EternaForest.png);
    box-shadow: 0 2px 8px #0e0300;
    border:1px solid #0e0300;
    border-image:  url("") 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;
    text-align:center;
}

/* Site name */
.sitename {
    font:35px 'pixel';
    color:#f57900;
    text-align:center;
    text-shadow:3px 3px 3px #904000;
    margin-top:10px;
    letter-spacing:5px;
}

/* Link buttons */
.buttons a {
    font:9px 'silkscreen';
    display:inline-block;
    color:#f57900;
    border-radius:5px;
    padding:2px;
    padding-left:10px;
    padding-right:10px;
    margin-right:5px;
    background: #304a00;
    border: 1px solid #904000;
    box-shadow:
    3px 3px 8px #904000,
    inset 2px 2px 5px rgba(255, 255, 255, 0.9),
    inset -2px -2px 5px rgba(255,255,255, 0.15);
}

.buttons a:hover {
    transform: translateY(1px);
}

/* Sidebars and main section.*/
.content {
    padding: 5px;
}

.sidebar, .main {
    float: left;
    padding: 5px;
    border-radius: 8px;
    background: linear-gradient(180deg, #0e0300, #304a00);
    box-shadow: 0 2px 8px #304a00;
}
  
/* I wouldn't recommend changing the width, this layout breaks super easily*/
.left  {
    width: 165px;
    margin-right:5px;
}
.main  {
    width: 350px;
    margin-right:5px;
}
.right {
    width: 165px;
}

/* Footer */
.footer {
    background:#304a00;
    text-align: center;
    padding: 5px;
    border-top:1px dashed #304a00;
    border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
}

/* tooltip */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 2px dotted #f57900;
    cursor: pointer;
}
.tooltiptext {
    visibility: hidden;
    width: 130px;
    background-color: #304a00;
    color: #f57900;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}

/* customizable snowflake styling */
.snowflake {
    color: #fff;
    font-size: 2em;
    font-family: Arial, sans-serif;
}
.snowflake {
	color: #fff;
	font-size: 2em;
	font-family: Arial, sans-serif;
}
.snowflake,
.snowflake .inner {
	animation-iteration-count: infinite;
	animation-play-state: running
}
@keyframes snowflakes-fall {
	0% { transform: translateY(0) }
	100% { transform: translateY(110vh) }
}
@keyframes snowflakes-shake {
	0%,
	100% { transform: translateX(0) }
	50% { transform: translateX(80px) }
}
.snowflake {
	position: fixed;
	top: -10%;
	z-index: 9999;
	-webkit-user-select: none;
	user-select: none;
	cursor: default;
	pointer-events: none;
	animation-name: snowflakes-shake;
	animation-duration: 3s;
	animation-timing-function: ease-in-out
}
.snowflake .inner { animation-duration: 10s; animation-name: snowflakes-fall; animation-timing-function: linear }
.snowflake:nth-of-type(0) { left: 1%; animation-delay: 0s }
.snowflake:nth-of-type(0) .inner { animation-delay: 0s }
.snowflake:first-of-type { 	left: 10%; animation-delay: 1s }
.snowflake:first-of-type .inner,
.snowflake:nth-of-type(8) .inner { animation-delay: 1s }
.snowflake:nth-of-type(2) { left: 20%; animation-delay: .5s }
.snowflake:nth-of-type(2) .inner,
.snowflake:nth-of-type(6) .inner { animation-delay: 6s }
.snowflake:nth-of-type(3) { left: 30%; animation-delay: 2s }
.snowflake:nth-of-type(11) .inner,
.snowflake:nth-of-type(3) .inner { animation-delay: 4s }
.snowflake:nth-of-type(4) { left: 40%; animation-delay: 2s }
.snowflake:nth-of-type(10) .inner,
.snowflake:nth-of-type(4) .inner { animation-delay: 2s }
.snowflake:nth-of-type(5) { left: 50%; animation-delay: 3s }
.snowflake:nth-of-type(5) .inner { animation-delay: 8s }
.snowflake:nth-of-type(6) { left: 60%; animation-delay: 2s }
.snowflake:nth-of-type(7) { left: 70%; animation-delay: 1s }
.snowflake:nth-of-type(7) .inner { animation-delay: 2.5s }
.snowflake:nth-of-type(8) { left: 80%; animation-delay: 0s }
.snowflake:nth-of-type(9) { left: 90%; animation-delay: 1.5s }
.snowflake:nth-of-type(9) .inner { animation-delay: 3s }
.snowflake:nth-of-type(10) { left: 25%; animation-delay: 0s }
.snowflake:nth-of-type(11) { left: 65%; animation-delay: 2.5s }