:root {
                

                /* applies to all areas */
                --font-family: Helvetica;
                --font-size: 12px;
                --line-height: 1.3em;
                --font-color: black;
                --link-color: violet;
                --link-text-decoration: none;

                /* main content (between sidebars) */
                --content-padding: 25px;
                --content-bg-color: white;

                /* header */
                --header-height: 348px;
                --header-background: transparent;
                --header-margin-bottom: 0px;

                /* sidebar */
                --sidebar-margin: 10px;
                --sidebar-width: 25%;
                --sidebar-bg-color: white;

                /* footer */
                --footer-height: auto;
                --footer-bg-color: white;

                /* navbar */
                --navitems-alignment: center;
                --space-between-navitems: 20px;
                --navbar-margin-bottom: 10px;
                --nav-bg-color: #363438;

                /* container */
                --container-width: 800px;
                --container-bg-color: #3DA2B7;

                /* controls the gap between the content and the footer */
                --row-gap: 5px;

                /* To add scrollbars to your sidebars, just make the height a px value and change overflow to 'auto' */

                --sidebar-height: 100%;
                --sidebar-overflow: hidden;
                --background-color: #3DA2B7;
            }
            

            html,
            body {
                margin: 0;
                padding: 0;
                background-color: #DDC8D7;
                font-family: var(--font-family);
                font-size: var(--font-size);
                line-height: var(--line-height);
                color: var(--font-color);
                background-image:url('https://64.media.tumblr.com/6cc34cf0e7118e1345b94940752e48c7/f75bfa8a80338467-bb/s640x960/1e6479dd8cbc1bc3f91a4645845eadbb5882d33a.pnj');
                background-repeat:repeat-X;
                overflow-x:hidden;
            }

            body a {
                color: var(--link-color);
                font-weight: bold;
                text-decoration: var(--link-text-decoration);
            }

            #main-container {
                max-width: var(--container-width);
                margin: 0 auto;
                background-image:linear-gradient(white, #D9C4D3);
                border-radius:20px;
                box-shadow:0px 0px 15px grey;
                padding-top: 20px;
                
                
            }

            .flex {
                display: flex;
                margin-bottom: var(--row-gap);
            }

            .content-wrap {
                margin-top: var(--content-margin-top);
            }

            #content-container {
                width: 50%;
                margin-bottom: var(--row-gap);
                background-color: transparent;
            }

            #left-sidebar {
                width: var(--sidebar-width);
                margin-right: var(--sidebar-margin);
                margin-bottom: var(--row-gap);
                height: var(--sidebar-height);
                overflow: var(--sidebar-overflow);
                background-color: transparent;
            }

            #right-sidebar {
                width: var(--sidebar-width);
                margin-left: var(--sidebar-margin);
                margin-bottom: var(--row-gap);
                height: var(--sidebar-height);
                overflow: var(--sidebar-overflow);
                background-color: transparent;
            }
            
             .rightsidebarsect{
                width:25%;
                margin-bottom: 10px;
                height:auto;
                overflow: hidden;
                background-color:white;
                padding:15px;
                font-size:10px;
                box-shadow:0px 0px 15px #9D84A4;
                border-radius:10px;
              
                
             }
                .leftsidebarsect{
                width:25%;
                margin-bottom: 10px;
                height:auto;
                overflow: hidden;
                background-color:white;
                padding:15px;
                font-size:10px;
                box-shadow:0px 0px 15px #9D84A4;
             }
             
              #divlinkcontain {
                position:absolute;
                bottom:0px;
            }

              .Lleaf{left:-232px;position:absolute;z-index:10000;}
 .Rleaf{right:-232px;position:absolute;z-index:10000;
 }
 
              .bodysect{
                width:100%;
                margin-bottom: 10px;
                height:auto;
                overflow: hidden;
                background-color:white;
                padding:15px;
                font-size:10px;
                box-shadow:0px 0px 15px #9D84A4;
                 border-radius:10px;
              
             }

            #header-contained {
                height: var(--header-height);
                margin-bottom: var(--header-margin-bottom);
                background-image: var(--header-background);
                background-position: center center;
            }

            #footer {
                height: var(--footer-height);
                text-align: center;
                color: var(--font-color);
                background-color: var(--footer-bg-color);
                border-radius: 0 0 20px 20px;
                margin-bottom:20px;
            }

            #header-full {
                display: none;
                height: var(--header-height);
                margin-bottom: var(--header-margin-bottom);
                background-image: var(--header-background);
                background-position: center center;
            }

            #navbar-contained {
                margin-bottom: var(--row-gap);
                position:relative;
            }

            #navbar-full {
                display: none;
            }

            .nav {
                margin-left: 0;
                text-align: var(--navitems-alignment);
                margin-bottom: 20px;
                padding-top: 1em;
                padding-bottom: 1em;
                background-color: var(--nav-bg-color);
                height:135px;
                position:relative;
            }

            .nav li {
                display: inline-block;
                padding-right: var(--space-between-navitems);
            }
            
            .nav a{
              color:#DDC8D7;
              vertical-align:bottom;
            }
            
            a:hover{
              color:violet;
              vertical-align:bottom;
              text-shadow:0 0 10px purple;
            }

            .wrapper {
                padding: var(--content-padding);
                padding-top: var(--sidebar-padding);
            }

            .sidebar-wrapper {
                padding: var(--sidebar-padding);
                height: var(--sidebar-height);
                overflow: var(--sidebar-overflow);
            }

            .footer-wrapper {
                padding: 5px;
            }
