body {
background-image: url("/Images/blogbg.gif");
background-size: cover;
font-family:"Trebuchet MS", Helvetica, sans-serif;
}

img {
    max-width: 100%;
    max-height: 100%;
}

main {
width: 850px;
display: grid;
grid-template-columns: 250px 600px;
grid-template-rows: 50px 120px 12px 420px;
padding-bottom: 20px;
grid-template-areas:
". ."
"up up"
"em em"
"sid blg";
color: #FFF;
}

#header {
grid-area: up;
border-style: dashed;
border-radius: 7px;
background: #000;
color:#99FFFF
}

/*wave text! Yes, it looks like the scrolling text in Ye Olde Demos. Well, the animation is not smooth at all, but whatevs. Credit to Alexey Taktarov @ codepen*/
@import url('https://fonts.googleapis.com/css?family=Fascinate+Inline');


@keyframes wave {
  
from {
    
transform: translateY(0);
  
}
  
to {
    
transform: translateY(-60px);
  
}

}


.wavetext {
  
margin-top: 60px;
  
text-align: center;

}


.wavetext span {
  
display: inline-block;
 
font-family: 'Fascinate Inline', cursive;
  
font-size: 50px;
  
animation-duration: 0.3s;
  
animation-name: wave;
  
animation-iteration-count: infinite;
  animation-direction: alternate;

}


.wavetext :nth-child( 40n + 0) {
  
animation-delay: -0.6s;
  
color: rgba(100, 10, 100, 1);

}


.wavetext :nth-child( 40n + 1) {
  
animation-delay: -0.585s;
  
color: rgba(120, 10, 140, 1);

}


.wavetext :nth-child( 40n + 2) {
  
animation-delay: -0.57s;
  color: rgba(140, 10, 125, 1);

}


.wavetext :nth-child( 40n + 3) {
  
animation-delay: -0.555s;
  color: rgba(160, 10, 110, 1);

}


.wavetext :nth-child( 40n + 4) {
  
animation-delay: -0.54s;
  
color: rgba(180, 10, 150, 1);

}


.wavetext :nth-child( 40n + 5) {
  
animation-delay: -0.525s;
  
color: rgba(200, 10, 135, 1);

}


.wavetext :nth-child( 40n + 6) {
  
animation-delay: -0.51s;
  
color: rgba(220, 10, 120, 1);

}


.wavetext :nth-child( 40n + 7) {
  
animation-delay: -0.495s;
  
color: rgba(240, 10, 105, 1);

}


.wavetext :nth-child( 40n + 8) {
  
animation-delay: -0.48s;
  color: rgba(105, 10, 145, 1);

}


.wavetext :nth-child( 40n + 9) {
  
animation-delay: -0.465s;
  
color: rgba(125, 10, 130, 1);

}


.wavetext :nth-child( 40n + 10) {
 
animation-delay: -0.45s;
  
color: rgba(145, 10, 115, 1);

}


.wavetext :nth-child( 40n + 11) {
 
animation-delay: -0.435s;
  
color: rgba(165, 10, 100, 1);

}


.wavetext :nth-child( 40n + 12) {
  
animation-delay: -0.42s;
  
color: rgba(185, 10, 140, 1);

}


.wavetext :nth-child( 40n + 13) {
  
animation-delay: -0.405s;
 
color: rgba(205, 10, 125, 1);

}


.wavetext :nth-child( 40n + 14) {
  
animation-delay: -0.39s;
  
color: rgba(225, 10, 110, 1);

}


.wavetext :nth-child( 40n + 15) {
  
animation-delay: -0.375s;
  
color: rgba(245, 10, 150, 1);

}

.wavetext :nth-child( 40n + 16) {
  
animation-delay: -0.36s;
  
color: rgba(110, 10, 135, 1);

}


.wavetext :nth-child( 40n + 17) {
  
animation-delay: -0.345s;
  
color: rgba(130, 10, 120, 1);

}


.wavetext :nth-child( 40n + 18) {

animation-delay: -0.33s;
  
color: rgba(150, 10, 105, 1);

}


.wavetext :nth-child( 40n + 19) {
  
animation-delay: -0.315s;
  
color: rgba(170, 10, 145, 1);

}


.wavetext :nth-child( 40n + 20) {
  
animation-delay: -0.3s;
  
color: rgba(190, 10, 130, 1);

}


.wavetext :nth-child( 40n + 21) {
  
animation-delay: -0.285s;
 
color: rgba(210, 10, 115, 1);

}


.wavetext :nth-child( 40n + 22) {
  

animation-delay: -0.27s;
  
color: rgba(230, 10, 100, 1);

}


.wavetext :nth-child( 40n + 23) {
  
animation-delay: -0.255s;
  
color: rgba(250, 10, 140, 1);

}


.wavetext :nth-child( 40n + 24) {
  
animation-delay: -0.24s;
  
color: rgba(115, 10, 125, 1);

}


.wavetext :nth-child( 40n + 25) {
  
animation-delay: -0.225s;
  
color: rgba(135, 10, 110, 1);

}


.wavetext :nth-child( 40n + 26) {
  
animation-delay: -0.21s;
  
color: rgba(155, 10, 150, 1);

}


.wavetext :nth-child( 40n + 27) {
  
animation-delay: -0.195s;
  
color: rgba(175, 10, 135, 1);

}


.wavetext :nth-child( 40n + 28) {
  
animation-delay: -0.18s;
  
color: rgba(195, 10, 120, 1);

}


.wavetext :nth-child( 40n + 29) {
  
animation-delay: -0.165s;
  
color: rgba(215, 10, 105, 1);

}


.wavetext :nth-child( 40n + 30) {
 
animation-delay: -0.15s;
  
color: rgba(235, 10, 145, 1);

}


.wavetext :nth-child( 40n + 31) {
  
animation-delay: -0.135s;
  
color: rgba(100, 10, 130, 1);

}


.wavetext :nth-child( 40n + 32) {
  
animation-delay: -0.12s;
  
color: rgba(120, 10, 115, 1);

}


.wavetext :nth-child( 40n + 33) {
  
animation-delay: -0.105s;
  
color: rgba(140, 10, 100, 1);

}


.wavetext :nth-child( 40n + 34) {
  
animation-delay: -0.09s;
  
color: rgba(160, 10, 140, 1);

}


.wavetext :nth-child( 40n + 35) {
  
animation-delay: -0.075s;
  
color: rgba(180, 10, 125, 1);

}


.wavetext :nth-child( 40n + 36) {
  
animation-delay: -0.06s;
  
color: rgba(200, 10, 110, 1);

}


.wavetext :nth-child( 40n + 37) {
  
animation-delay: -0.045s;
  
color: rgba(220, 10, 150, 1);

}


.wavetext :nth-child( 40n + 38) {
  
animation-delay: -0.03s;
  
color: rgba(240, 10, 135, 1);

}


.wavetext :nth-child( 40n + 39) {
  
animation-delay: -0.015s;
  
color: rgba(105, 10, 120, 1);

}


#em {
grid-area: em;
border-style: hidden;
}

#sidebar {
grid-area: sid;
border-style: double solid double double; 
background: url('https://spacemako.neocities.org/Images/blogsidebg.gif') repeat;
color: #FF99CC;
overflow: auto;
}

#content {
grid-area: blg;
border-style: double double double hidden;
color:#9999FF;
}