body {
  background-image: url('/img/footer_lodyas.png');
  background-attachment: fixed;
  margin: 0;
  font-family: 'Courier New', monospace;
  }

a.one {
  background:
     linear-gradient(
       to bottom, #fb177c 0%,
       #fb177c 100%
     );
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 0 1px;
  color: #6bddfb;
  text-decoration: none;
  transition: background-size .2s;
   user-select: none;
}
a.one:hover {
  background-size: 4px 50px;
  color: black;
  cursor: pointer;
}

.two {
    background:
     linear-gradient(
       to bottom, #fb177c 0%,
       #fb177c 100%
     );
    background-size: 4px 50px;
  color: black;
  cursor: pointer;
  user-select: none;
}

/*Everything goes inside here.*/
.wrapper {
  width: 900px;
  margin: 0 auto;
  }
  
.sidebar-img, .footer, .title, .links, .box {
  margin-top: 25px;
  }
  
.title, .links, .footer {
  text-align: center;
  }
  
/*Navigation links.*/
.links ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  }
  
.links li {
  display: inline-block;
  }

/*Some fancy code for fun, to add special characters around the navigation links. Change content to "" if you don't want these.*/
.links li:before {
  content: "「";
  }
  
.links li:after {
  content: "」 ∷ ";
  }
  
.links .last:after {
  content: "」";
  }
  
.links li:before, .links li:after {
  letter-spacing: 0.1em;
  }
  
/*Basic box code that is used for all content boxes on the page.*/
.box {
  background-color: white;
  border: 1px solid black;
  padding: 0.5em 1em;
  }
  
/*Goes inside the box class. Not given any style by default, but can be used for stuff like fancy borders.*/
.inner {

  }
  
/*Prevent image overflow.*/
.box img, .sidebar img {
  max-width: 100%;
  height: auto;
  }
  
/*Wrapper for the sidebar.*/
.sidebar {
  width: 200px;
  float: left;
  display: flex;
    flex-direction: column;
    align-items: center;
  }

.sidebar .box {
    width: 150px;
    margin-top: -60px;
    background-color: black;
    color: white;
    padding-top: 60px;
}

ul, li {
  margin: 0;
  padding: 0;
}

.sitemap > li > ul {
  margin-top: .75rem;
}

ul {
  list-style: none;
}
ul li {
  line-height: 1rem;
  vertical-align: top;
  position: relative;
}
ul li a {
  text-decoration: none;
  color: #fb177c;
  display: inline-block;
}
ul ul {
  margin-left: 1rem;
  margin-bottom: 1rem;
}
ul ul li {
  position: relative;
}
ul ul li::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 100%;
  border-left: 1px #ccc solid;
  position: absolute;
  top: -0.5rem;
}
ul ul li::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1rem;
  border-bottom: 1px #ccc solid;
  position: absolute;

}
ul ul li a {
  margin-left: 1.75rem;
}

/*Container for the sidebar image.*/
.sidebar-image {
  height:198px;
  clip-path: circle(100px at center);
  background-image: url('/bg/gif/noisedeck-1692397991790.gif');
  }
  
/*Remove extra padding line at the bottom of the image.*/
.sidebar-image img {
  display: block;
  }
  
/*This is where the title, navbar, and main content all go.*/
.main-wrapper {
  margin-left: 225px;
  }
  
/*Two columns by default. The "single-column" class can be added to make it one column.*/
.main {
  columns: 2;
  column-gap: 25px;
  }
  
/*Make sure boxes don't spread over multiple columns.*/
.main .box {
  display: inline-block;
  }
  
.single-column {
  columns: 1;
  }
  
.footer {
  margin-bottom: 25px;
  }
  
.mobile-welcome {
  display:none;
}

.mobile-image {
      position: absolute;
    top: -50px;
    left: -100px;
    z-index: -1;
    transform: rotate(334deg);
}
  
@media(max-width:915px) {
  
  .sidebar .box {
    width: auto;
    margin-top: 25px;
    background-color: black;
    color: white;
    padding-top: .5em;
    }
    
    .sidebar-image {
display:none;
    }
    
  .wrapper {    
    width: 95%;
    }
    
  .main-wrapper {
    width: calc(100% - 225px);
    }

  .mobile-welcome {
    display: block;
    width: 100%;
    height: 100%;
  }
  }
  
@media (orientation: portrait), (max-width: 480px) {
  .wrapper {
    width: 100%;
    }
  
  .main-wrapper, .sidebar, .footer {
    margin: 0 auto;
    width: 90%;
    }
  
  .sidebar {
    float: none;
        display: flex;
    flex-direction:row;
    }

  .sidebar-image {
    margin: 0 auto;
    width: auto;
    margin-top:25px;
    }

  .sidebar .sidebar-image img {
    width: 100%;
    }
    
  .footer {
    margin-bottom: 25px;
    }
  
  }
  
  .typewriter h2 {
  position: relative;
  color: black;
  font-family: monospace;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: 0.5em solid #fb177c; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.75s steps(35, end),
    blink-caret .5s step-end infinite;
}

.typeclass {
      display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    width: max-content;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #fb177c }
}

.ripple {
  margin-top:-8px;
  margin-left: -8px;
   width: 15px;
   height:15px;
   background-color: transparent;
   position: fixed;
   border-radius: 50%;
   border: 1px solid #fb177c;
   pointer-events: none;
}

@keyframes ripple-effect {
   to {
      transform:scale(1.7);
      opacity: .5;
   }
}

.tabcontent {  
 transition: 2s;
}

.tabcontent.on {
    -webkit-animation: fadein 0.6s 1 linear alternate;
    -moz-animation: fadein 0.6s 1 linear alternate;
    -ms-animation: fadein 0.6s 1 linear alternate;
    -o-animation: fadein 0.6s 1 linear alternate;
    animation: fadein 0.6s 1 linear alternate;
}
	
	@keyframes fadein {
  0% { opacity: 0; transform: translateY(7px); 
    }
  30% { opacity: 0; transform: translateY(7px); 
    }
  100% { opacity: 1; transform: translate(0px);
    }
  }
	
.trigger {
   transition: 2s;}