#headimg-container {
                max-width: var(--container-width);
                margin: 0 auto;
                background-color:transparent;
                height:348px;
                
            }
            #dannylogo{
              position:absolute;
              left:-15px; 
              z-index:10000;
              top:-2px;}
              
             #tickerbar {
               width:862px;
               height:30px;
               background-color:white;
               background-image:linear-gradient(#534F56,#363438);
               color:white;
               bottom:50px;
               left:-31px;
               position:relative;
               z-index:100000000;
               line-height:30px;
               overflow:hidden;
               border-radius:0px 0px 10px 10px;
               border-top:3px dashed white;
                }
              .ticker {
     position: absolute;
     user-select: none;
     white-space:nowrap;
     animation: ticker 20s linear infinite;
     width: 100%;
      font-family: Helvetica;
}
 @media(max-width:800px) {
     .ticker {
         animation: ticker1000 15s linear infinite;
    }
}
 @media(min-width:801px) {
     .ticker {
         animation: ticker1001 15s linear infinite;
    }
}
 @keyframes ticker1000 {
     0% {
         transform: translate3d(862px, 0, 0);
    }
     100% {
         transform: translate3d(-300px, 0, 0) 
    }
}
 @keyframes ticker1001 {
     0% {
         transform: translate3d(85vw, 0, 0);
    }
     100% {
         transform: translate3d(-100vw, 0, 0) 
    }
}
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
            /* To keep your site RESPONSIVE, make sure this variable matches the width for --container-width UNLESS --container-width is 100% - if it's 100%, you'll need to manually input a breakpoint. */
            @media only screen and (max-width: 800px) {
                .flex {
                    flex-wrap: wrap;
                }

                #left-sidebar {
                    width: 100%;
                    display: block;
                    order: 2;
                    margin-right: 0;
                    margin-bottom: 10px;
                    
                }

                #right-sidebar {
                    width: 100%;
                    display: block;
                    order: 3;
                    margin-left: 0;
                 
                }

                #content-container {
                    width: 100%;
                    display: block;
                    order: 1;
                    margin-bottom: 10px;
                }
                
                #headimg-container{
                  display:none;}  
                  
                  .leftsidebarsect{
                  width:100%}  

            }
            
            .rightsidebarsect{
                  width:100%}  

            
            
             @font-face {
  font-family: "Big Limbo";
  src: url('https://dannythe.website/fonts/big_limbo_bt.ttf');
}

