:root {
     --dk-color:#bf776b;
     --mid-color:#f2b1a4;
     --lt-color:#fbeeeef2;
     --dkest-color:#8e534a;
     --accent:#226051;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

 html, body {
     margin:0;
     padding-top:25px;
     padding:0;
     height:98%;
     font-family:Verdana;
     font-size:11px;
     background-image:url('/images/roses-bg.gif');
     background-repeat:repeat;
     color:var(--dkest-color);
     padding:1px;
     cursor: url("https://tuffgong.neocities.org/stuff/cursor.gif"), default;
}
 body a {
     color:var(--accent);
     font-weight:bold;
     cursor: url("https://tuffgong.neocities.org/stuff/eyes.gif"), default;
}
 ul.list li {
     padding-bottom:5px;
}
 #container {
     max-width:4200px;
     width:1200px;
     margin:0 auto;
     height:auto;
     background-color:var(--lt-color);
     margin-top:15px;
}
 h1, h3, h5 {
     color:var(--dk-color);
}
 h2, h4, h6 {
     color:var(--accent);
}
 #header {
     max-width:1200px;
     height:auto;
     margin:0 auto;
     background-color:#f125a2;
     border:1px solid var(--dkest-color);
}
 .navbar li a {
     text-decoration:none;
     cursor: url("https://tuffgong.neocities.org/stuff/eyes.gif"), default;
}
 .navbar ul {
     list-style-type:none;
     padding:0;
     padding-left:20px;
     padding-right:20px;
}
 .navbar {
     background-color:var(--lt-color);
     max-width:1200px;
     border:1px solid var(--dkest-color);
     border-bottom:none;
     border-top:none;
     padding-top:5px;
     padding-bottom:5px;
     text-align:center;
     cursor:crosshair;
}
 .title {
     font-size:35px;
     text-align:center;
     font-style:italic;
     color:white;
}
 .section-title {
     text-align:center;
     font-weight:bold;
     padding-top:5px;
     padding-bottom:5px;
     background-color:#f125a2;
     color:white;
     font-size:12px;
     border-bottom:1px solid var(--dkest-color);
}
 .wrapper {
     display:flex;
     flex-wrap:wrap;
     height:auto;
     width:100%;
}
 #left-sidebar {
     width:17%;
     border:1px solid var(--dkest-color);
     /*height:100%; */
     border-right:none;
     background-color:var(--lt-color);
}
 .content {
     padding:10px;
}
 .main-content {
     border:1px solid var(--dkest-color);
     width:66%;
     height:auto;
}
 p {
     padding:5px;
}
 p a {
     color:var(--dkest-color);
     font-weight:bold;
}
 .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);
}
 .navbar {
     background-color:#1bf4ec;
          
}

/*  #header{
  background: linear-gradient(45deg,#25dbee, #ee1991, #00ffcf, #4df0e1, #f7a0f1, indigo, violet,indigo,#fb38d3, #ff74f6,#08f4d3,#23c3f4,#f411a6, #53dfff);
  background-size: 1000% 100%;  
  animation: create-rainbow-gradient-shift 30s ease infinite;
  text-align: center;
}
*/

 #transparent-h1{
  background: linear-gradient(90deg,#25dbee, #ee1991, #00ffcf, #4df0e1, #f7a0f1, indigo, violet,indigo,#fb38d3, #ff74f6,#08f4d3,#23c3f4,#f411a6, #53dfff);
  background-size: 1000% 100%;  
  animation: create-rainbow-gradient-shift 30s ease infinite;
  text-align: center;
}

#transparent-h1 a{
  color:white;
  text-decoration:none;
}



#header:hover{
  background: linear-gradient(90deg,#25dbee, #ee1991, #00ffcf, #4df0e1, #f7a0f1, indigo, violet,indigo,#fb38d3, #ff74f6,#08f4d3,#23c3f4,#f411a6, #53dfff);
  background-size: 1000% 100%;  
  animation: create-rainbow-gradient-shift 30s ease infinite;
  text-align: center;
}


@keyframes create-rainbow-gradient-shift{
    0%{background-position:0% 50%}
    100%{background-position:100% 100%}
}
 
 
 
 #animate {
    animation: create-rainbow-gradient-shift 1s ease forwards;
 }
