body {
    background-color: #810900 ; 
    overflow: visible;
    cursor: url("http://www.rw-designer.com/cursor-extern.php?id=236292, auto");
  }
  
  body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("assets/images/the%20overlay%20with%20white%20background.png") no-repeat center / cover;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: -1;
  /* filter: invert(1) hue-rotate(180deg); this is so sexy*/
}

@font-face {
  font-family: Cormorant Garamond;
  font-family: Jacquard 24;
  font-family: MedievalSharp;
  }
.sections {
  display: flex;
  width: 1200px;
  margin: auto;
  align-items: center;
  justify-content: flex-start;
  }
  
.leftsection{
  display: flex;
  width: 230px;
  margin-right: 10px;
  flex-direction: column;
  height: 795px;
  } 
  
.musicplayer {
  display: flex;
  overflow-x: hidden;
  height: 180.67px;
  align-items: center;
  overflow: hidden;
  padding-top: 1.67rem;
  margin-bottom: 18.7px;
  }  

.leftcorner {
  display: flex;
  background-image: url("dead leaves.png");
  height: 100%;
  border-radius: 7px;
  flex-direction: column;

  } 
  
.navigation {
 display: flex;
 flex-direction: column;
 height: 100%;
 position: relative;
 border-radius: 7px;
 background: rgba(0, 0, 0, 0.2567);
 }
 
.links {
  display: flex;
  flex-direction: column;
  background: black;
  padding: 1.67rem;
  margin: 10px;
  margin-right: 30px;
  border-radius: 12px;
  font-family: "Cormorant Garamond";
  font-weight: 500;
  
  } 
.navbar {
  margin-bottom: 0.835rem;
  margin-top: 0.835rem;
}

.navbar ul {
  
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  font-size: 22.0920067px;
  letter-spacing: 1.6967px;
  width: 100%;
}

.navbar li {
   padding-bottom: 1px;
  }  
  
.navbar a:hover {
   text-decoration-thickness: 0.5px;
   font-weight: 700;
   box-shadow: inset 0 -0.5px 0 #e39e48;
   letter-spacing: 2.67px;
  }  

.navbar a {
 text-decoration: none;
 color: #e39e48;
 display: block;
 width: 100%
  }

.meshuggah {
  display: flex;
  justify-content: center;
  margin-top: .67rem;
  }

.old-monk {
  display: flex;
  position: relative;
  bottom: 47px;
  margin-left: 67px;
  z-index: 2;
  }

.midsection{
  display: flex;
  width: 720px;
  padding-top: 30px;
  flex-direction: column;
  align-items: center;
  }    
 
.header {
  display: flex;
  justify-content: center;
  height: 135px;
  margin-bottom: 20px;
  width: 660px;
  }
  
.logo {
  display: flex;
  width: 510px;
  justify-content: center;
  }
.air,
.jimbo {
  display: flex;
  width: 75px;
  align-items: flex-end;
  justify-content: flex-end;
  animation: floatingImage 6s ease-in-out infinite;
  transform: translateZ(0);
  will-change: transform;
  } 
  
@keyframes floatingImage {
  0% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1) translateY(-2px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

.yap-box {
  display: flex;
  background-color: black;
  height: 600px;
  border-radius: 36px;
  width: 660px;
  min-height: 0;
  padding-bottom: 10px;
  } 
  
.stevesignature {
  display: flex;
  width: 180px;
  margin-top: 0.967rem;
  flex-direction: column;
  align-items: center;
  margin-left: 0.967rem;
  font-family: "Cormorant Garamond";
  font-weight: 500;
  font-size: 17px;
  }
  
.stevesignature p a {
  text-decoration: none; color: #e39e48; font-weight: 600;
  } 

.stevesignature p a:hover {
 font-weight: 700; 
 letter-spacing: 1.6967px; 

  }  
  
  
.yapping {
  display: flex;
  width: 450px;
  flex-direction: column;
  overflow-x: hidden;
  align-items: center;
  margin-bottom: 20px;
  }  

.crows {
  margin-top: 0.67rem;
  margin-bottom: 0.67rem;
  display: flex;
  } 

.rug {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
    overflow: scroll;
  overflow-x: hidden;
  } 
  
.rug::-webkit-scrollbar {
  display: none; 
  background: transparent;
  width: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
  }
  
.rug::-webkit-scrollbar-thumb {
  background: transparent;
  }  
  
.yap {
  display: flex;
  position: absolute;
  height: 100%;
  width: 80%;
  z-index: 2;
  margin: auto;
  margin-top: 20.67px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 17px
  } 

.yap p {
  color: #e7d7c3;font-family: "Cormorant Garamond";
  font-weight: 500;
  margin-left: 5%;
  margin-right: 5%;
  }  
  
.rightsection{
  display: flex;
  width: 230px;
  margin-left: 10px;
  flex-direction: column;
  height: 795px;
  padding-top: 10px;
  }    

.pochita {
  display: flex;
  justify-content: center;
  height: 165.52px;
  padding-bottom: 15px;
  }
  
.rightcorner {
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 8.67px;
  height: 591.67px;
  padding: 1.10rem;
  padding-bottom: 0;
  } 

.inner-right-corner {
  display: flex;
  flex-direction: column;
  background-color: black;
 border-radius: 8.67px;
 justify-content: center;
 height: 100%;
 margin-bottom: 1.1rem;
  }  
.luckycat {
  display: flex;
  margin-top: 10px;
  margin-left: 10px;
  }  
.pyramid-head {
  position: relative;
  justify-content: flex-end;
  margin-bottom: 10px;
  margin-right: 8px;
  display: flex; /*this also contains the lucky cat because i might forget*/
  }  
  
.mobile-alert  {
  display: none;
  }  
  @media (max-width: 1366px) {
    
  body::-webkit-scrollbar {
  display: none; 
  background: transparent;
  width: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
      } 
  
  body::-webkit-scrollbar-thumb {
  background: transparent;
      } 
      
      
    
  }
  
  @media (max-width: 600px) {
    
    .sections {
      display: none;
      }
    
    .mobile-alert {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 98vh;
      }
    
    .mobile-alert img {
      width: 300px;
      }  
    }