/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url(https://64.media.tumblr.com/a382d20da19f867e59ee742817345426/c20995ea1bd5215a-95/s1280x1920/37562528d2b7ab18b56b3a79bc2de32469acb033.pnj);
  background-color:black;
  background-repeat:repeat;
  color: #CC0000;
  font-family: Verdana;
  cursor: url("https://64.media.tumblr.com/bdace83becbfe79a4b35feb06143fc8d/4a0c7047c04efc93-93/s75x75_c1/c3b9c0391c6c819637c9d550848315a244cd5f2d.gifv"), auto !important;
}

::selection {
            background-color: #FF0000; /* Red highlight background */
            color: white;              /* White text when selected */
        }

.page{
  margin-left:20%;
  margin-right:20%;
  }

.title {
  animation: jerky 0.5s infinite;
  font-family: 'karbon';
  font-size: 100px;
  color:white;
  text-align: center;
  margin: 21px;
  text-shadow: 5px 5px 10px red;
}

h3{
  background-color:red;
  padding:-1%;
}

.sub{
  font-family: 'karbon';
  font-size:40px;
  margin-top:-20px;
  text-align: center;
}

.divider{
  margin-top:-5%;
  margin-bottom:-1%
}

.home{
  display:flex;
  margin-top:20px;
  justify-content: space-around; /* Distributes space around the items */
  align-items: center;
  position:relative;
  font-family:'mssansserif';
  border:2px solid red;
  font-size:20px;
  color:white;
}

.about {
  border: 1px dashed red; /* Required initial border */
  padding: 10px; /* Optional: adds space inside the border */
  margin:10px;
  position:relative;
  background-image: linear-gradient(to bottom, firebrick, black);
}

.stamps{
  display:flex;
  align-items:center;
  justify-content:center;
  }


.members {
  border: 1px dashed red; /* Required initial border */
  background-color:rgba(255, 0, 0, 0.5);
  padding-top:-5%;
  margin-right:10px;
  margin-top:10px;
  margin-bottom:10px;
}

.poserz{
  animation: jerky 0.5s infinite;
  }

.ppl{
  margin:3px;
  padding: 3px;
  }
  
.stamp{
  margin-top:5px;
  }

.band{
  width:100%;
  object-fit: cover;
  }

.topnav {
  position: relative;
  text-decoration: underline;
  overflow: hidden;
  font-size:10px;
  font-family: 'illusion';
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color:red;
  transition: 0.5s;
  text-align: center;
  padding: 3px 5px;
  text-decoration: underline;
  font-size: 10px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color:red;
  letter-spacing: 2px;
  color:white;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color:red;
  color: white;
}

/* Centered section inside the top navigation */
.topnav-centered a {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Right-aligned section inside the top navigation */
.topnav-right {
  float: right;
}

/* Responsive navigation menu - display links on top of each other instead of next to each other (for mobile devices) */
@media screen and (max-width: 600px) {
  .topnav a, .topnav-right {
    float: none;
    display: block;
  }

  .topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
  }
}

    @keyframes jerky {
      0% {
        transform: rotate(0.4deg);
      }

      50% {
        transform: rotate(0.4deg);
      }

      51% {
        transform: rotate(-0.4deg);
      }

      100% {
        transform: rotate(-0.4deg);
      }
    }

    @font-face {                  
    font-family: 'Illusion';
    src: url(https://humantooth.neocities.org/fonts/IllusionSerif-Regular.woff2) format('woff2');
    font-weight: normal;
    font-style: normal;
    } 

    @font-face {                  
    font-family: 'MachineLearning';
    src: url(https://humantooth.neocities.org/fonts/MachineLearningFont-v1.woff) format('woff');
    font-weight: normal;
    font-style: normal;
    } 

    @font-face {
    font-family: 'basiic';
     src: url('https://file.garden/Zztv0a9yEhr5pmEq/basiic.ttf') format("truetype");
     }
 
    @font-face {                  
    font-family: 'Karbon';
    src: url(https://humantooth.neocities.org/fonts/3621-karbon-web.woff) format('woff');
    font-weight: normal;
    font-style: normal;
    } 
    
    @font-face {
  font-family:'mssansserif';
  src: url(https://dl.dropbox.com/s/ngpec1t1x4ceksb/ms-sans-serif.ttf);
}


* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 350px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: red;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color:red;
  font-size: 18px;
  background-color:black;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}


/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color:black;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color:red;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}


  #musicplayer{ 
          font-family: 'Illusion';
          font-weight:bold;
          height:30px;
          width:100%;
          left:0;
          top:0;
          z-index: 10; 
          font-size: 10px;
          position:fixed;
          margin-bottom:20px;  
          display:flex;
         background:red;
         border:ridge 2px #cc2d3e;/* border around player */
          outline: solid 2px black;  
          box-shadow: inset 10px 0px 6px -10px #630115, inset -13px 0px 6px -10px #630115, inset 0px 10px 6px -10px #ff5959, inset 0px -13px 6px -10px #630115;
            }
         
            .songtitle{ 
            font-family: 'Illusion';
            display:block;
            padding:2px; /* padding around song title */
            margin-top:4px;
            margin-right: 5px; 
            font-size:8px;
            color:white;
        
            background: black;/* background of song title */
            border: gray inset 1px;
               border-radius:6px;
              
            }
         
            .controls{
              font-size:12px; /* size of controls */
              color:white;
              text-align:center;
              width:100px;
              height:10px;
              text-decortation:none;
            }
         
            .controls td{
               padding-top:5px; /* padding around controls */
            }
         
            .seeking{
              width:75%;
              background: transparent;/* background color of seeking bar */
              display:flex;
              justify-content: space-evenly;
              padding:7px; /* padding around seeking bar */
               
            }
         
            .current-time{  
              padding-right:5px;
              margin-right: 3px; 
              color:white;
               
            }
         
            .total-duration{
              padding-left:5px;
              color:white;
            }
         
          .ctrlimg {
   height:16px;
   width:16px;
   }
    .ctrlimg:hover{
        cursor:help;
    }
            
            input[type=range] {
                -webkit-appearance: none;
                width: 100%;
              background: transparent;
            }
            
            input[type=range]:focus {
                outline: none;
            }
            
            input[type=range]::-webkit-slider-runnable-track {
                width: 100%;
                height: 6px; /* thickness of seeking track */
                cursor: help;
                border-radius: 6px;
                background: black; /* color of seeking track */
                border: 1px white solid;
            }
        
            input[type=range]::-webkit-slider-thumb {
              
                height: 30px; /* height of seeking square */
                width: 20px; /* width of seeking square */
                background-image:  url('https://file.garden/Zztv0a9yEhr5pmEq/tumblr_40786d3985453eb5412348aad980ac51_3a9a1088_1280%20(1).gif'); /* image of  seeking square */
                background-size: 25px;
                -webkit-appearance: none;
                margin-top: -10px;
                
            }
            
        input[type=range].volume_slider::-webkit-slider-runnable-track { 
            background: white; /* color of volume seeking track */
             filter:drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);  /* outline of volume seeking track */ 
            }
            
         input[type=range].volume_slider::-webkit-slider-thumb {
            background-image: url(https://file.garden/Zztv0a9yEhr5pmEq/798d7d72_original.png);/* image of volume seeking square */
            background-size: 20px;
            height: 20px; /* height of volume seeking square */
            width: 20px; 
            margin-top: -8px;
           }
         
         
        .slider_container {  
          width: 15%;       /* width of volume seeker */
          display: flex;
          justify-content: center;
          align-items: center;
        }