#transparent-h1 {
  letter-spacing: 4px;
  font-weight: bold;
  font-family: "Arial Black";
  color: white;
  text-shadow: 0 0 15px #eee;

}

 .navbar li {
     position: relative;
     display:inline-block;
}
 .navbar a {
     text-decoration:none;
     display:block;
     color:var(--accent);
     margin-right:15px;
     transition:0.2s all linear;
     font-weight:bold;
     font-size:12px;
     margin-right:40px;
}
 .navbar a:hover{
     background:var(--lt-color);
     color:var(--accent);
     transition:0.2s all linear;
     z-index:1;
}
 .navbar li > ul {
     background:var(--mid-color);
     display:none;
     position:absolute;
     margin-left:0;
     border:1px solid var(--dkest-color);
}
 .navbar li > ul a {
     padding-left:0;
     padding-right:0;
     padding-top:5px;
     padding-bottom:5px;
}
 .navbar li > ul li{
     display:block;
}
 .navbar li:hover > ul{
     display:block;
}
 .navbar ul ul ul {
     position:absolute;
     left:100%;
     top:0;
}
 ul.subitems {
     padding-left:0;
     padding-right:0;
     margin-right:0;
}
 ul.subitems li a {
     padding-right:0;
     margin-right:0;
     padding-left:10px;
     padding-right:10px;
     padding-top:10px;
     display:block;
}
 #footer {
     text-align:center;
     padding-top:5px;
     margin-bottom:5px;
}
 #footer p {
     background: linear-gradient(90deg,red, orange, yellow, green, blue, indigo, violet,indigo,blue, green,yellow,orange,red, red); 
  background-size: 1000% 100%;  
  animation: create-rainbow-gradient-shift 30s ease infinite;
  text-align: center;
     display:block;
     margin:0 auto;
     margin-top:5px;
     margin-bottom:5px;
     padding:5px;
     color:white;
 }


@keyframes create-rainbow-gradient-shift{
    0%{background-position:0% 50%}
    100%{background-position:100% 100%}
}


 textarea {
     background-color:var(--dkest-color);
     color:var(--lt-color);
     font-size:10px;
}
 .code-wrapper {
     display:flex;
     padding-left:10px;
}


/* UNCOMMENT THE BELOW CODE FOR TWO SIDEBARS */
.main-content {
     width:66%;
     border-right:none;
}
 #right-sidebar {
     width:17%;
     border:1px solid var(--dkest-color);
}
 #container {
     max-width:1200px;
}

/* CHANGE BELOW TO max-width:1000px for TWO SIDEBARS. It is max-width:914px for ONE SIDEBAR */
 @media only screen and (max-width: 1200px) {
     #left-sidebar {
         order:2;
         width:100%;
         border-right:1px solid var(--dkest-color);
    }
     .main-content {
         order:1;
         width:100%;
         border-bottom:none;
         border-right:1px solid var(--dkest-color);
    }
     .navbar a {
         padding-bottom:10px;
    }

#right-sidebar {
         width:100%;
         order:3;
         border-top:none;
    }
     #container {
         max-width:1000px;
         width:90%;
    }
     .main-content {
    }

}
 

#rainbowcursor {
 cursor: url("https://tuffgong.neocities.org/stuff/rainbow.png"), default;
}


  body {
    transition: zoom 0.3s ease;
  }
  #controls {
    top: 10px;
    left: 10px;
    display:none;
    text-align: center;

  }
  button {
    margin-right: 5px;
  }









#ass {
  font-size:150%;
  flex: 1;
  line-height: .75;
  margin: auto;
  color: #1af0dc;
  text-align: center;
  transform: scaleX(var(--scale, 1));
  animation: glitch-p 11s infinite alternate;
  display:none;
  
  &::before,
  &::after {
    --top: 0;        // offset from top [0 - 10]
    --left: 0;       // offset from left [0.001 - 1]
    --v-height: 30%; // visible part
    
    --n-tenth: calc(var(--f-size) * .1 * var(--top));
    --t-cut: calc(var(--n-tenth) / var(--f-size) * 100%);
    --b-cut: calc(var(--t-cut) + var(--v-height));
    
    content: attr(data-text);
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    
    transform: translateX(calc(var(--left) * 100%));
    
    // this helps to get rid of pixelization
    filter: drop-shadow(0 0 transparent); 
    
    text-shadow: calc(var(--left) * -3em) 0 .02em lime, 
                 calc(var(--left) * -6em) 0 .02em #ff00e1;
    
    background-color: var(--bg);
    clip-path: polygon(0% var(--t-cut), 100% var(--t-cut), 100% var(--b-cut), 0% var(--b-cut));
  } 
  
  &::before {
    animation: glitch-b 1.7s infinite alternate-reverse;
  }
  &::after {
    animation: glitch-a 3.1s infinite alternate;
  }
}

@keyframes glitch-p {
  17% { --scale: .87; }
  31% { --scale: 1.1; }
  37% { --scale: 1.3; }
  47% { --scale: .91; }
  87% { --scale: 1; }
}

@keyframes glitch-a {
  10%,30%,50%,70%,90% {
    --top: 0;
    --left: 0;
  }
  0% {
   --v-height: 15%; 
  }
  20% {
    --left: .005;
  }
  40% {
    --left: .01;
    --v-height: 20%;
    --top: 3;
  }
  60% {
    --left: .03;
    --v-height: 25%;
    --top: 6;
  }
  80% {
    --left: .07;
    --v-height: 5%;
    --top: 8;
  }
  100% {
    --left: .083;
    --v-height: 30%;
    --top: 1;
  }
}

@keyframes glitch-b {
    10%,30%,50%,70%,90% {
    --top: 0;
    --left: 0;
  }
  0% {
   --v-height: 15%; 
   --top: 10;
  }
  20% {
    --left: -.005;
  }
  40% {
    --left: -.01;
    --v-height: 17%;
    --top: 3;
  }
  60% {
    --left: -.03;
    --v-height: 35%;
    --top: 6;
  }
  80% {
    --left: -.07;
    --v-height: 5%;
    --top: 8;
  }
  100% {
    --left: -.083;
    --v-height: 30%;
    --top: 1;
  }
}




