body {
  background-image: url("/stripedbackground.png");
  background-size: cover;
  background-repeat: repeat;
  background-attachment: fixed; 
}
a:link, a:visited {
  color: #000;
}
a:hover, a:active {
  color: #000;
}
td {
  border: 5px solid #220033;
  padding: 10px;
  text-align: center;
  width: 200px;
}
.grid-container {
  display: grid;
  grid-template-areas:
  'head head head head'
  'nav nav nav nav'
  'side main main main'
  'social social social social'
  'foot foot foot foot';
  gap: 10px 15px;
  padding: 0px 75px;
  margin: 10px 173px;
  opacity: 1;
}
.grid-container > div {
  background-color: #A26FAD;
  opacity: 1.0;
  border: 5px solid #25084c;
  font-family: "Tahoma";
  font-size: 16px;
  color: black;
}
  .head {
    grid-area: head;
    width: 1000px;
  }
  .nav {
    grid-area: nav;  
    width: 96%;
    padding: 15px;
  }
  .main {
    grid-area: main;    
    width: 94.5%;
    padding: 15px;
  }
  .side {
    grid-area: side;    
    width: 200px;
    padding: 15px;
    align-items: center;
    text-align: center;
  }
  .social {
    grid-area: social;
    width: 96%;
    padding: 15px;
  }
  .foot {
    grid-area: foot;
  text-align: center;
    width: 1000px;
  }
  .title-jerk {
  animation: jerk 0.5s infinite;
  background: linear-gradient(to top, #eeccff 2%, #cc66ff 100%);
  font-family: "MS Gothic";
  font-style: bold;
  font-size:3em;
  font-weight:bold;
  text-align: center;
  opacity: 1;
  padding: 30px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}
      @keyframes jerk {
        0% {
          transform: rotate(2deg);
          }
        50% {
          transform: rotate(2deg);
          }
        51% {
          transform: rotate(-2deg);
          }
        100% {
          transform: rotate(-2deg);
          }
        }
.emoji {
  float:center;
  height:125px;
  margin:10px;
}
.tbhom {
  height: 200px;
  position: fixed;
  bottom: 0px;
  left: 1px;
}
      .tooltip {
        position: relative;
        display: inline-block;
      }
      .tooltip .tooltiptext {
        visibility: hidden;
        width: 100px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
      }
      .tooltip:hover .tooltiptext {
        visibility: visible;
      }
.art {
  height:275px;
}
.shadow {
  filter: drop-shadow(1px 1px 0 #694171) drop-shadow(-1px 1px 0 #694171) drop-shadow(0 2px 0 #694171) drop-shadow(0 -1px 0 #694171) drop-shadow(0 1px 1.5px #694171) drop-shadow(0 -1px 1.5px #694171) drop-shadow(1px -1px 1.5px #694171) drop-shadow(-1px -1px 1.5px #694171);
}
.scroll {
  width:700px;
  height:300px;
  line-height:1em;
  overflow:auto;
}
.aboutscroll {
  width:575px;
  height:300px;
  line-height:1em;
  overflow:auto;
  padding:5px;
}
.graphicscroll {
  width:900px;
  height:281px;
  line-height:1em;
  overflow:auto;
  padding:5px;
}
.miniscroll {
  width:180px;
  height:92px;
  line-height:1em;
  overflow:auto;
}
.title-sway {
  animation-name:sway;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  bottom: -5px;
  position: relative;
  z-index: 999;
  text-align: center;
  background: linear-gradient(to top, #eeccff 2%, #cc66ff 100%);
  padding: 30px;
  font-family: "MS Gothic";
  font-weight:bold;
  font-style:bold;
  font-size:3em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}
  @keyframes sway {
        0% {
          transform: rotate(
          5deg);
          }
        50% {
    transform: rotate(
      -5deg);
    }
    100% {
      transform: rotate(
      5deg);
    }
  }
.title-float {
  animation: float 4s infinite;
  background: linear-gradient(to top, #eeccff 2%, #cc66ff 100%);
  font-family: "MS Gothic";
  font-style:bold;
  font-size:3em;
  font-weight:bold;
  text-align: center;
  opacity: 1;
  padding: 30px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}
  @keyframes float {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }    
  }
.title-pop {
        animation: pop 0.5s infinite;
        background: linear-gradient(to top, #eeccff 2%, #cc66ff 100%);
        font-size:3em;
        font-weight:bold;
        opacity: 1;
        padding: 30px;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: black;
      }
      @keyframes pop {
        from {
          transform:scale(0.95)
        }
        50% {
          transform:scale(1)
        }
        to {
          transform:scale(0.95)
        }
      }
      @-webkit-keyframes pop {
        from {
         -webkit-transform:scale(0.95)
        }
        50% {
          -webkit-transform:scale(1)
        }
        to {
          -webkit-transform:scale(0.95)
        }
      }
.title-swirl {
  --color1: #eeccff;
  --color2: #cc66ff;
  -webkit-text-stroke: 1px black;
  background: repeating-linear-gradient(
    45deg,
    var(--color1),
    var(--color1) 30px,
    var(--color2) 30px,
    var(--color2) 60px
  );
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  font-size: 3em;
  text-align: center;
  animation: 40s linear 0s infinite move;
  padding: 30px;
  -webkit-text-stroke-color: #aa00ff;
}
@keyframes move {
from {
background-position: 0px;
}
to {
background-position: 1000px;
}
}
      .title-jitter {
         animation: shake 0.5s infinite;
        background: linear-gradient(to top, #eeccff 2%, #cc66ff 100%);
        font-style:bold;
        font-size:3em;
        font-weight:bold;
        font-family:"ms gothic";
        opacity: 1;
        padding: 30px;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: black;
         }
      @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(0deg);
          }
        }
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background: #fffae6;
  border: 3px solid #695616;
  min-width: 200px;
  text-align: left;
  padding: 10px;
  z-index: 1;
}
.dropdown:hover .dropdown-content {
  display: block;
}