body {
  margin: 0;
  background-color: #1a1a1a;
  font-family: Verdana, sans-serif;
  color: #fff;
  background-image: url('images/tile-bg.gif');
  background-repeat: repeat;
}

#header {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: visible;
}

#header-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#header-logo {
  position: absolute;
  bottom: 10px;
  right: 10px;
  height: 100px; 
  width: auto;
  z-index: 10;
  object-fit: contain;
}

#nav-bar {
  background-color: #333;
  text-align: center;
  padding: 8px;
  font-size: 14px;
  font-weight: bold;
  border-top: 2px solid #93d50a;
  border-bottom: 2px solid #93d50a;
}

#nav-bar a {
  color: #fff;
  text-decoration: none;
  margin: 0 10px;
}

#main-container {
  display: flex;
  max-width: 1000px;
  margin: 20px auto;
  background-color: #222;
  border: 2px solid #93d50a;
  padding: 20px;
  align-items: flex-start;
}

#sidebar {
  width: 250px;
  background-color: #111;
  padding: 10px;
  border-right: 2px solid teal;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: auto;
  flex-shrink: 0;
}

#sidebar h3 {
  font-size: 16px;
  border-bottom: 1px dashed teal;
  padding-bottom: 5px;
  margin-bottom: 0px;
}

#sidebar ul {
  list-style: none;
  padding: 0;
}

#sidebar ul li {
  margin: 8px 0;
}

#sidebar ul li a {
  color: #ccc;
  text-decoration: none;
}

#sidebar ul li a:hover {
  color: #fff;
  text-decoration: underline;
}

#sidebar audio {
  margin-top: 10px;
  width: 100%;
  outline: none;
}

#content {
  flex-grow: 1;
  padding-left: 20px;
}

h1 {
  font-size: 28px;
  color: #93D50A;
  text-transform: lowercase;
}

.gradient-text {
  background: linear-gradient(to right, #93D50A, #00C271);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.highlight {
  font-style: normal;
  color: #00C271;
}

.section {
  background-color: #111;
  border: 1px solid #93d50a;
  padding: 5px;
}

.section h2 {
  font-size: 18px;
  border-bottom: 1px solid #93d50a;
  padding-bottom: 5px;
  margin-bottom: 5px;
}

#footer {
  text-align: center;
  font-size: 12px;
  color: #888;
}

/* updatess */
.updates-scroll {
  max-height: 300px;
  overflow-y: auto;
  background-color: #111;
  border: 1px solid #93d50a;
  padding: 5px;
  margin-top: 5px;
}

.updates-scroll ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  color: #aaffaa;
}

.updates-scroll ul li {
  margin-bottom: 10px;
  font-size: 14px;
}

/* this is for da abtme brakets */
.interests-bracket {
  border: 2px solid #93d50a;
  padding: 15px;
  margin-bottom: 20px;
  background-color: #111;
  color: #aaffaa;
  font-family: 'Verdana', sans-serif;
  font-size: 15px;
  border-radius: 5px;
}

.interests-bracket h2 {
  border-bottom: 1px dashed #93d50a;
  padding-bottom: 5px;
  margin-bottom: 10px;
  font-size: 18px;
}

.interests-bracket ul {
  list-style-type: none;
  padding-left: 0;
}

.interests-bracket ul li {
  margin: 6px 0;
  padding-left: 10px;
  position: relative;
}

.interests-bracket ul li::before {
  content: '[';
  position: absolute;
  left: 0;
  color: #93d50a;
}

.interests-bracket ul li::after {
  content: ']';
  position: absolute;
  right: 0;
  color: #93d50a;
}

mark { 
  background-color: lime;
  color: black;
}

.link-buttons .twitter {
  color: #93D50A;
}
.link-buttons .twitter:hover {
  background: linear-gradient(to right, #1DA1F2, #AAB8C2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.link-buttons .insta {
  color: #93D50A;
}
.link-buttons .insta:hover {
  background: linear-gradient(to right, #405DE6, #5B51D8, #833AB4, #C13584, #E1306C, #FD1D1D, #F56040, #FCAF45, #FFDC80);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.link-buttons .bsky {
  color: #93D50A;
}
.link-buttons .bsky:hover {
  background: linear-gradient(to right, #AAB8C2, #1684FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.link-buttons .ko-fi {
  color: #93D50A;
}
.link-buttons .ko-fi:hover {
  background: linear-gradient(to right, #72A5F2, #FF6433, #FFD96E, #C19BFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.link-buttons .strawpage {
  color: #93D50A;
}
.link-buttons .strawpage:hover {
  background: linear-gradient(to right, #df001d, #e5f01a, #0068ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.animated-gradient-text {
    font-size: 16px;
    font-weight: bold;
    background: linear-gradient(270deg, #93d50a, #00C271, teal, #ff7300);
    background-size: 800% 800%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
    animation: gradientShift 8s ease infinite;
  }

  @keyframes gradientShift {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  .flip-card {
  background-color: transparent;
  width: 182px;
  height: 256px;
  perspective: 1000px;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flip-card-front {
  background-color: #bbb;
  color: black;
}
.flip-card-back {
  background-color: #111;
  color: #93d50a;
  transform: rotateY(180deg);
}
.rb1 {
  position: relative;
  z-index: 2;
}
.rb2 {
  position: relative;
  z-index: 1;
  top: -12px;
  left: -12px;
}
#content {
  flex-grow: 1;
  min-width: 0;
}