@font-face {
  font-family: 'Comic Sans MS';
  src: url('ComicSans.ttf') format('truetype');
}

.glass {
    /* From https://css.glass */
    background: rgba(0, 0, 0, 0.25);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.25);
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100em;
    /* Optional: set a max-width if you want to limit how wide the glass can get */
    /* max-width: 100%; */
}




.glassline {
    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.5);
    border-radius: 1em;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border: 1px solid rgba(255, 255, 255, 0.50);  
    width: 50%;
    margin: 2em auto;
    height: 1em;
}

.glasswhite {
    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.50);  
    width: max-content;
}

nav {
  float: left;
  width: calc(max-content + 1em);
  /*padding: 20px;*/
  box-align: left;
  margin: auto;
}

nav ul {
  list-style-type: none;
  padding: 0;
  size: calc(max-content + 1em);
  text-align: center;
  font-size: 1.25em;
  color: rgb(255, 255, 255);
}
li a {
    text-decoration: none;
    font-family: 'Comic Sans MS';
    color: rgb(255, 255, 255);
    filter: drop-shadow(0 0 4px rgb(255, 255, 255, 0.25));
    transition: text 0.5s;
}

li a:hover {
    color: transparent;
    background: linear-gradient(
        270deg,
        #ff0000,
        #00ff00,
        #ff0000
    );
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: redgreenwave 2s linear infinite;
    filter: brightness(1.5) drop-shadow(0 0 4px rgb(255, 255, 255, 0.5));
}

@keyframes redgreenwave {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 200%; }
}

small {
  font-size: 0.8em;
  color: rgb(178, 178, 178);
}



/* Flexbox row for image and text */
.row-flex {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.right-text {
  font-size: 1.2em;
  margin-left: 1em;
  text-align: left;
  color: inherit;
  word-break: break-word;
  overflow-wrap: break-word;
  min-width: 0; /* important for flex children to allow shrinking/wrapping */
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .layout {
    flex-direction: column;
    align-items: stretch;
  }
  .sidebar {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 0.5em 0;
  }
  .main-content {
    max-width: 100%;
    padding: 1em 0.5em;
  }
}