#buttons-container {
      top: 10px;
      left: 10px;
      z-index: 20; /* on top */
    }


canvas {
display: block;
position:absolute;
top:0;
left:0;
}



#entermatrix {
  width: 98%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: black;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  color:green;

}




#cdr {
  width: 200px;
  margin: 0 auto;
  padding: 6px;
}

#cdr table {
  background-color: #ffffff;
  margin: 0 auto;
}

#cdr table tr td {
  padding: 1px; 
}

#cdr .webring-prev {
  text-align: right;
}

#cdr .webring-info {
  text-align: center;
}

#cdr .webring-next {
  text-align: left;
}

#cdr .webring-links {
  font-size: small;
}


#cdr p {
  margin: 0.3em 0; 
}

.cdr-badge {
  display: block;
  margin: 0.2em auto; 
  max-width: 200px;
  height: auto;
}

.cdr-widget {
  text-align: center;
  font-family: times;
  margin: 0; 
  line-height: 1.2; 
}

.cdr-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  margin: 0.2em 0; 
}

.cdr-nav .cdr-prev,
.cdr-nav .cdr-next {
  font-weight: bold;
  text-decoration: none;
}

#truth {
       cursor: url("https://tuffgong.neocities.org/stuff/blueplcur.gif"), auto;
}

#swordman:hover{
  cursor: url("https://tuffgong.neocities.org/stuff/firesword.gif"), auto;
}

#rainbowoman:hover{
  cursor: url("https://tuffgong.neocities.org/stuff/rainbow.png"), auto;
}

#aquaman:hover{
  cursor: url("//tuffgong.neocities.org/stuff/fishbone.gif"), auto;
}

#airnimal:hover{
  cursor: url("//tuffgong.neocities.org/stuff/fart.png"), auto;
  background: none!important;
}

#adrenolips:hover{
  cursor: url("//tuffgong.neocities.org/stuff/mouth-cursor.gif"), auto;
  
}



 
        .pagecontainer {display:none;}
        
        @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }
   .blinkPill {
    animation: blink 1s infinite;
   }
  
  #pillflash:hover {
    animation: blink 1s infinite;
     cursor: url("//tuffgong.neocities.org/stuff/mouth-cursor.gif"), auto;
  }
  
  #matrixstud:hover {
    animation: blink 1s infinite;
  }
  
  
  
  
  .spacedout {
  letter-spacing: 0.5em; /* adds space between letters */
}




.mobnavbar {
  width: 100%;
  box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
}

.mobnav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 62px;
}

.mobnavbar .menu-items {
  display: flex;
}

.mobnavbar .nav-container li {
  list-style: none;
}

.mobnavbar .nav-container a {
  text-decoration: none;
  color: #0e2431;
  font-weight: 500;
  font-size: 1.2rem;
  padding: 0.7rem;
}

.mobnavbar .nav-container a:hover{
    font-weight: bolder;
    background: var(--lt-color);
}

.mobnav-container {
  display: block;
  position: relative;
  height: 60px;
}

.mobnav-container .checkbox {
  position: absolute;
  display: block;
  height: 48px;
  width: 48px;
  top: 20px;
  left: 20px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

.mobnav-container .hamburger-lines {
  display: block;
  height: 26px;
  width: 32px;
  position: absolute;
  top: 17px;
  left: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mobnav-container .hamburger-lines .line {
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 10px;
  background: #0e2431;
}

.mobnav-container .hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}

.mobnav-container .hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}

.mobnav-container .hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}

.mobnavbar .menu-items {
  box-shadow: inset 0 2000px rgb(247, 0, 151);
  height: 100vh;
  width: 100%;
  transform: translate(-150%);
  display: flex;
  flex-direction: column;
  padding-left: 50px;
  transition: transform 0.5s ease-in-out;
  text-align: center;
}

.mobnavbar .menu-items li {
  margin-bottom: 1.2rem;
  font-size: 1.5rem;
  font-weight: 500;
  display:block;
}

.mobnavbar .menu-items a:hover{
  color:white;
}

.mobnavbar li a{
  color:white;
  font-weight:bold;
  text-decoration:underline;
}

.moblogo {
  position: absolute;
  top: 5px;
  right: 15px;
  font-size: 1.2rem;
  color: #0e2431;
}

.mobnav-container input[type="checkbox"]:checked ~ .menu-items {
  transform: translateX(0);
}

.mobnav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
  transform: rotate(45deg);
}

.mobnav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
  transform: scaleY(0);
}

.mobnav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
  transform: rotate(-45deg);
}

.mobnav-container input[type="checkbox"]:checked ~ .logo{
  display: none;
}

 @media only screen and (max-width: 1200px) {
 .regular-nav {display:none;}
 }
 
 @media only screen and (min-width: 1200px) {
 .mobnavbar {display:none;}
 }