/* CSS is how you can add style to your website, such as colors, fourl(http://127.0.0.1:3000/home.html)nts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   @font-face {
   font-family: bigboy;
   src: url(/wet\ pet.ttf) ;
}


body {
   cursor: url('/rosecursor.png'), auto;
  background-color: rgb(78, 0, 0);
  
  color: #00e7f7;
  font-family: Verdana;
  a {color: #a52a2a;}
  text-align: center;
  background: url(/backgrounds/natfl369.gif);
  font-size: 13px;
h1 {font-family: bigboy;};
h2 {font-family: bigboy;};
 
}

header {
  text-align: center;
  img {
    width: 200px;
  }
  
  
}
footer {
  text-align: center;
  
}

.aboutBox {
  background-color: black;
  padding: 3px 3px;
  border-radius: 6px;
  border-style: outset;
  border-color: #00eeff;
  text-align: left;
  padding: 10px;
  filter: 
      drop-shadow( 1px 1px 10px rgb(0, 145, 150));
}
.leftSidebar {
  background-color: rgba(0, 0, 29, 0.9);
  max-width: 200px;
  padding: 20px;
  
  width: 100%;
  height: fit-content;

  img {
    max-width: 270px;
  
  }
  

  hr {color: red;
    height: 1px;}
 
}
.mainContent {
  display: flex;

  width: 600px;
  background: url(/backgrounds/bluerosebg.png);
  border: rgb(255, 0, 0), ridge, 1px;
  padding: 20px;
  
  
  width: fit-content;
}
.container {
  background-color: rgba(0, 0, 29, 0.9);

  max-width: 540px;
  text-align: center;
  margin-left: 10px;
  margin-right: 10px;
  padding: 10px;
  justify-content: center;
  ul{
    text-align: left;
  }
}
.rightSidebarabout {
  background-color: rgba(0, 0, 29, 0.9);
  max-width: 200px;
  padding: 20px;
  width: 100%;
  height: fit-content;
  

}
.sticker {
 
  position: relative;
  right:50px;
  z-index: 1;

}
#borderimg { 
  border: 10px solid transparent;
  border-image-source: url('/site assets/21.gif');
  border-image-slice: 30;
}

.splayer {
  background: black;
  padding: 1px;
  border-radius: 0px;
  text-align: center;
 
width:400px;
}
#strackTitle {
  margin: px 0;
  font-size: 16px;
font-family: monospace;
}

.scontrols {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 10px;
}

.sbutton {
  background:black;
  border: solid red 1px;
  color: darkred;
  padding: 10px 15px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background: red;
}

input[type="range"] {
  margin: 10px;
  accent-color: red;

}
.meatText {
  background-image: url(/backgrounds/meats.jpg);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  
  filter: 
      drop-shadow( 2px 5px 10px rgb(150, 0, 0));
   
 
}

.arrangeSite {
  flex-flow: wrap;
  width: fit-content;
  margin: auto;
 
}
.kaiman { /*optional*/
  right: 0px;
  bottom:-13px;
  float: right;
  position: fixed;
  max-width: 450px;
  z-index: 2;
  }
  
.kaiman img {
  max-width: 100%;
  height: auto;  
  }
@media(max-width: 1800px) {
    .kaiman {
      max-width: 50px;
      /*if this can be executed, override the previous rule, otherwise hide the side image*/
      max-width: calc(100% - 1000px);
      }
  }
  
@media(max-width: 1440px) {
    .kaiman {
      max-width: 100px;
      /*if this can be executed, override the previous rule, otherwise hide the side image*/
      max-width: calc(100% - 975px);
      }
  }
  
@media(max-width: 1200px) {
  
  
    .kaiman {
      right: 5px;
      max-width: 0%;
      /*if this can be executed, override the previous rule, otherwise hide the side image*/
      max-width: calc(100% - 900px);
      }
  }
  @media(max-width: 1000px) {
  

    .sideimage {
      /*don't even bother at this point*/
      display: none;
      }
  }