h1{font-family: "Big Limbo"; color:#363438;}







<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
    <title>Danny the Website</title>
  
        </head>
        
        
        <body>
        <div id="headimg-container"></div>
      
        <div id="main-container">
            <div id="header-contained" style="display: none;"></div>
            <div id="navbar-contained">
            <div class="Lleaf"><img src="https://64.media.tumblr.com/7707f6986a639d14ae898743b66677d1/a77e3c70454c1a59-3e/s250x400/018ae34a36a0ba543c8cb1686c4a3b615bc2eabb.pnj" height="232px"></div><div>
            
                <div class="Rleaf"><img src="https://64.media.tumblr.com/f5c88b76d26192a8bf39829281b374ee/a77e3c70454c1a59-b4/s250x400/622a399bbf78f2088bde2fa7c0df81251594edbd.pnj" height="232px"></div>
                 
                <ul class="nav">
                    <li><a href="/">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Dannyzens</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Art</a></li>
                <li><a href="#">Fun</a></li>
                <li><a href="http://www.freegb.net/gbook/dannythewebsite">Guestbook</a></li>
                </ul>
               
               <div id="tickerbar"><div class="ticker">
               This is just like Sword Art Online 🗡️
               </div></div>
               
               
               <div id="dannylogo"><img src="https://dannythe.website/DannyLogo.png" height="130px"></div>
            </div>
            
            <div class="content-wrap flex alignment">
                <div id="left-sidebar">
                    <div class="sidebar-wrapper">
                                    <div class="leftsidebarsect"><h1>Bona to vada!</h1>
                                    Welcome to Danny the Website.</div>
                                    
                                    
                                    <div class="leftsidebarsect">
                                    <h1>What's going on?</h1>
                                    
                                    dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Venenatis tellus in metus vulputate eu scelerisque. Duis
                        at tellus at urna condimentum mattis pellentesque id.
                        
                                    </div>
                                    
                                    
                                    
                                    <div class="leftsidebarsect">Mauris sit amet massa vitae tortor condimentum lacinia
                        quis vel. Sit amet est placerat in egestas erat imperdiet sed euismod. Erat nam at lectus urna duis
                        convallis convallis tellus id.</div>  </div>
                </div>
                <div id="content-container">
                <div class="bodysect">
                    <div class="wrapper"><h1>Photo Gallery or Interactive Thing</h1>
                    
                    It's ok</div></div>
                    
                     <div class="bodysect">
                    <div class="wrapper"><h1>Little index</h1>
                    
                    Hi </div></div>
                    
                     <div class="bodysect">
                    <div class="wrapper"><h1>Art Gallery</h1>
                    
                    This is an art gallery</div></div>
                    
                    
                </div>
                <div id="right-sidebar">
                
                    <div class="rightsidebarsect"><h1>Something</h1>
                                      dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Venenatis tellus in metus vulputate eu scelerisque. Duis
                        at tellus at urna condimentum mattis pellentesque id. Mauris sit amet massa vitae tortor condimentum lacinia
                        quis vel. Sit amet est placerat in egestas erat imperdiet sed euismod. Erat nam at lectus urna duis
                        convallis convallis tellus id. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. Urna et
                        pharetra pharetra massa massa ultricies mi.
                    </div>
                    
                    <div class="rightsidebarsect"><h1>External Links and Webrings</h1>
                                      dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Venenatis tellus in metus vulputate eu scelerisque. Duis
                        at tellus at urna condimentum mattis pellentesque id. Mauris sit amet massa vitae tortor condimentum lacinia
                        quis vel. Sit amet est placerat in egestas erat imperdiet sed euismod. Erat nam at lectus urna duis
                        convallis convallis tellus id. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. Urna et
                        pharetra pharetra massa massa ultricies mi.
                    </div>
                    
                    <div class="rightsidebarsect"><h1>Chat with us!</h1>
                                      <iframe src="https://www3.cbox.ws/box/?boxid=3514190&boxtag=3Jt1SB" width="100%" height="250" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe>	
                    </div></div></div>
                    
            <div id="footer">
                <div class="footer-wrapper">
                
                <!-- hitwebcounter Code START -->
<!-- hitwebcounter Code START -->
<a href="https://www.hitwebcounter.com" target="_blank">
<img src="https://hitwebcounter.com/counter/counter.php?page=7979107&style=0007&nbdigits=6&type=page&initCount=3589" title="Free Counter" Alt="web counter"   border="0" /></a>                                    
                                        <br>
                                        
                                        
                                        
                                          <br>
                            

last updated by webmaster jane: april 2022</div>
            </div>
        </div>
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        <script type="text/javascript">
// <![CDATA[
var colour="violet";
var sparkles=120;

/****************************
*  Tinkerbell Magic Sparkle *
* (c) 2005 mf2fm web-design *
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
****************************/
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();

window.onload=function() { if (document.getElementById) {
  var i, rats, rlef, rdow;
  for (var i=0; i<sparkles; i++) {
    var rats=createDiv(3, 3);
    rats.style.visibility="hidden";
    document.body.appendChild(tiny[i]=rats);
    starv[i]=0;
    tinyv[i]=0;
    var rats=createDiv(5, 5);
    rats.style.backgroundColor="transparent";
    rats.style.visibility="hidden";
    var rlef=createDiv(1, 5);
    var rdow=createDiv(5, 1);
    rats.appendChild(rlef);
    rats.appendChild(rdow);
    rlef.style.top="2px";
    rlef.style.left="0px";
    rdow.style.top="0px";
    rdow.style.left="2px";
    document.body.appendChild(star[i]=rats);
  }
  set_width();
  sparkle();
}}

function sparkle() {
  var c;
  if (x!=ox || y!=oy) {
    ox=x;
    oy=y;
    for (c=0; c<sparkles; c++) if (!starv[c]) {
      star[c].style.left=(starx[c]=x)+"px";
      star[c].style.top=(stary[c]=y)+"px";
      star[c].style.clip="rect(0px, 5px, 5px, 0px)";
      star[c].style.visibility="visible";
      starv[c]=50;
      break;
    }
  }
  for (c=0; c<sparkles; c++) {
    if (starv[c]) update_star(c);
    if (tinyv[c]) update_tiny(c);
  }
  setTimeout("sparkle()", 40);
}

function update_star(i) {
  if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
  if (starv[i]) {
    stary[i]+=1+Math.random()*3;
    if (stary[i]<shigh+sdown) {
      star[i].style.top=stary[i]+"px";
      starx[i]+=(i%5-2)/5;
      star[i].style.left=starx[i]+"px";
    }
    else {
      star[i].style.visibility="hidden";
      starv[i]=0;
      return;
    }
  }
  else {
    tinyv[i]=50;
    tiny[i].style.top=(tinyy[i]=stary[i])+"px";
    tiny[i].style.left=(tinyx[i]=starx[i])+"px";
    tiny[i].style.width="2px";
    tiny[i].style.height="2px";
    star[i].style.visibility="hidden";
    tiny[i].style.visibility="visible"
  }
}

function update_tiny(i) {
  if (--tinyv[i]==25) {
    tiny[i].style.width="1px";
    tiny[i].style.height="1px";
  }
  if (tinyv[i]) {
    tinyy[i]+=1+Math.random()*3;
    if (tinyy[i]<shigh+sdown) {
      tiny[i].style.top=tinyy[i]+"px";
      tinyx[i]+=(i%5-2)/5;
      tiny[i].style.left=tinyx[i]+"px";
    }
    else {
      tiny[i].style.visibility="hidden";
      tinyv[i]=0;
      return;
    }
  }
  else tiny[i].style.visibility="hidden";
}

document.onmousemove=mouse;
function mouse(e) {
  set_scroll();
  y=(e)?e.pageY:event.y+sdown;
  x=(e)?e.pageX:event.x+sleft;
}

function set_scroll() {
  if (typeof(self.pageYOffset)=="number") {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
  }
  else if (document.body.scrollTop || document.body.scrollLeft) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
  }
  else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
	sdown=document.documentElement.scrollTop;
  }
  else {
    sdown=0;
    sleft=0;
  }
}

window.onresize=set_width;
function set_width() {
  if (typeof(self.innerWidth)=="number") {
    swide=self.innerWidth;
    shigh=self.innerHeight;
  }
  else if (document.documentElement && document.documentElement.clientWidth) {
    swide=document.documentElement.clientWidth;
    shigh=document.documentElement.clientHeight;
  }
  else if (document.body.clientWidth) {
    swide=document.body.clientWidth;
    shigh=document.body.clientHeight;
  }
}

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







<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>


        </body>