/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
    
    <script type="text/javascript">
    
// <![CDATA[
var colours=new Array("#00E1FF", "#00E1FF", "#00E1FF", "#00E1FF", "#00E1FF"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=66; // how many bubbles are moving at any given time
var over_or_under="under"; // set to "over" for bubbles to always be on top, or "under" to allow them to float behind other objects

/****************************
*   JavaScript Bubble Bath  *
*(c)2010-13 mf2fm web-design*
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
****************************/

var swide=800;
var shigh=600;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();
var boddie;
var ie_version=(navigator.appVersion.indexOf("MSIE")!=-1)?parseFloat(navigator.appVersion.split("MSIE")[1]):false;

function addLoadEvent(funky) {
  var oldonload=window.onload;
  if (typeof(oldonload)!='function') window.onload=funky;
  else window.onload=function() {
    if (oldonload) oldonload();
    funky();
  }
}

addLoadEvent(bubba);

function bubba() { if (document.getElementById) {
  var i, rats, div;
  boddie=document.createElement("div");
  boddie.style.position="fixed";
  boddie.style.top="0px";
  boddie.style.left="0px";
  boddie.style.overflow="visible";
  boddie.style.width="1px";
  boddie.style.height="1px";
  boddie.style.backgroundColor="transparent";
  boddie.style.zIndex="0";
  document.body.appendChild(boddie);
  set_width();
  for (i=0; i<bubbles; i++) {
    rats=createDiv("3px", "3px");

	div=createDiv("auto", "auto");
    rats.appendChild(div);
	div=div.style;
    div.top="1px";
    div.left="0px";
	div.bottom="1px";
	div.right="0px";
	div.borderLeft="1px solid "+colours[3];
	div.borderRight="1px solid "+colours[1];

    div=createDiv("auto", "auto");
	rats.appendChild(div);
	div=div.style;
    div.top="0px";
    div.left="1px";
	div.right="1px";
	div.bottom="0px"
	div.borderTop="1px solid "+colours[0];
	div.borderBottom="1px solid "+colours[2];

	div=createDiv("auto", "auto");
	rats.appendChild(div);
	div=div.style;
	div.left="1px";
	div.right="1px";
    div.bottom="1px";
	div.top="1px";
	div.backgroundColor=colours[4];
    if (ie_version && ie_version<10) div.filter="alpha(opacity=50)";
    else div.opacity=0.5;

    boddie.appendChild(rats);
	bubb[i]=rats.style;
	bubb[i].zIndex=(over_or_under=="over")?"1001":"0";
  }
  bubble();
}}

function bubble() {
  var c;
  for (c=0; c<bubbles; c++) if (!bubby[c] && Math.random()<0.333) {
    bubb[c].left=(bubbx[c]=Math.floor(swide/6+Math.random()*swide/1.5)-10)+"px";
    bubb[c].top=(bubby[c]=shigh)+"px";
    bubb[c].width="3px";
	bubb[c].height="3px"
	bubb[c].visibility="visible";
	bubbs[c]=3;
    break;
  }
  for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
  setTimeout("bubble()", 40);
}

function update_bubb(i) {
  if (bubby[i]) {
    bubby[i]-=bubbs[i]/2+i%2;
    bubbx[i]+=(i%5-2)/5;
    if (bubby[i]>0 && bubbx[i]>0 && bubbx[i]<swide) {
	  if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
		bubb[i].width=bubbs[i]+"px";
		bubb[i].height=bubbs[i]+"px";
	  }
      bubb[i].top=bubby[i]+"px";
      bubb[i].left=bubbx[i]+"px";
    }
    else {
      bubb[i].visibility="hidden";
      bubby[i]=0;
      return;
    }
  }
}

window.onresize=set_width;
function set_width() {
  var sw_min=999999;
  var sh_min=999999;
  if (document.documentElement && document.documentElement.clientWidth) {
    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  }
  if (typeof(self.innerWidth)=='number' && self.innerWidth) {
    if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
    if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  }
  if (document.body.clientWidth) {
    if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
    if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  }
  if (sw_min==999999 || sh_min==999999) {
    sw_min=800;
    sh_min=600;
  }
  swide=sw_min;
  shigh=sh_min;
}

function createDiv(height, width) {
  var div=document.createElement("div");
  div.style.position="absolute";
  div.style.height=height;
  div.style.width=width;
  div.style.overflow="hidden";
  div.style.backgroundColor="transparent";
  return (div);
}
// ]]>
</script>

  </head> 
  
        <style> 
        

:root {
  
  --font-family:"Verdana", sans-serif;
  --font-size:10px;
  --link-color:#00ff97;
  --bg-color:black;
  --text-color:#00ff09;
  --sidebar-bg:transparent;
  --content-bg:black;
  --content-padding:0;
  --background-image:none; 
  /* for bg image, above would be url('site.com/image.jpg'); */
}
body {
  font-family:var(--font-family);
  font-size:var(--font-size);
  background-color:var(--bg-color);
  color:var(--text-color);
  background-image:var(--bg-image);
}
body a {
  color:var(--link-color);
}
.left {
  width:200px;
  display:flex;
  flex-wrap:wrap;
}
.box {
  width:200px;
  border:var(--sidebar-border);
  margin-bottom:15px;
  padding-bottom:10px;
  background-color:var(--sidebar-bg);
}
.flex {
  display:flex;
}
.container {
  max-width:700px;
  margin:0 auto;
}
.right {
  margin-left:10px;
  background-color:var(--content-bg);
  padding:var(--content-padding);
  
}
.subtitle {
  font-weight:bold;
  padding-top:3px;
  margin-bottom:5px;
}
.boxwrap {
  padding-left:10px;
  padding-bottom:5px;
}
.footer {
  text-align:center;
}

.header {
  display:flex;
  flex-spacing:space-between;
  padding-bottom:10px;
}
.header-left {
  width:60%;
}
.header-left a {
 font-weight:bold;
}
.header-right {
  text-align:right;
  width:40%;
}
content {
    display:flex;
  margin:0 auto;
  width:700px;
  
}
.post .title {
  font-size:16px;
  font-weight:bold;
  margin-bottom:10px;
  padding-left:10px;
  color:cyan;
}
.post .date {
  margin-bottom:10px;
   color:cyan;
}
.entry {
  padding-left:10px;
}
.postFooter {
  padding-top:10px;
  padding-left:10px;
}
.blogring {
  font-size:11px;
  font-weight:bold;
}
.boxwrap img {
  width:130px;
  display:block;
}
 @media only screen and (max-width: 730px) {
   .flex {
     flex-wrap:wrap;
   }
   .right {
     width:100%;
     order:1;
   }
   .left {
     width:100%;
     order:2;
     display:flex;
     flex-wrap:wrap;
     align-self:center;
     justify-content:center;
     margin-top:20px;
   }
}
button{
  background-color:black;
  font::var(--font-family);
  font-size: 16px;
  color: cyan;
  width: 200px; height: 50px;
}
  
  
  </style>