/* This place is a mess, why are you here? */

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-size: 1.1em;
  text-align: center;
  background-color: #d7c7eb;
  transition: background-color 1s linear;
}

header, footer, body, html, .sidebar, .layout-content {
  font-family: Pixelify Sans;
  
}

.line-height-adjust {
  line-height: 3.1;
}

.hs1Listen {
  margin-top: -10px;
  margin-bottom: -5px;
}

.hs1Buy {
  margin-top: -5px;
  margin-bottom: -5px;
}

.title {
  padding-left: 20px;
  padding-top: 5px;  
  padding-right: 100px;
  text-align: left;
  font-size: 5rem;
  position:absolute
  color: white;
  animation: glow;
  animation-duration:1s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
  margin-bottom: -7%;
}

.titleText {                        OLD
  margin-top: 3px;
  padding-left: 20px;
  padding-top: 10px;  
  padding-right: 100px;
  text-align: left;
  font-size: 5rem;
  position:absolute
  color: white;
  animation: glow;
  animation-duration:1s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
  margin-bottom: -2%;
}


.layout-body {
  /*background: linear-gradient(135deg, #413a4a 25%, transparent 25%) -21px 0, linear-gradient(225deg, #413a4a 25%, transparent 25%) -21px 0, linear-gradient(315deg, #413a4a 25%, transparent 25%), linear-gradient(45deg, #413a4a 25%, transparent 25%);
  background-size: 42px 42px;
  background-color: #211b2b; */
  animation: createBox 1s;
}

