.header, .header a {
    color: white;
}
.header {
	width: calc( 100% - 10px );
}
.headerTop {
    background: url(https://i.gifer.com/4wbD.gif);
	display:  !important;
	content: 'slay nation';
    width: 100%;
	/*font-family: arial, sans-serif;*/
	padding-left: 10px;
	padding-top: none;
	padding-bottom: 10px;
	text-decoration: none;
}
.headerTop a {
	text-decoration: none;
	display: none;

}
.search {
	padding-right: 5px;
}
.headerBottom a {
	text-decoration: none;
}
.headerTop::after { /* clearfix */
    content: "SLAYYYY.com";
    font-family: 'Arial' sans-serif;
    font-weight: bold;
    font-size: 25px;
    clear: both;
    display: table;
    
}
.header form {float:right; display:inline-flex;}
.headerBottom {
    background-color: black;
    width: 100%;
	padding-left: 10px;
	padding-bottom:10px;
	width: calc( 100% - 5px );
	display: block !important;
	padding-right: 5px;
	padding-top: 5px;
	/*font-family: arial, sans-serif !important;*/
	text-decoration: none;
}

body {
    margin: 0px;
	font-size: 16px;
	background: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4843fc2a-40b0-47d2-8b76-30d467af7747/d6ov5rj-4c97ad07-1581-4799-af9b-8b605bdce341.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzQ4NDNmYzJhLTQwYjAtNDdkMi04Yjc2LTMwZDQ2N2FmNzc0N1wvZDZvdjVyai00Yzk3YWQwNy0xNTgxLTQ3OTktYWY5Yi04YjYwNWJkY2UzNDEuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.v8q2w6yBI1lgRfWGpgScp7NgiGEqjmt5yiPo-yRfuBM);
	background-size: 1350px;
    font-family: Arial, sans-serif;
}
body::before {
    content: "";
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: calc(100% + 32px);
    height: calc(100% + 32px);
    background-image: url(https://giffiles.alphacoders.com/398/39891.gif);
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
    z-index: 10000000;
    pointer-events: none;
    opacity: 0.5;
    box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 70%) inset;
    
}
#imgPreview {
z-index: 3000;
top: 0px;
left: 0px;
display: block;
position: fixed;
width: 100%;
height: 100%;
user-select: none;
background-color: rgba(0, 0, 0, 0.6);
}
.avatar{
	border-radius: 500px;
	border: 5px solid white; 
	padding: 5px;
}	 
.avatar:hover {
	 animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.left {
    float: left;
    width: calc(40% - 20px);
   	border: solid white;
	padding: 2em;
	margin: 0 -2em;
	background: #00FFE65C;
	border-radius: 50px; 
	animation: floating 2s ease-in-out infinite
}
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}

.right {
    float: right;
    width: calc(60% - 20px);
	padding-top: 1px;
	border: solid white;
	padding: 1em;
	margin: 0 -4em;
	background: #00FFE65C;
	border-radius: 50px; 
	animation: floating 3s ease-in-out infinite
}
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}

audio {
    width: -moz-available;
    width: -webkit-fill-available;
}
.commentsbox {
	display: block !important;
    width: -moz-available;
    width: -webkit-fill-available;
    border-radius: 0px 15px 15px 15px;
}
.url {
    border: solid 2px white;
    border-radius: 10px;
    background: #00FFE65C;
    padding: 2px;
	box-shadow: 0px 0px 30px #0023FF;
}
#friends img {
    padding: 5px;
}
.info {
	background: #000000A6;
    color: #00FEFF;
    border: double;
    border-radius: 10px;
	padding-left: 5px;
}
.info {
	background: #000000A6;
    color: #00FEFF;
    border: double;
    border-radius: 10px;
	padding-left: 5px;
}
.center {
	text-align:center;
}
.commentLeft {
/*    background-color: #fc9;*/
}
.grecaptcha-badge {
	/*this shit ruins the experience for me*/
	display:none !important;
}
.right .commentRight {
	/* ID 23 (1024x2 made this and let me steal it from him */
	/* fixes comments leaving the god damn div box */
  grid-template-columns: auto 100px !important;
  word-wrap: anywhere;
  overflow-wrap: anywhere;
}
.commentRight {
/*    background-color: #f93;*/
    display: grid;
    grid-template-columns: 65% auto;
    margin-bottom: 1px;
    padding: 5px;
}
.text1 {
	color: white;
}
.commentRight img{
    width: 100px;
    border: solid 2px #FFFF;
    border-radius: 50px;
}
.commentRight img:hover{
     animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }

}

.commentRight .commentPictures{
    width: 80px;
}

.contactInfo {
     border: solid 2px white;
    border-radius: 10px;
    background: #00FFE65C;
    padding: 2px;
	box-shadow: 0px 0px 30px #0023FF;
}
.blogInfo {
	padding-left:5px;
}
.contactInfoTop {
	padding: 3px;
	padding-bottom: 4px;
	padding-left: 6px;
	color:white;
    background-color: #000000B3;
    border-radius: 0px 10px;
}
