:root {
     --dk-color:hsl(0, 100%, 45%);
     --mid-color:#8b00fc;
     /* --mid-color2: linear-gradient(to bottom, #ff8a00, #da1b60); */
     --lt-color:#020c1c;
     --dkest-color:#ffffff;
     --accent:#ff0095;
}
 html, body {
     margin:0;
     padding-top:25px;
     padding:0;
     height:100%;
     font-family:Verdana;
     font-size:12px;
     background-image:url(/images/galaxy_rush.gif);
     background-repeat:repeat;
     overflow:hidden;
     color:var(--dkest-color);
     
}


.medievalsharp-regular {
  font-family: "MedievalSharp", cursive;
  font-weight: 400;
  font-style: normal;
}



body a {
  font-weight:bold;
  color:var(--accent);
}
 #heading {
     max-width:100%;
     text-align:center;
}
 #heading img {
     max-width:100%;
}
 #container {
     max-width:1200px;
     height:auto;
     margin:0 auto;
     display:flex;
     flex-wrap:wrap;
     justify-content:center;
}
 .left-sidebar-1, .left-sidebar-2, .left-sidebar-3, .right-sidebar-1, .right-sidebar-2, .content {
     background-color:var(--lt-color);
}
 .left-sidebar-2 p, .left-sidebar-3 p {
}
 p {
     padding-left:15px;
     padding-right:15px;
}
 .left-sidebars {
     width:150px;
     display:flex;
     flex-wrap:wrap;
     margin-right:25px;
     order:-1;
     align-content:flex-start;
     margin-left:25px;
}
 .left-sidebar-1{
     border:5px solid var(--mid-color);
     width:150px;
     height:150px;
     overflow:hidden;
}
 .left-sidebar-1 img {
     width:150px;
     height:150px;
}

 .left-sidebar-2 {
     border:5px solid var(--dk-color);
     margin-top:25px;
     width:150px;
     height:200px;
}
 .left-sidebar-3 {
     border:5px solid var(--dk-color);
     margin-top:25px;
     width:150px;
     height:154px;
}
 .content {
     border:1px solid var(--dk-color);
     height:519px;
     width:660px;
     padding:20px;
     overflow:auto;
}
 .right-sidebars {
     width:150px;
     display:flex;
     flex-wrap:wrap;
     margin-left:25px;
     align-content:flex-start;
}
 .right-sidebar-1 {
     border:5px solid var(--dk-color);
     width:150px;
     height:237px;
}
 .right-sidebar-2 {
     border:5px solid var(--dk-color);
     width:150px;
     height:auto;
     margin-top:25px;
}
 .sidebarh {
     text-align:center;
     font-weight:bold;
     padding-top:5px;
     padding-bottom:5px;
     background-color:var(--mid-color);
     color:var(--dkest-color);
}
 #footer {
     text-align:center;
     padding-top:5px;
     margin-bottom:5px;
}
 #footer p {
     background-color:white;
     display:block;
     width:160px;
     margin:0 auto;
     margin-top:5px;
     margin-bottom:5px;
     padding:5px;
}
 .left-sidebar-2 > .sb-content {
     overflow:auto;
     height:178px;
}
 .left-sidebar-3 > .sb-content {
     overflow:auto;
     height:132px;
}
 .right-sidebar-1 > .sb-content {
     overflow:auto;
     height:215px;
}
 .right-sidebar-2 > .sb-content {
     overflow:auto;
     height:272px;
}
 h1, h3, h5 {
     color:var(--dk-color);
}
h2, h4, h6 {
    color:var(--accent);
  }
 h1 {
     color:var(--dk-color);
     font-size:40px;
     font-style:italic;
}
 .links {
     list-style-type:none;
     margin-left:0;
     padding-left:0;
     padding-left:15px;
     padding-right:15px;
}
 .links li {
     padding-top:10px;
     font-size:16px;
     transition:
     font-size 0.50s,
     color 0.50s,
     transform 1s;
}
.links li:hover {
  padding-top:10px;
  font-size:20px;
  transform: rotate(2deg);
  text-shadow: 2px 2px 5px var(--dk-color);
}
 .links a {
     text-decoration:none;
     font-weight:bold;
}



.profiles {
  width: 350px;
  height: 350px;
  background-image:url(/images/stickynote.png);
  background-position: center;
  background-size: cover;
  margin: 5px;
 }
.square img {
  height: 250px;
  width: 250px;
  object-fit: cover;
  display: block;
  margin-top: 40px;
  margin-inline-start: 45px;
  transform: rotate(1deg)
}

.snailscription {
  transform: rotate(-3deg);
  color: var(--mid-color);
  margin-left: 20px;
  margin-top: -4px;
}


 .scroll::-webkit-scrollbar-track {
     background-color: var(--lt-color);
}
 .scroll::-webkit-scrollbar {
     width: 10px;
     background-color: #f2b1a4;
}
 .scroll::-webkit-scrollbar-thumb {
     background-color: var(--dk-color);
}

 textarea {
   background-color:var(--lt-color);
   color:var(--dkest-color);
   font-size:10px;
   width:80px;
   height:55px;
 }


 #keychain_pik {
  position: fixed;
  top: -50px;
  left: 205px;
  transform: rotate(348deg);
}

#keychain_kuro {
  position: fixed;
  top: -23px;
  left: 150px;
  transform: rotate(10deg);
}



img.keychain:hover {
  animation: dangle 1.5s;
  animation-iteration-count: infinite;
}

@keyframes dangle {
  0% { transform: translate(0px, 0px) rotate(0deg); }
  10% { transform: translate(0px, 0px) rotate(-1deg); }
  20% { transform: translate(0px, 0px) rotate(-3deg); }
  30% { transform: translate(0px, 0px) rotate(-5deg); }
  40% { transform: translate(0px, 0px) rotate(-3deg); }
  50% { transform: translate(0px, 0px) rotate(-1deg); }
  60% { transform: translate(0px, 0px) rotate(0deg); }
  70% { transform: translate(0px, 0px) rotate(1deg); }
  80% { transform: translate(0px, 0x) rotate(3deg); }
  90% { transform: translate(0px, 0px) rotate(5deg); }
  100% { transform: translate(0px, 0px) rotate(3deg); }
}




 @media only screen and (max-width: 1120px) {
      html, body {
     overflow:auto;
   }
     #container {
         justify-content:center;
         width:99%;
    }
    .content {
      width:96%;
      margin:2px;
      order:2;
    }
    #left-sidebar {
      width:100%;
      margin:2px;
      order:3;
    }
    .left-sidebars {
      width:100%;
      margin:2px;
    }
     .left-sidebar-1 {
         display:none;
    }
    .left-sidebar-2 {
      width:100%;
      margin:2px;
    }
    .left-sidebar-3 {
      width:100%;
      margin:2px;
    }
    .right-sidebar-1 {
      width:100%;
      margin:2px;
      order:1;
    }
    .right-sidebar-2 {
      width:100%;
      margin:2px;
      display:none;
    }
    .right-sidebars {
      width:100%;
      margin:2px;
      order:1;
    }
    #right-sidebar {
      width:100%;
    }
    #footer {
      display:none;

    }
    #keychain_pik{
      display: none;
    }
    #keychain_kuro{
      display: none;
    }
    #running_pikmin{
      display: none;
    }
  }

 @media only screen and (max-width: 395px) {
   html, body {
     overflow:auto;
   }
     .right-sidebars {
         margin-left:0;
         margin-top:25px;
    }
}