<!--classic sonic my beloved
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⣆⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠀⣀⠀⣀⣀⣀⣀⣀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⠠⠤⠤⠖⠛⠉⠉⢻⡭⢥⣈⠉⠁⠀⠀⠀⠀⠀⠀⠀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠁
⠀⠀⠀⠀⠀⢀⣀⣠⠤⠤⠴⠒⠒⠚⠛⠛⠛⠛⠛⠛⠛⠓⠒⠦⠤⠤⢤⣄⣷⡀⠈⠛⠦⣄⠀⠀⢀⡤⢴⣿⣷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⠀
⠀⠀⠀⠐⣾⡏⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣀⠀⠀⠀⠀⠀⠀⠉⠉⠁⠀⠀⠈⠳⣾⠋⣠⠞⠉⣿⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡉⠀
⠀⠀⠀⠀⠈⠙⢦⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡟⣽⣝⡳⣦⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠿⣥⡀⢀⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢺⡃⠀
⠀⠀⠀⠀⠀⠀⠀⠙⢦⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣸⠃⣿⠀⠉⠳⢯⡳⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠙⠋⠉⠹⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠻⣆
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢦⡀⠀⠀⠀⠀⠀⠀⠀⣿⠀⢻⠀⢀⣴⠞⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⡴⠶⣬⢻⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡜
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢦⡀⠀⠀⠀⠀⠀⢿⠀⢸⣴⠟⠁⠀⠀⠀⢀⡀⠀⠀⠀⠀⠀⠀⠀⣰⠋⠀⠀⠈⢿⢧⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠤⠒⠂⠙⣦⠀⠀⠀⠀⠸⡆⠀⠁⠀⠀⣠⠶⠛⠉⠉⠙⠲⣤⡀⠀⠀⢰⠃⠀⠀⠀⠀⠸⣟⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇
⠀⠀⠀⠀⠀⠀⣠⠴⠉⠀⢀⣠⡴⠾⠋⠃⠀⠀⠀⠀⠀⠀⠀⣠⡞⠁⠀⠀⠀⠀⠀⠀⠀⠹⣆⠀⡼⠀⠀⠀⠀⠀⠀⢻⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣷
⠀⠀⠀⠀⡠⠞⠁⢀⣠⣾⠿⠚⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢰⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢷⡇⠀⠀⠀⠀⠀⠀⢸⢻⠀⠤⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿
⢄⠀⢠⠔⠤⣀⡴⠿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡇⠀⠀⠀⠀⠀⢀⣀⣀⡤⣴⡦⠖⠛⢻⡟⠛⠉⠉⠉⠙⣿⠀⠀⠹⣄⣠⠤⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻
⠈⠧⠀⣠⡞⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣇⣀⡤⠴⠒⠚⠉⠉⠀⠀⠻⠃⠀⠀⠈⠁⢀⡴⣦⠀⠀⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸
⠀⢀⡾⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢹⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣤⣼⣿⡾⢋⣀⣸⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈
⢰⣿⣦⣀⣀⣀⣀⣀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠳⣤⣀⣀⣀⣀⣀⡠⠴⠖⠋⠁⠀⠀⠉⠁⠀⠀⠀⠉⠙⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢰
⠀⠀⠀⠀⠀⠀⠀⠉⠉⠉⠙⠛⠓⠦⢤⡄⠀⠀⠀⠀⠀⠀⣶⠞⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣼⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠟⠀⠀⠀⠀⠀⠀⠀⢿⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠖⠋⠉⠳⠀⠀⠀⣠⡼⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡾⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢦⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⡴⠞⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡾⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠙⠳⠶⣦⣤⠤⠤⣤⣶⡶⠶⣯⣉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣼⠁⠀⠀⠀⠀⠀⠀⠀⣀⣀⣀⣀⡀⠀⠀⠀⣠⠶⣦⠉⣠⡶⠋⠁⠀⠀⠀⠈⠳⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡏⢀⣀⡤⠤⠖⠚⠛⠉⠉⢀⡴⠟⠁⠀⣠⠞⠁⣴⢃⡼⠃⠀⠀⠀⠀⠀⠀⠀⠀⠹⡆⠀⠀⠀⠀⢀⣀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⠛⠉⠁⠀⠀⠀⠀⠀⢀⡴⠋⠀⠀⢀⣶⠋⠀⣼⢁⣼⠥⠤⣄⣀⡤⠴⠒⠛⠙⠒⠒⠓⠛⠲⣄⣰⣋⡀⠈⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣾⣤⣀⣀⠀⢸⡇⠀⢀⣿⠟⠁⣠⠖⠋⠁⠀⠀⠀⠀⠀⠹⣤⣤⣶⣿⣿⣿⣿⣿⣷⣧⣀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠉⠙⠛⢦⣿⡟⠀⠰⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⣿⣿⣿⣿⣿⣿⣿⣄⠈⢻⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⠀⠀⠀⠀⠈⢳⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠿⣿⣿⣿⣿⠟⠉⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠾⣤⣤⣤⠤⠤⠞⠳⡤⣷⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⢧⣀⣀⡠⠖⡟⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠙⠛⠒⠒⠒⢺⠃⢸⡟⢦⡀⠀⠀⠀⠀⠀⠀⢤⣤⣴⣾⣿⣿⣯⡀⠀⠀⣀⡼⠃⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡟⠀⣾⠀⠀⠙⢲⣤⣄⣀⡤⠖⠻⣿⣿⣿⠹⣇⠀⠉⠛⢉⡵⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⠁⢠⡇⠀⠀⠈⢻⠀⣿⠀⠀⠀⠀⠀⠀⠈⠓⠾⠽⠷⠋⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡏⠀⣸⠀⠀⠀⢀⡏⠀⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣠⠼⠧⢾⡇⠀⠀⠀⣸⡧⠿⠧⠤⢄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠼
congratulations for finding one of the secrets, now go back to the website lol-->


<!-- WAIT! HOLD ON! Before going back, pleasepleasePLEASE read this if you're a webmaster or coding a website: do NOT copy/steal elements 
from my website and some of its code lines.

I'm all for taking inspiration from my website and looking at its (badly layed out) codes to see how elements from my website works but I'm strongly against
stealing some of its code lines and copy/steal elements from it.

Please don't do this. I did not struggle for three months to build my website with basic knowlege of HTML I enhanced trough these months, 
learn CSS and understand how JavaScript works just for some of its elements and code lines to be (unsubtly) stolen/copied either out of laziness
or to make the job/things "easier" for you with no intent to learn from what has been copied/stolen.

