* { margin:0; padding:0;}

body {
	background: #281b34 url('/images/bg.png') repeat fixed top left;
    font-family: "Oxanium", sans-serif;
	font-size:12pt;
	color:#fff;
}

textarea, input, #shoutbox textarea, #shout-form button {
	border:1px solid #584d63;
	background:#3c3840;
	width: 500px;
    padding:10px;
	color:#fff;
}

a, a:active, a:visited {
	text-decoration:underline;
	color:#fff;
}

a:hover {
	color:#7c0fa0;
}

h2 {
    font-family: 'Zen Dots', sans-serif;
    text-align: center;
    margin-top:10px;
    font-size: 5em;
    font-weight: 700;
    color: #f5f5f5;
    text-shadow: 1px 1px 1px #919191,
        1px 2px 1px #919191,
        1px 3px 1px #919191,
        1px 4px 1px #919191,
        1px 5px 1px #919191,
        1px 6px 1px #919191,
        1px 7px 1px #919191,
        1px 8px 1px #919191,
        1px 9px 1px #919191,
        1px 10px 1px #919191,
    1px 18px 6px rgba(16,16,16,0.4),
    1px 22px 10px rgba(16,16,16,0.2),
    1px 25px 35px rgba(16,16,16,0.2),
    1px 30px 60px rgba(16,16,16,0.4);
}

h3 {
    font-family: 'Oxanium', sans-serif;
    text-align: center;
    margin:0 0 20px 0;
    text-shadow: #0c0c0c 0px 0px 20px;

}

 #shoutbox {
    width:auto;
    max-width: 900px !important;
    margin:10px auto;
    box-shadow: #0c0c0c 0px 0px 20px;
    padding: 10px;
	overflow:hidden;
	background:#45404a;
}

#footer {
    width:auto;
    max-width: 900px !important;
    margin: 25px auto; 
    text-align: center;
    font-size:12pt;
}

#footer img {
    width:88px;
    height:31px;
    margin:5px;
}

#shout-form {
    width: 500px;
    margin: 0 auto; 
}

#shout-form button{
    margin:10px auto;
    width: 100px;
    display: block; 
}

#shouts {
    border:1px solid #584d63;
    height: 200px !important;
    overflow-y: scroll;
    padding: 5px;
    background: #3c3840;

}


.shout {
	border:1px solid #584d63;
	background:#45404a;
	padding:3px;
    margin-bottom: 5px;
	list-style-type: none;

}

.shout .name {
    font-size: 10pt;
    padding:0 0 3px 0;
    margin: 0 0 3px 0;
    border-bottom:1px solid #584d63;
}
  #banner {
    position: relative;
    overflow: hidden;
    width: 468px;
    height: 60px;
    margin:10px auto;
    font: bold 18px/1 Arial, sans-serif; color: #fff;
    display: flex; align-items: center; justify-content: flex-start;
    animation: flash 0.6s infinite;
  }
  @keyframes flash {
    0%   { background:#f00; }
    20%  { background:#0f0; }
    40%  { background:#00f; }
    60%  { background:#ff0; color:#000; }
    80%  { background:#f0f; color:#fff; }
    100% { background:#f00; }
  }
#txt {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    animation: scroll-txt 6s linear infinite;
    /* Allow text to enter before fully leaving by using translateX */
    will-change: transform;
}
  @keyframes scroll-txt {
    0% {
        left: 100%;
    }
    100% {
        left: -100%;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .banner { animation: none; background:#f00; }
  }