.layout header,
.layout footer,
.sidebar,
.layout-content {
  padding: 20px;
}
.layout header,
.layout footer {
  /*background-image: linear-gradient(90deg, transparent 50%, #473746 50%);
  background-size: 42px 42px;
  background-color: #191523; */
  background-image: linear-gradient(90deg, transparent 50%, #0d0d0d 50%);
background-size: 32px 32px;
background-color: #060606;
}

.layout header {
  animation: slideInFromLeft 1s; 
}

.layout footer {
  animation: slideInFromRight 1s;
}
/*.sidebar {
  background-color: #F34A4E;
  
} */
.layout-content {
  color: #777;
}

.layout header,
.layout, footer,
.sidebar {
  border-image: url('../content/cube.png') 30 stretch;
    border-image-slice: 149 150 149 150;
    border-image-width: 20px 20px 20px 20px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;  
    border-radius: 10px;
}


.bg-bg{
background-image: repeating-conic-gradient(#0d0d0d 0% 25%, #060606 0% 50%);
background-position: 0 0, 32px 32px;
background-size: 64px 64px;
background-color: #060606;
}

.r-sb-s {
  background-image: linear-gradient(-45deg, #261f26 25%, #121212 25%, #121212 50%, #261f26 50%, #261f26 75%, #121212 75%, #121212 100%);
  background-size: 42px 42px;
}

.r-sb-s-2 {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, #0d0d0d 32px, #0d0d0d 64px);
background-color: #060606;
}

.l-sb-s {
  background-image: linear-gradient(45deg, #261f26 25%, #121212 25%, #121212 50%, #261f26 50%, #261f26 75%, #121212 75%, #121212 100%);
    background-size: 42px 42px;
}

.l-sb-s-2 {
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 32px, #0d0d0d 32px, #0d0d0d 64px);
background-color: #060606;
}




.sidebar {
  color:white;
  font-size: 2rem;
}

.footer {
  color:white;
  font-size: 2rem;
  margin: -2px;
}

.sidebarImage {
  display: flex;
  background-image: url("../content/pfp2.png");
  width: 90%;
    height: auto;
    justify-content: center;
    align-items: center;
    padding-left:10px;
}

/**
 * Flex things:
 * — Mobile first
 * — Responsive
 */
.layout {
  min-height: 100vh;
}
.layout,
.layout-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.layout-content {
  flex: 1 1 auto;
}
@media (min-width: 768px) {
  .layout-sidebar-1 {
    order: -1;
  }
  .layout-body {
    flex-direction: row;
  }
  .sidebar {
    flex: 0 0 260px;
  }
}

  
  .navFlexBoxes {
    display: flex;
    align-items: center;
    justify-content: right;
    padding-right: 5px; /*original 20px*/
    padding-bottom: 20px;
    flex-flow: row wrap;
  }

  .navFlexBoxes > div {
    /*background:
    32px 32px/calc(2*32px) calc(2*32px) conic-gradient(at calc(500%/6) 50%,#251d2d 25%,#0000 0),0 0/calc(2*32px) calc(2*32px) conic-gradient(at calc(500%/6) 50%,#251d2d 25%,#0000 0),
    32px 32px/calc(2*32px) calc(2*32px) conic-gradient(at calc(200%/3) 50%,#39404d 25%,#0000 0),0 0/calc(2*32px) calc(2*32px) conic-gradient(at calc(200%/3) 50%,#39404d 25%,#0000 0),
    repeating-conic-gradient(#6b6b89 0 25%,#0000 0 50%) 0 0/calc(2*32px) calc(2*32px),
    linear-gradient(#6b6b89 calc(100%/3),#39404d 0 calc(200%/3),#251d2d 0) 
    0 0/32px 32px;*/

    background:
      radial-gradient(64px at 100% 0, #060606 6.25%, #0d0d0d 6.3% 18.75%, #060606 18.8% 31.25%, #0d0d0d 31.3% 43.75%, #060606 43.8% 56.25%, #0d0d0d 56.3% 68.75%, #0000 0),
      radial-gradient(64px at 0 0, #060606 6.25%, #0d0d0d 6.3% 18.75%, #060606 18.8% 31.25%, #0d0d0d 31.3% 43.75%, #060606 43.8% 56.25%, #0d0d0d 56.3% 68.75%, #0000 0),
      radial-gradient(64px at 0 100%, #060606 6.25%, #0d0d0d 6.3% 18.75%, #060606 18.8% 31.25%, #0d0d0d 31.3% 43.75%, #060606 43.8% 56.25%, #0d0d0d 56.3% 68.75%, #0000 0),
      radial-gradient(64px at 100% 100%, #060606 6.25%, #0d0d0d 6.3% 18.75%, #060606 18.8% 31.25%, #0d0d0d 31.3% 43.75%, #060606 43.8% 56.25%, #0d0d0d 56.3% 68.75%, #0000 0) #060606;
background-size: 64px 64px;
background-color: #060606;

    /*width: 70px; */
    margin: 10px;
    text-align: center;
    line-height: 40px;
    font-size: 25px;
    padding: 10px;
    transition: all .2s ease-in-out;
    border-radius: 5px;
    outline: solid;
    outline-color: rgba(255, 255, 255, 0.522);
  }

  .boxHover:hover {
    transform: scale(1.1);
  }

  .boxText {
    color: white;
    text-decoration: none;
    animation-name:glow;
    animation-duration:1s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
  }
  .link, .linkStd {
    /*text-decoration: none;
    background: #007BFF; /* Bootstrap primary color
    color: white;
    padding: 10px;
    border-radius: 5px;
    margin: 5px 0;
    transition: background 0.3s; */
    background:
    radial-gradient(64px at 100% 0, #060606 6.25%, #0d0d0d 6.3% 18.75%, #060606 18.8% 31.25%, #0d0d0d 31.3% 43.75%, #060606 43.8% 56.25%, #0d0d0d 56.3% 68.75%, #0000 0),
    radial-gradient(64px at 0 0, #060606 6.25%, #0d0d0d 6.3% 18.75%, #060606 18.8% 31.25%, #0d0d0d 31.3% 43.75%, #060606 43.8% 56.25%, #0d0d0d 56.3% 68.75%, #0000 0),
    radial-gradient(64px at 0 100%, #060606 6.25%, #0d0d0d 6.3% 18.75%, #060606 18.8% 31.25%, #0d0d0d 31.3% 43.75%, #060606 43.8% 56.25%, #0d0d0d 56.3% 68.75%, #0000 0),
    radial-gradient(64px at 100% 100%, #060606 6.25%, #0d0d0d 6.3% 18.75%, #060606 18.8% 31.25%, #0d0d0d 31.3% 43.75%, #060606 43.8% 56.25%, #0d0d0d 56.3% 68.75%, #0000 0) #060606;
    background-size: 64px 64px;
    background-color: #060606;
    /*width: 70px; */
    margin: 10px;
    text-align: center;
    line-height: 30px;
    font-size: 25px;
    padding: 5px;
    transition: all .2s ease-in-out;
    border-radius: 5px;
    outline: solid;
    outline-color: rgba(255, 255, 255, 0.522);
    color: white;
    text-decoration: none;
}

.link:hover {
    transform: scale(1.1);
}

.linkStd:hover {
    transform: scale(1.05);
}

.linkStd {
display: flex;
width: 90%;
align-items: center;
justify-content: center;
}

.lstd, .lstdNgTop {
  text-align: center;
  margin-left: 5px;
  margin-right: 5px;
}

.lstd {
  width: 10%;
}

.lstdLogoTop {
  text-align: center;
  margin-left: 5px;
  margin-right: 5px;
  height: 1%;
}

  #jellyNervesBadge {
    position: fixed;
    top: 10px;
    right: 250px;
    max-width: 132px;
    min-width: 132px;
    height: auto;
    padding-bottom: 30px;
    padding-left: 30px;
  }

  #cornerHead {
    position: fixed;
    bottom: 10px;
    right: 10px;
    height: auto;
    max-width: 20%;
  }

  .badgeText {
    display: flex;
    position: fixed;
    top: 10px;
    right: 10px;
    animation-name:glow;
    animation-duration:1s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    color:white;
    padding-bottom: 30px;
    padding-left: 45px;
    font-size: 1.5rem;
  }

  @keyframes glow{
    from{text-shadow:0px 0px 5px #fff,0px 0px 5px #614ad3;}
    to{text-shadow:0px 0px 20px #fff,0px 0px 20px #614ad3;}
  }

  .pfp{
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
  }

  .contentText {
    overflow-wrap: break-word;
    text-align: center;
    filter: drop-shadow(0 0 2rem purple);
    color: white;
    font-size: 2rem;
  }

  .contentTitleText {
    margin-bottom: -1%;
  }

  .logoSpin {
    width: 17%;
    filter: drop-shadow(0 0 1.5rem rgb(234, 233, 228));
    padding-bottom: 30px; /* stops the buttons below it clipping */
  }
 

  .rainbowText {
    font-size: 30px;
    display: inline-block;
    /*margin-top: 1rem; */
    text-shadow: 2px 2px 4px #000000;
    -webkit-animation: rainbow 5s infinite; 
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #fff;
  }
  
@-webkit-keyframes rainbow{
  0%{color: orange;}  
  10%{color: purple;} 
  20%{color: red;}
  30%{color: CadetBlue;}
  40%{color: yellow;}
  50%{color: coral;}
  60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
  100%{color: orange;}
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  0% {
    transform: translateX(+100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes createBox {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

/*img:hover {
  animation: shake 0.5s;

  animation-iteration-count: infinite;
} */


/* p {
  font-size: 2.5em;
  text-align: center;
  margin-top: 5em;
} */

.sidebarImage:hover {
  -webkit-animation-name: wiggle;
  -ms-animation-name: wiggle;
  -ms-animation-duration: 1000ms;
  -webkit-animation-duration: 1000ms;
  -webkit-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
}

@-webkit-keyframes wiggle {
  0% {-webkit-transform: rotate(10deg);}
  25% {-webkit-transform: rotate(-10deg);}
  50% {-webkit-transform: rotate(20deg);}
  75% {-webkit-transform: rotate(-5deg);}
  100% {-webkit-transform: rotate(0deg);}
}

@-ms-keyframes wiggle {
  0% {-ms-transform: rotate(1deg);}
  25% {-ms-transform: rotate(-1deg);}
  50% {-ms-transform: rotate(1.5deg);}
  75% {-ms-transform: rotate(-5deg);}
  100% {-ms-transform: rotate(0deg);}
}

@keyframes wiggle {
  0% {transform: rotate(10deg);}
  25% {transform: rotate(-10deg);}
  50% {transform: rotate(20deg);}
  75% {transform: rotate(-5deg);}
  100% {transform: rotate(0deg);}
}

.hover {
  width: 90%;
    height: auto;
    justify-content: center;
    align-items: center;
    padding-right: 10px;
}


.hover:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% {transform: rotate(10deg);}
  25% {transform: rotate(-10deg);}
  50% {transform: rotate(20deg);}
  75% {transform: rotate(-5deg);}
  100% {transform: rotate(0deg);}
}