If you want help for adding elements you've seen in my website to yours or for learning HTML and CSS, don't hesitate to ask for help in 
the Chat Box! I love helping people, I won't be angry at you or decline helping you if you ask for help! Just don't lie when doing this lol.

This is a heartfelt message, written by a webmaster who cares a lot about her works. Now you can REALLY go back to the website.-->


<!DOCTYPE html>
<html class="cursor galaxy sky">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1024">
    <meta name="description" content="A website centered on Classic Sonic. You can't Drop n' Spin Dash without Sonic Speed!!!">
    <!-- TWITTER METADATA-->
<meta name="twitter:card" content="summary_large_image">
<meta property="og:url" content="dropandspindash.neocities.org/">
<meta property="og:title" content="Drop n' Spin Dash!!!">
<meta property="og:description" content="A website centered on Classic Sonic. You can't Drop n' Spin Dash without Sonic Speed!!!">
<meta property="og:image" content="https://dropandspindash.neocities.org/dnsdv2-thumbnail2.png">

<!-- GOOGLE METADATA -->



    <!-- separate -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    <title>Drop n' Spin Dash!!!</title>
    <link rel="icon" type="image/x-icon" href="favicon.png" sizes="256x256">
    
    
    <style>
 table.roundedCorners { 
  border: 5px solid darkblue;
  border-radius: 10px; 
  border-spacing: 0;
  }
table.roundedCorners td, 
table.roundedCorners th { 
  border-bottom: 5px solid darkblue;
  padding: 10px; 
  }
table.roundedCorners tr:last-child > td {
  border-bottom: none;
table.roundedCorners { 
  border: 5px.solid darkblue;
  border-radius: 10px; 
  border-spacing: 0;
  }
table.roundedCorners td, 
table.roundedCorners th { 
  border-bottom: 5px solid darkblue;
  padding: 10px; 
  }
table.roundedCorners tr:last-child > td {
  border-bottom: none;
}th

.textarea {
  resize: none;
}

.tableContainer {
    height: 300px;
    overflow: hidden;
}
.table {
    position: sticky;
    top: 0;
    width: 100%;
}

tbody {
    display: block;
    height: 40rem;
    overflow-y: auto;
}
</style>

<style>
.clear {
background: rgba(255,255,255,0.6);
border: 0px solid;
  border-radius: 10px; 
  border-spacing: 0;
}
</style>

<style>

.cursor {
  cursor:url('soniccursor.png'), auto;
}  
a:hover{
        cursor:url('soniccursorhover.gif'), pointer;
    }
    
a img:hover{
        cursor:url('soniccursorhover.gif'), pointer;
    }

a mp3:hover{
        cursor:url('soniccursorhover.gif'), pointer;
    }

    
src:hover{
        cursor:url('soniccursorhover.gif'), pointer;
    }
    
.sky {
background: linear-gradient(147deg, rgba(168,225,255,1) 0%, rgba(0,170,255,1) 100%);
height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}    

.meteors {
background: none;
} 

@media only screen and (max-width: 1024px) {
.meteolors {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
width: 155vw;
height: 175vh;
}
}
</style>

<style>
    img.vert-move {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
img.vert-move {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
</style>

<style>
    img.think {
    -webkit-animation: mover 0s infinite  alternate;
    animation: mover 0.5s infinite  alternate;
}
img.think {
    -webkit-animation: mover 0s infinite  alternate;
    animation: mover 0.5s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-10px); }
}
@keyframes mover {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-10px); }
}
</style>

  <style>
.divscroll
{
Overflow-y:scroll;
Overflow-x:hidden;
}
</style>

<style>
    .understand {
        width: 130px;
        height: 195px;
        position: relative;
        display: inline-block;
    }
    .understand .img-top {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
    }
    .understand:hover .img-top {
        display: inline;
    }
</style>

<script>
    function onHover()
    {
        $("#patience").attr('src', 'img/standandwait.gif');
    }

    function offHover()
    {
        $("#patience").attr('src', 'img/sitandwait.gif');
    }
</script>

<script>
function clockTick()    {
       currentTime = new Date();
       month = currentTime.getMonth() + 1;
       day = currentTime.getDate();
       year = currentTime.getFullYear();
      document.getElementById('date').innerHTML=month + "/" + day + "/" + year;
    }
    
    setInterval(function(){clockTick();}, 1000);
</script>

<!--<style>
@media only screen and (orientation: portrait){
  html {
   transform: rotate(90deg);
   width: 2500px;
   zoom: 41.5%;
   display: flex;
   position: absolute;
   right: 0%;
}
}
</style>-->

<style>
.example1:hover {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
</style>

<style>
::-webkit-scrollbar {
  width: 20px;
}


::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 

::-webkit-scrollbar-thumb {
  background: #3d60e0; 
  border-radius: 10px;
}


::-webkit-scrollbar-thumb:hover {
  background: #3d60e0; 
}

}
</style>

<style>
.player.active .play{
		display: none;
	}

	.player.active .pause{
		display: block;
	}

	.player .play{
		display: block;
	}

	.player .pause{
		display: none;
	}
</style>

<style>
.speech-bubble {
  position: relative;
  background: #ffffff;
  border-radius: .4em;
  width:300px;
  display:flex;
  flex-direction:column;
  align-items:center;
  color:white;
}

.speech-bubble:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-top-color: #ffffff;
  border-bottom: 0;
  margin-left: -20px;
  margin-bottom: -20px;
}
</style>
    
   <style>
.diary:hover{
    color: #111; 
    filter: drop-shadow(0px 0px 20px #00AAFF);
}

.collection:hover{
    color: #111; 
    filter: drop-shadow(0px 0px 20px #CB61FF);
}

.drawing:hover{
    color: #111; 
    filter: drop-shadow(0px 0px 20px #FFB828);
}

.gallery:hover{
    color: #111; 
    filter: drop-shadow(0px 0px 20px #BBEF4D);
}

.game:hover{
    color: #111; 
    filter: drop-shadow(0px 0px 20px #03c0ff);
}

.memorial:hover{
    color: #111; 
    filter: drop-shadow(0px 0px 20px #CA2020);
}

.neoprofile:hover{
    color: #111; 
    filter: drop-shadow(0px 0px 20px #FF9620);
}

.guestbook:hover{
    color: #111; 
    filter: drop-shadow(0px 0px 20px #63CD2F);
}

.sitemap:hover{
    color: #111; 
    filter: drop-shadow(0px 0px 20px #3C71FF);
}
    </style> 
 
<style>
.neon {
  border: none;
  margin: 0 auto;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
 </style>
 
 <style>
 .zoom{
  cursor:url('https://dropandspindash.neocities.org/soniccursor.png'), pointer;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
}
.zoom:hover {
    transform: scale(1.5);
}

.welcome:pointer {
events: none
}
 </style>

<style>
a:link {
  color: #1D3D94;
  background-color: transparent;
  text-decoration: underline dotted;
}

a:visited {
  color: #1B2B59;
  background-color: transparent;
  text-decoration: underline dotted;
}

a:hover {
  color: #bde2ff;
  background-color: transparent;
  text-decoration: underline dotted;
}

</style>
 
<style>
hr.cool {
  border: 3px solid darkblue;
  border-radius: 3px;
}
</style>
 
 <style>
 table.colorFade {
background: rgb(159,198,249);
background: linear-gradient(0deg, rgba(159,198,249,1) 0%, rgba(76,147,240,1) 50%);
}
</style>

<style>
.sign {
      position: fixed;
      bottom: 0px;
      right: 0px;
      repeat: no-repeat;
</style>
 
 <!--CSONIC TABLE START-->
        <style>
            #popupDialog {
                display: none;
                width: 1400px;
                position: fixed;
                top: 50%;
                left: 50%;
                background-image: url('https://dropandspindash.neocities.org/sogbg.png');
                background-size: cover;
                background-repeat: no-repeat;
                transform: translate(-50%, -50%);
                padding: 20px;
                border: 10px solid white;
                border-radius: 10px; 
                box-shadow: 0 4px 20px
                    rgba(0, 0, 0, 0.1);
                z-index: 1;
                overflow: hidden;
            }
            
      #popupabout {
                display: none;
                width: 1400px;
                position: fixed;
                top: 50%;
                left: 50%;
                background-color: #4C93EF;
                background-size: cover;
                background-repeat: no-repeat;
                transform: translate(-50%, -50%);
                padding: 20px;
                border: 10px solid white;
                border-radius: 10px; 
                box-shadow: 0 4px 20px
                    rgba(0, 0, 0, 0.1);
                z-index: 1;
                overflow: hidden;
            }

            #overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.1);
                z-index: 1;
            }

            h1 {
                color: green;
            }
                    </style>
                    
<style>

ul {
list-style: "★";
}

.clear {
background: rgba(255,255,255,0.6);
border: 0px;
  border-radius: 10px; 
  border-spacing: 0;
}

hr.classic {
  border: 3px dashed black;
  border-radius: 3px;
}
</style>

<style>
 .zoom{
  cursor:url('https://dropandspindash.neocities.org/soniccursor.png'), pointer;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
}
.zoom:hover {
    transform: scale(1.1);
}

 </style>


<style type="text/css">
@font-face {
    font-family: "IntrepidExtraBold";
    src: url(https://file.garden/ZrDpxp71hQsu22yP/IntrepidExtraBold.ttf), format("truetype");
}
.superdrive { 
    font-family: "IntrepidExtraBold";
}
</style>

<style type="text/css">
@font-face {
    font-family: "SourceSansProSemibold";
    src: url(https://file.garden/ZrDpxp71hQsu22yP/SourceSansProSemibold.otf), format("opentype");
}
.philo { 
    font-family: "SourceSansProSemibold";
}


.nobar::-webkit-scrollbar{
    width: 0px;
}
</style>
<!--CSONIC TABLE END-->

 <style>


.galaxy {
    background-color: transparent;
}

.nova {
    position: absolute;
content: url("fx.png");
    transform: scale(0);
    animation: starburst 0.4s linear;
    z-index: 1;
}

@keyframes starburst {
    to {
        transform: scale(0.10);
        opacity: 0;
    }
}

    </style>
  
<style>
.aboutsettings {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.1);
}

.about {
  background: url('https://dropandspindash.neocities.org/oldbackground.png');
  background-size: 100%;
  margin: auto;
  padding: 20px;
  border: 7px solid #01008A;
  border-radius: 10px;
  width: 50%;
}
</style>  
  
<style>

.stars {
 position: absolute;
	z-index: -1;
	width: 400%;
}
</style>


<!-- END -->

<script type="text/javascript">
  function pet() {
    window.location.href = "https://gifypet.neocities.org/pet/pet.html?name=Sonic&dob=1711834620&gender=m&element=Air&pet=https%3A%2F%2Fdropandspindash.neocities.org%2Fchibi.gif&map=https%3A%2F%2Ffiles.catbox.moe%2F89kh1o.png&background=https%3A%2F%2Ffiles.catbox.moe%2F0dr5gb.png&tablecolor=%23000000&textcolor=black";
  }
</script>
 
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
    <link href="/confetti.css" rel="stylesheet" type="text/css" media="all">
  </head>
  
  <body class="meteors meteolors" style="background: url('bg1.png'); background-size: contain;">

  <center><img width="500" src="logo.png"></center>
  
 <table align="center">
  <tr>
    <th><a href="https://dropandspindash.neocities.org/diary/"><img class="vert-move; diary neon" width="195" src="diarybutton.png"></a> <a href="https://dropandspindash.neocities.org/mycollection"><img class="vert-move; collection neon" width="195" src="collectionbutton.png"></a> <a href="https://dropandspindash.neocities.org/artmuseum/"><img class="vert-move; drawing neon" width="195" src="artmuseum.png"></a> <a href="https://dropandspindash.neocities.org/photosgallery/"><img class="vert-move; gallery neon" width="195" src="photosbutton.png"></a> <a href="https://dropandspindash.neocities.org/gameroom/"><img class="vert-move; game neon" width="195" src="gameroombutton.png"></a> <a href="https://dropandspindash.neocities.org/memorial/"><img class="vert-move memorial neon" width="195" src="memorialbuttonn.png"></a> <a href="https://neocities.org/site/dropandspindash"><img class="vert-move; neoprofile neon" width="195" src="neocitiesprofilebutton.png"></a>  <!--<a href="https://dropandspindash.atabook.org/">--><img title="The Guestbook is currently unavailiable." class="vert-move; guestbook neon" width="195" src="Guestbookbutton.png"><!--</a>--> <a href="https://dropandspindash.neocities.org/sitemap"><img class="vert-move; sitemap neon" width="195" src="sitemapbutton.png"></a>
    
<img id="open" width="195" src="about.png">
<div id="aboutwindow" class="aboutsettings">
  <div class="about">
    <table align="center" class="clear">
	<tr>
	<img align="center" width="200" src="abouttitle.png">
	<td>
	<h2 align="center">
Drop n' Spin Dash!!! is just a "love letter" adressed to Classic Sonic, my comfort and (most) favorite fictional character. In other words: A Classic Sonic fansite.
<br><br>
The thing that made me love Classic Sonic is <div title="The Sonic Mania pre-order trailer"><a href="https://www.youtube.com/watch?v=wvD8NZN9Zsg">this video.</a></div> I'm ashamed to admit this but I was watching it over and over for days, it litterally changed me and had a huge impact on my life. (Thank you Classic Sonic and Sonic Mania for making me the person I am today)
<br><br>
I enjoy showing and talking about things I love to people and since I'm veeery open <i>-and very annoying according to some people-</i> about how much I love Classic Sonic, I felt like making a website centred on him. I was seeing this silly-funny project as the utmost way to show people how much I love and care about him. If words aren't enough to express these feelings then a website will be enough.
<br><br>
So I started building this website in January 2023. I had basic knowledge in HTML and no knowledge in CSS back then so it was hard and kinda scary to work on it--- It took me three months to finish this and I was really proud of this. Since then I've been adding stuff to the website (a bit) often: Merch I've bought, drawings, pictures, relaying official news and content about him. I also share Sonic content that isn't related to him but I rarely do this for reasons that I think are easily guessable.
<br><br>
I deem this website to be my "magnum opus" and despite not showing nor saying it (because I don't like being prideful), I'm very proud to have made this website. Even if I'm not part of the Sonic (Twitter) community anymore after staying in it for 4 years, I still love Classic Sonic and will never miss an opportunity to be loud and open about this.</h2>
<br>
<h4 align="center"><i>I think if Classic Sonic would see my website, he would say "Wow!! That's the coolest fansite ever!! Whoever made this is an amazing fan!!" and this makes me very happy.</i></h4>
	</td>
	</tr>
	</table>
	<br>
	<center><span class="close"><img class="zoom" width="200" src="https://dropandspindash.neocities.org/closebutton.png"></span></center>
  </div>
</div>
       
    
 </th></tr></table>
   <br>
   <br>
   <br>
<!-- INTRO -->
    
  <table align="center">
  <tr>
    <th><center><table class="roundedCorners" align="center" bgcolor="4C93F0" border="0" cellpadding="0" cellspacing="0" width="10%">
     <tr>
    <th>
    <img align="center" width="250" src="linkmebutton.png">
    <center><i>Ver. 1 buttons</i><br><a href="https://dropandspindash.neocities.org/DnSDbutton1.gif"><img width="60%" src="DnSDbutton1.gif"></a><a href="https://dropandspindash.neocities.org/DnSDbutton2.gif"><img width="60%" src="DnSDbutton2.gif"></a><hr class="cool"><i>Ver. 2 buttons</i><br><a href="https://dropandspindash.neocities.org/dnsdv2-button1.gif"><img width="60%" src="dnsdv2-button1.gif"></a><a href="https://dropandspindash.neocities.org/dnsdv2-button2.gif"><img width="60%" src="dnsdv2-button2.gif"></a></center><br>More resources to use for linking my website are available <a href="https://dropandspindash.neocities.org/resources">here!!</a><br><br><img align="center" width="180" src="links.png"></th>
   </table><center><br><table class="roundedCorners" align="center" bgcolor="4C93F0" border="0" cellpadding="0" cellspacing="0" width="50%">
 <tr>
    <th>
<img align="center" width=300 src=wpcwebsites.png>
<br><center> <div style="height:175px; width:300px; border:0px solid; overflow:auto;"> <a href="http://www.hiyaaxp.tk"><img src="hiyaaxp_88x31_btn.png"></a> <a href="https://michaelktv.neocities.org/"><img src="michealktv.png"></a>  <a href="https://trashcat004.neocities.org/"><img src="The Dump By TRASHCAT.png"></a> <br> <a href="https://rayofhope.neocities.org/"><img src="rayofhope.gif"></a> <a href="https://radiationcat.neocities.org/"><img src="radinow.png"></a> <a href="https://arlita.neocities.org/"><img src="arlita.gif"></a> <br> <a href="https://garudyne.neocities.org/"><img src="button (1).gif"></a> <a href="https://feelingmachine.moe/"><img src="feelingmachine.gif"></a> <a href="https://xp-zone.neocities.org/" target="_blank"><img src="https://xp-zone.neocities.org/button.gif"></a> <br> <a href="https://lime360.neocities.org/"><img src="lime360_button.gif"></a> <a href="https://44nifty.com/"><img src="v5-banner.png"></a> <a href="https://ralts.neocities.org/"><img src="https://ralts.neocities.org/88x31.png"></a> <br> <a href="https://kitsunami.neocities.org/"><img src="sa2button.gif"></a> <a href="https://daniele63.neocities.org/"><img src="danieles_button.jpg"></a>  <a href=https://cdjam.neocities.org/><img src="Untitled253.png"></a> <br> <a href="https://empeethree.neocities.org/"><img src="https://empeethree.neocities.org/icons/SEFY.png"></a> <a href="https://shwintykat.neocities.org/"><img src="C32hWb6.png"></a>   <a target="_blank" href="https://lopster.neocities.org/"><img alt="Lopster Button" src="https://lopster.neocities.org/buttons/88x31.gif"></a>  
<br><a href="https://amihan.neocities.org/" target="_blank"><img src="https://amihan.neocities.org/images/button2.png"></a> <a href="https://lulu3xx.neocities.org/"><img src="ezgif-1-01c9a559bc.png"></a> <a href="https://milo-html.neocities.org/" target="_blank"><img src="https://milo-html.neocities.org/graphics/milo-html-button.gif" alt="milo-html"></a><br><a href="https://hellokittyminigun.neocities.org/"><img src="8n67bk.png"></a> <a href="https://blueraccoon.neocities.org"><img width="88" src="https://blueraccoon.neocities.org/bannana2.png"></a><a href="https://superkirbylover.neocities.org" target="_parent"><img src="sitebutton.gif" alt="Site Button"></a><br><a href="https://frogsfootcyrus.neocities.org/"><img src="ffcyrusbutton.gif"></a> <a href="https://jeith.neocities.org/"><img src="https://jeith.com/assets/neocities/jeith.gif" alt="jeith"></a><a target="_blank" href="https://cyberealm.neocities.org/"><img src="https://cyberealm.neocities.org/images/cyberealm.gif"></a> <br> <a href="https://bluescreening.neocities.org/"><img src="bluescreeningbutton.gif"></a> <a href="https://magneticdogz.neocities.org/" target="_blank">
<img src="https://magneticdogz.neocities.org/banner2.gif"></a> <a href="https://ohrade.neocities.org/"><img src="https://ohrade.neocities.org/OHRADEBUTTON.gif"></a> <br> <a href="https://goooby.neocities.org/"><img src="https://goooby.neocities.org/goobie_button.gif"></a> <a href="https://milestailsprower.neocities.org/"><img src="sitebutton.png"></a> <a href="https://enderisaaccore.neocities.org/"><img src="https://enderisaaccore.neocities.org/images/buttons/enderisaaccorebutton.gif"></a> <a href="https://shinyexe.neocities.org"><img src="mybutton.gif"></a> <a href="https://pinkfluffyunicornss.neocities.org/" target="_blank"><img src="Pinkfluffy897.png"></a> <a href="https://crisis.city" target="_blank"><img src="crisis.city.png" alt="crisis.city"></a> <br> <a href="https://crashtestdummy.neocities.org"><img src="tha_button.gif"></a> <a href="https://butt0n-z.neocities.org/"><img src="buttonzsite.png"></a> <a href="https://lorekeeping.neocities.org/"><img src="lorekeepingbutton.png"></a> <br> <a href="https://mezucore.neocities.org/"><img width="88" src="mezucorebutton.png"></a> <a href="https://foggybear42.neocities.org" target='_blank'><img width="88" src="foggybear.gif"></a><a href="https://nickolox.neocities.org/"><img src="https://nickolox.neocities.org/img/banner.gif"></a> <br> <a href="https://ctrl64.neocities.org/"><img src="https://files.catbox.moe/0kgg93.png"></a> <a href="https://somecaninething.neocities.org/" > <img width="88" src="https://somecaninething.neocities.org/index/gifmaker_me.gif" alt="https://somecaninething.neocities.org/"> <a href="https://heliosaltar.neocities.org/"><img src="yu14md.gif"></a> <br> <a href="https://momolover.neocities.org/" target="_blank"><img src="https://momolover.neocities.org/images/momoloverbutton.gif" width=88></a> <a href="https://cutelovelycove.neocities.org/"><img width="88" src="https://cutelovelycove.neocities.org/button.png"></a> <a href="https://surpurp.neocities.org/"><img width="88" src="surpurpbutton.png"></a> <br> <a href="https://seraphix.neocities.org" target="_blank"><img src="https://seraphix.neocities.org/imgs/buttons/seraphix-button.gif" style="image-rendering: pixelated"></a> <a href="https://mspaintdemon.neocities.org/"><img src="bb%20buttton.png"></a> <a href="https://mostpowerfrog.neocities.org/" target="_blank"><img src="https://mostpowerfrog.neocities.org/88x31psychics11.png"></a> <br> <a href="https://ragmothy.neocities.org/"><img src="https://ragmothy.neocities.org/RagButton.gif"></a> <a href="https://lemonbaskets.neocities.org"><img src="https://files.catbox.moe/17w3nn.png"></a> <a href="https://fanblogcomic.neocities.org/"><img width="88" src="fanblogcomic.png"></a> <br> <a href='https://strawbebby228.neocities.org/' target='_blank'><img src='https://strawbebby228.neocities.org/arts/UI/ButtonRed.gif'></a> <a href="https://mleko.neocities.org/" target="_blank"><img src="https://files.catbox.moe/s2e1uv.png"> <a href="https://macaque.moe/"><img src="https://i.imgur.com/iZ0CnXD.png"></a> <a href="https://meicheesecake.neocities.org/"><img width="88" src="mybadge.gif"></a> <a href="http://softteddypaws.neocities.org" target="_blank"><img src="teddypawsbanner.gif" alt="Soft Teddy Paws"></a> <a href="https://darusival.neocities.org/"><img src="button_darusival_new.png"></a> <br> <a href="https://www.penguinjaa.com/" target="_blank"><img src="https://files.catbox.moe/zjn8qa.gif"></a> <a href="https://novaentertainment.neocities.org/"><img src="novabuttonV1.png"></a> <a href="https://ziggybeeps.neocities.org/"><img src="ziggybeeps.gif"></a> <br> <a href="https://wackyworkbench.neocities.org/"><img src="https://64.media.tumblr.com/907e93b6de2509e3d83c90c15214085a/94435935d2a296c9-12/s100x200/76e941aa2750dfb9ce131790cd2b601dc931e2fc.png" /></a> <a href="https://auroraicefield.neocities.org/"><img src="https://64.media.tumblr.com/1c5e00bf3784d15ec034732c47284ce9/fc91cb67476a8b95-2b/s100x200/d88b412b123c1d2177cc4fdb1ba8bcc648fbe936.png"/></a> <a img src="https://64.media.tumblr.com/1c5e00bf3784d15ec034732c47284ce9/fc91cb67476a8b95-2b/s100x200/d88b412b123c1d2177cc4fdb1ba8bcc648fbe936.png" /></a> <a href="https://rabbitearsblog.neocities.org/"><img src="https://64.media.tumblr.com/ef93b3141eb6d606cd3693afe871b644/aaa6ddf0e95dec6a-b0/s100x200/f7549024ecb6ca585592571681241b58ba073134.pnj"/></a> <br> <a href="https://badgraph1csghost.neocities.org/"><img src="button_bnc8s.png"/></a> <a href="https://jaggiescrapper.neocities.org/" target="_blank"><img src="https://jaggiescrapper.neocities.org/jaggiescrapper.gif" alt="Jaggie Scrapper" title="General guide for retro fighting games"></a>  <a href="https://serenefork.neocities.org/"><img src="serenefork.png"></a> <br> <a href="https://infobear.neocities.org/"><img width="88" src="BUTT.gif"></a> <a href="https://lunasn0wfall.neocities.org/"><img width="88" src="pawjob.gif"></a> <a href="https://billeast1984.neocities.org/"><img width="88" src="Button88x31.gif"></a> <br> <a href="https://manyface.neocities.org/"><img src="button1.png"></a> <a href="https://cyadical.neocities.org"><img src="https://i.ibb.co/TWvFMF4/New-Project-144.gif" style="height:31px; width:88px;"/></a> <a href="https://ikaroll.neocities.org/"><img src="ikarollbutton.gif"></a> <br> <a href="https://stupidgamer201.neocities.org/"><img src="sg201.png"></a> <a href="https://gremlin.neocities.org/"><img src="gremlin.png"></a> <a href="https://slaid.neocities.org/"><img src="slaibeach8.png"></a> <br> <a href="https://geouniversal.neocities.org/"><img src="geouni.gif"></a> <a href="https://sp1nningn4ils.neocities.org/"><img src="IMG-5965.gif"></a> <a href="https://madewithrealsugar.neocities.org"><img src="madewithrealsugar.gif"> <br> <a href="https://divsel.neocities.org/"><img src="divsel-ani.gif"> <a href=https://lemontchi.neocities.org> <img src=https://lemontchi.neocities.org/lemontchibutton.gif></a> <a href="https://foosybit.neocities.org/" target="_blank"><img src="foosybit.gif"></a> <br> <a href="https://pearliasystem.neocities.org/" target="_blank"><img src="perlia.png" style="width:88px; height:31px;" alt="'Planet Pearlia Site!"></a> <a href="https://dustedpink.neocities.org/"><img src="29LiLyW.png"></a> <a href="https://snoopy-sauce.neocities.org/"><img src="image0.gif"></a> <br> <a href="https://tvkid.online/"><img src="tvbutton3.gif"></a> <a href="https://tectrix.neocities.org/"><img src="buttons.png"></a> <a href=https://dudderbutter.neocities.org/ target="_blank"><img width="88" src="dolphin.png"></a> <br> <a href="https://blackopskoopa.neocities.org/"> <img src="https://blackopskoopa.neocities.org/buttons/download%20(2).png"></a> <a href="https://klonpa.neocities.org/"><img src="pecheneobanner3.gif"></a> <a href="https://riversideee.neocities.org"><img src="https://riversideee.neocities.org/images/site_assets/riversideee.gif"></a> <br> <a href="https://shiningforcelibrary.neocities.org/"> <img src="button_simone.png"></a> <a href="https://bearycremedelight.neocities.org/"><img src="https://bearycremedelight.neocities.org/graphics/bcdelight.gif"></a> <a href="https://cutiesuccubus.neocities.org"><img src="cutiesuccubusbutton.gif"></a> <br> <a href="https://sonicbluecore97.neocities.org/"><img src="NeoButton-2.gif"></a> <a href="https://psychout10.neocities.org/"><img src="animatedbutton.gif"></a> <a href="https://aetherspace.neocities.org/"><img src="aether_button_2.gif"></a> <br> <a href="https://dark5tars.neocities.org/"><img src="https://i.ibb.co/17djkby/Untitled-Artwork-20.gif"></a> <a href="https://tny.neocities.org/"><img width="88" src="https://file.garden/ZcgYpW7FDVXMfo_y/tiny/tinygif.gif"></a> <a href="https://mxbo.neocities.org"><img src="6tHd1Mx.gif"></a> <br> <a href="https://dannkestreet.neocities.org/"><img src="https://files.catbox.moe/vbnauh.gif"></a> <a href="https://thiscat.neocities.org/"><img src="01button.png"></a> <a href="https://cannibalpilled.neocities.org/"/><img src="https://monstrrcore.carrd.co/assets/images/image25.png?v=3e4ed849"/></a> <br> <a href="https://melody-nomas.neocities.org/"><img src="melodynomas.png"></a> <a href="https://dibs.neocities.org/"><img src="dibsitpool.gif"></a> <a href="https://westopolis.neocities.org/" target="_blank"><img src="https://westopolis.neocities.org/westopolis_stamp.png"></a> <br> <a href="https://kitnomaly.neocities.org/"><img src="orlosd.png"></a>
			
</div></center><br><img align=right width="300" src="together.png"> 
</th>
</TR>
</TABLE><br><table class="roundedCorners" align="center" bgcolor="4C93F0" border="0" cellpadding="0" cellspacing="0" width="50%">
 <tr>
    <th>
<center><img width="300" src="memberships.png"><center>
<br><center><div style="height:200px; border:0px solid; overflow:auto;">
<script src="https://webringzone.neocities.org/webring.js"></script>
          <ring-526 site="https://dropandspindash.neocities.org/"></ring-526><center/>
          <br>
          <center><!--START OF SELF INSERT WEBRING-->
			<div id="selfinsertwebring">
				<script src="showWebring.js"></script>
			</div>
			<!--END OF SELF INSERT WEBRING--></center>
			<br>
			<div style="width: 135px; /* <- Set any width you'd like! */">
        <script src="https://jeith.neocities.org/assets/webring/wii-ring.js"></script>
        <wii-ring site="https://dropandspindash.neocities.org"></wii-ring>
    </div>
			<br>
			<a href="https://midifreak.online/tomodachi">
<img align="center" src="https://midifreak.online/aptbutton.gif"></a>
<br>
<link rel="stylesheet" href="https://ikaroll.neocities.org/dsring/onion/onionring.css">
<div id='dsring'>
<script type="text/javascript" src="https://ikaroll.neocities.org/dsring/onion/onionring-variables.js"></script>
<script type="text/javascript" src="https://ikaroll.neocities.org/dsring/onion/onionring-widget.js"></script>
</div>


    <br>
			<hr class="cool">
			<br>
			<center><a href="http://rhythm-emotion.net/sonic"><img src="sonic1005026.png"></a><a href="http://www.ladyrose.buruma.net/3ds"><img src="270_nintendo3ds.png"></a><a href="https://lovesick.cafe/grrrl">
<img align="center" src="madebya-bloo.png"></a>
			</center>
			</div>
			<img align="left" width="250" src="browsing.png">
			</th>
</TR>
</TABLE></th>
    <th><table class="roundedCorners" align="center" border="0" cellpadding="5" cellspacing="0" width="50%">
<tr>

  <th bgcolor="4C93F0" style="position:relative;"><img width="200" src="StarDecoUL.png" style="position:absolute; margin-left:-85px; top:-70px;"><img width="400" src="welcomebutton.png" style="pointer-events:none; position:absolute; margin-left:200px; top:-50px;"><img width="200" src="StarDecoBR.png" style="position:absolute; margin-left:685px; bottom:-70px;">
  
  
  <img class="img:hover" width="800" src="entry.png">
  

<BR>
  
  <audio id="track" autoplay loop>
  <source src="https://file.garden/ZrDpxp71hQsu22yP/menu.mp3"/>
</audio>

<script>
  var audio = document.getElementById("track");
  audio.volume = 0.3;
</script>

<div id="player-container">
  <div id="play-pause" class="play"><img width="75" src="https://files.catbox.moe/a8wr8a.png">Click on the icon to play/pause the music!</div>
</div><i>♫ - Main Menu [Sonic Mega Collection]</i>

<script src="audioplayerscript.js"></script>
  <br>
  <br><center><img width="50" src="chibi.gif"> <span id="hitcount"></span> <a data-url="https://gifypet.neocities.org/pet/pet.html?name=Sonic&dob=1711834620&gender=m&element=Air&pet=https%3A%2F%2Fdropandspindash.neocities.org%2Fchibi.gif&map=https%3A%2F%2Ffiles.catbox.moe%2F89kh1o.png&background=https%3A%2F%2Ffiles.catbox.moe%2F0dr5gb.png&tablecolor=%23000000&textcolor=black" onclick="pet()"><img oncontextmenu="return false;" width="50" src="chibi.gif"></a></center><br><u>There are 16 secrets in the website!</u></th>
   </tr>
   </table>
   
   <br>
   
   <center><table>
   <tr>
   <td>
   <table class="roundedCorners colorFade" align="center" bgcolor="4C93F0" border="0" cellpadding="0" cellspacing="0" height="200" width="100">
    <tr>
    <th background="signbg.png" align="left"><center><img width="300" align="center" src="updatesbutton.png"></center>
    <div style="height:300px; width:600px; border:0px solid; overflow:auto;">
    <p hidden>Last Updated: <span id="lastupdate"></span></p>
    [03/03/25] It's already March... Time goes by too fast and it makes it more hard for me to regulary update the website... I archived the updates logs of February in the "Memorial" 's page "Update Logs archives" sub-page and I fixed displaying issues in the "Scribbles" sub-page and the "Diary" and "Art Museum" pages.
    </div>
    </th>
    </tr>
    </table>
   </td>
   </tr>
   </table></center>
   
   <br>
   
   <center><table>
   <tr>
   <td>
   <table class="roundedCorners" align="left" bgcolor="4C93F0" border="0" cellpadding="0" cellspacing="0" height="200" width="100">
    <tr>
    <th width="300" align="center">
    <img width="300" src="specialbutton.png">
    <br><br><br>
  <img id="patience" oncontextmenu="return false;" onmouseover="this.src='standandwait.gif'" onmouseout="this.src='sitandwait.gif'" src="sitandwait.gif" width="auto">
<br><br><br><br>There's nothing... for now!
<br>

<!--<div style="height:350px; width:375px; border:0px solid; overflow:auto;">

<hr class="cool">-->
<!--</div>-->
    </th>
    </tr>
    </table>
    

    
<table align="left" border="0" cellpadding="0" cellspacing="0" height="200" width="100">
    <tr>
    </th>
    </tr>
    </table>
    
    <table class="roundedCorners" align="center" bgcolor="4C93F0" border="0" cellpadding="0" cellspacing="0" height="200" width="100">
    <tr>
    <th align="center">
    <img width="400" src="spotlightbutton.png">
    <br>
  <a href="https://files.catbox.moe/34v1is.jpg"><img width="300" src="https://files.catbox.moe/34v1is.jpg"></a>
  <br>
 Promotional image of SegaSonic the Hedgehog yo-yos
  <br><br>
  ※ <i>Click on the image to see it in full size!</i>
    </th>
    </tr>
    </table>
    
    
   </td>
   </tr>
   </table></center>
   
   <table>
   <tr>
   <td>
   </table></th><th><table class="roundedCorners" align="center" bgcolor="4C93F0" border="0" cellpadding="5" cellspacing="0">
    <tr>
    <th>
    <center><img oncontextmenu="return false;" width="180" src="poll.png"></center><br><center>
    <div class="speech-bubble">
<!--<h3 style="color:black;">
No poll available for now!</h3>-->
 
<form method="post" action="https://poll.pollcode.com/88398284"><div style="background-color:#FFFFFF;padding:2px;width:180px;font-family:Montserrat;font-size:medium;color:#000000;"><div style="padding:2px 0px 4px 2px;"><strong>Do you like Classic-era Sonic content?</strong></div><input type="radio" name="answer" value="1" id="answer883982841" style="float:left;" /><label for="answer883982841" style="float:left;width:150px;">Yes!</label><div style="clear:both;height:2px;"></div><input type="radio" name="answer" value="2" id="answer883982842" style="float:left;" /><label for="answer883982842" style="float:left;width:150px;">A little...</label><div style="clear:both;height:2px;"></div><input type="radio" name="answer" value="3" id="answer883982843" style="float:left;" /><label for="answer883982843" style="float:left;width:150px;">No!</label><div style="clear:both;height:2px;"></div><div align="center" style="padding:3px;"><input type="submit" value=" Vote ">&nbsp;<input type="submit" name="view" value=" View "></div><div align="right" style="font-size:10px">pollcode.com <a href="https://pollcode.com/">free polls</a></div></div></form>

</div><br><br><img class="think" width="175" src="thinking.gif"><!--<br>※ <i>Note: Multiple answers can be selected!</i><--></center></th>
    </tr>
    </table><BR>
    <table class="roundedCorners" align="center" bgcolor="4C93F0" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <th>
    <center><img width="300" src="chatboxbutton.png"></center><br><iframe src="https://www5.cbox.ws/box/?boxid=940877&boxtag=iV1B5M" width="400" height="400" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe><br><br><img width="175" src="communication.png"></th>
    </table>
    <br><table class="roundedCorners" align="center" bgcolor="4C93F0" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <th>
    <center><img width="220" src="global.png"></center>
    <!--<div style="height:400px; width:450px; border:0px solid; overflow:auto;">-->
    <br>Hello! Today is<div id="date">MM/DD/YYYY</div>-<div id="clock">0:00:00</div><script src="clock.js"></script><br><a href="https://info.flagcounter.com/3Tbf"><img src="https://s01.flagcounter.com/map/3Tbf/size_s/txt_000000/border_CCCCCC/pageviews_0/viewers_0/flags_1/" alt="Free counters!" border="0"></a>
    <br>
    <!-- FC2 Clap tag starts here -->
<center><a href="//clap.fc2.com/post/dropnspindash/?url=https%3A%2F%2Fdropandspindash.neocities.org%2F" target="_blank" title="Web Clap by FC2"><img width="125" src="//clap.fc2.com/images/button/blue/dropnspindash?url=https%3A%2F%2Fdropandspindash.neocities.org%2F&amp;lang=en" alt="Web Clap by FC2" style="border:none;" /></a></center>
<!-- FC2 Clap tag ends here -->
<img align="center" width="200" src="test1.png">
    </th>
    </tr>
    </table>
    </tr>
    <tr>
    </tr></table>
    
    </th></tr></table>
    
 
   
<!-- MIDDLE ELEMENTS -->
   
<!--caroussell-->

<table class="roundedCorners" align="center" bgcolor="4C93F0" border="0" cellpadding="5" cellspacing="0" height="100" width="1000">
    <tr>
    <td><img align="left" width="300" src="powersource.gif"> <br> <h4 align="center">This is Classic Sonic <br> He's powering the website by running fast!</h4>
    
   <h2 align="center" onclick="popupFn()"><u>
        Who?
        </u></h2>
        <div id="overlay"></div>
        <div id="popupDialog">
        <center><img width="300" src="soniclogo.png"><center>
        <div title="He never said that."><h1 class="superdrive" style="color:#FFFFFF;">"Faster than the speed of sound! Gotta go fast!"</h1></div>
        <table border="0" class="clear">
        <tr border="0">
        <th border="0" class="nobar">
        <img width="300" src="csonic.png"><br><h3 class="philo"><i>Classic Sonic as he appears in the animated cutscenes of Sonic Origins (2022)</i></h3>
        </th>
        <th border="0" class="nobar">
        <h2 class="philo">
        <ul border="0">
        <li align="left">Name: Sonic</li>
        <li align="left">Gender: Male</li>
        <li align="left">Age: 15</li>
        <li align="left">Height: 100cm/3.3ft</li>
        <li align="left">Weight: 35kg/77lbs</li>
        <li align="left">Physical description: Blue spikes, peach skin, black eyes. Wears white gloves and socks & red running shoes with white straps</li>
        <hr class="classic">
        <li align="left">Personality: Kind, Cool, Adventurous, Impulsive</li>
        <li align="left">Likes: Going fast & things that moves fast, Music (Rock), Chili-Dogs, Freedom</li>
        <li align="left">Dislikes: Evil, Tears, Water, Waiting</li>
        <hr class="classic">
        <li align="left">First seen in: Rad Mobile (1990)</li></ul>
        </h2>
        <h2 align="left" class="philo"><s>A Sonic from another dimension</s> Sonic's younger self. An impatient small blue hedgehog from Christmas Island who runs very fast and loves going on adventures, whenever it's to put a stop to Eggman's plans or to help people. He has impressive acrobatic skills and an outstanding strengh in addition to his ability to harness the energy of the Chaos Emeralds to turn into "Super Sonic". He has a strong brotherly bound with his best friend Miles "Tails" Prower, a friendly rivalry with Knuckles and an ambiguous friendship with Amy Rose.</h2>
        </th>
        </tr>
        </table> 
            <center><img class="zoom" width="225" src="closebutton.png" onclick="closeFn()"></center>
        <script>
            function popupFn() {
                document.getElementById(
                    "overlay"
                ).style.display = "block";
                document.getElementById(
                    "popupDialog"
                ).style.display = "block";
            }
            function closeFn() {
                document.getElementById(
                    "overlay"
                ).style.display = "none";
                document.getElementById(
                    "popupDialog"
                ).style.display = "none";
            }
        </script>
    
   </td>
    </tr>
    </table>


<!-- LOW ELEMENTS -->

<br>

 <!-- END -->
 <table align="center" class="clear">
    <tr>
    <td>
    <h4 align="center"><i>Drop n' Spin Dash!!!<br>2023 - 2025</i></h3>
    </td>
    </tr>
    </table>
<!--<div title="just noticed that my silly website have been added to the wayback machine (the web archive) so to the person who did this: thank you so much lol :')">-->

<br>

    <center><div title="You can't Drop n' Spin Dash without Sonic Speed!!!"><img src="sillybutton.png"></div><center>


<script>
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var site_data = JSON.parse(this.responseText);
      var num_arr = site_data.info.views.toString().split("");
      var num_str = "";
      for (i = 0; i < num_arr.length; i++) {
        num_str += `<img src="counter/c` + num_arr[i] + `.gif"/>`;
        if ( (num_arr.length-1 - i) % 3 == 0 && (num_arr.length-1 - i) != 0 ) {num_str += " ";}
      }
      document.getElementById("hitcount").innerHTML = num_str;
    }
  };
  xhttp.open("GET", "https://weirdscifi.ratiosemper.com/neocities.php?sitename=dropandspindash", true);
  xhttp.send();
</script>

<script>
var modal = document.getElementById("aboutwindow");
var btn = document.getElementById("open");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
  modal.style.display = "block";
}
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

<script>
document.querySelector('.galaxy').addEventListener('click', function (e) {
    const ripple = document.createElement('span');
    const rect = this.getBoundingClientRect();
    const size = Math.max(rect.width, rect.height);
   
    ripple.style.width = ripple.style.height = `${size}px`;
    ripple.style.left = `${e.clientX - rect.left - size / 2}px`;
    ripple.style.top = `${e.clientY - rect.top - size / 2}px`;
    ripple.classList.add('nova');

    this.appendChild(ripple);

    setTimeout(() => {
        ripple.remove();
    }, 600); 
});
</script>


  </body>
</html>