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

  }

html {
    font-size: 16px;
}

body {
    background: #0b0b0b;
    color: rgb(170, 170, 170);
    font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;;
    margin: 0;
    padding: 1rem;
    /* border: 1px solid red; */
}

.body-content {
    text-align: center;
}

a {
    color:rgb(0, 255, 0);
}

h1 {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin: 1rem 0;
}

.poster {
    /* text-align: center; */
}

img {
    max-width: 100%;
    height: auto;
    width: auto; /* ie8 */
}

@media (max-width: 600px) {
    .navmenu {
        justify-content: center;
    }
}

footer {
    margin: 0;
    padding: 1rem 1rem;
    text-align: center;
}




.container {
    display: flex; /* does not seem to affect but keeping for consistency */
    /* border: 1px solid red; */
    justify-content: center; /* does not seem to affect but keeping for consistency */
    margin: 0 auto;
    max-width: 75%;
    font-size: .8rem;
    
}
  
.navmenu {
    display: flex; /* cards become flex items */
    /* border: 1px solid yellow; */
    flex-wrap: wrap;
    justify-content: center; /* centers the wrapped stuff when window is small */
    max-width: 100%;
    gap: 1rem;
    padding: 1rem;
    
}

.dl-group {
    font-size: 1.3rem;
    border: 1px solid lightblue;
    padding: 1rem 1rem;
    width: auto;
    border-radius: 0.5rem;
    
    /* overflow: hidden; */
}

.dl-group dl {
    margin: 0;
    /* border: 1px solid red; */
    
    
}

.dl-group dt {
    margin: 0;
    border-radius: .5rem .5rem 0 0; /* round top only */
    background-color:  rgb(0, 255, 0);
    color:black;
    font-weight: bold;
    text-align: center;
    
}

.dl-group dd:first-of-type {
    border-radius: 0 0 .5rem .5rem; /* makes the first dd symmentrical and fit to the dt above */ 
}

 /* style for cards dd - added first of type below to help with subpixel overlapping behavior - zooming in exposed the overap*/
.dl-group dd {
    margin: -2px 0 0 0; /* pull up over previous border */
    padding: .1rem .7rem;
    color: lightblue !important;
    border: 2px solid rgb(70, 70, 70);
    border-radius: .5rem;
    text-align: center;
    
}

.dl-group dd a{
    color: lightblue; /* link colors */
}


/* helps with subpixel overlapping behavior - keeping both because firefox vs chhrome*/
.dl-group dd:first-of-type {
    transform: translateY(0.1px);
    margin-top: 0.1px;
  }






  .glitch {  
    font-size: 2rem;
    font-weight: bold;
    color: white;
    text-align: center;
    margin: 1rem 0;
    text-transform: uppercase;
    position: relative;  
    letter-spacing: 2px;
    animation: glitch 500ms infinite;

  }
  
  .glitch span {
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .glitch span:first-child {
    animation: glitch 650ms infinite;
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    transform: translate(calc(-0.025em*var(--glitch-spread)), calc(-0.0125em*var(--glitch-spread)));
    /* color: green; */
    opacity: 0.8;
  }
  
  .glitch span:last-child {
    animation: glitch 375ms infinite;
    clip-path: polygon(0 80%, 100% 20%, 100% 100%, 0 100%);
    transform: translate(calc(0.0125em*var(--glitch-spread)), calc(0.025em*var(--glitch-spread)));
    /* color: red; */
    opacity: 0.8;
  }
  
  
  @keyframes glitch {
    0% { text-shadow: 
        0.05em 0 0 rgba(255, 0, 0, 0.75),
        -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
        -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
    }
    14% { text-shadow: 
        0.05em 0 0 rgba(255, 0, 0, 0.75),
        -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
        -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
    }
    15% { text-shadow: 
        -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
        0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
        -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
    }
    49% { text-shadow: 
        -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
        0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
        -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
    }
    50% { text-shadow: 
        0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
        0.05em 0 0 rgba(0, 255, 0, 0.75), 
        0 -0.05em 0 rgba(0, 0, 255, 0.75);
    }
    99% { text-shadow: 
        0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
        0.05em 0 0 rgba(0, 255, 0, 0.75), 
        0 -0.05em 0 rgba(0, 0, 255, 0.75);
    }
    100% { text-shadow: 
        -0.025em 0 0 rgba(255, 0, 0, 0.75),
        -0.025em -0.025em 0 rgba(0, 255, 0, 0.75),
        -0.025em -0.05em 0 rgba(0, 0, 255, 0.75);
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
      animation-delay: -1ms !important;
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      background-attachment: initial !important;
      scroll-behavior: auto !important;
      transition-duration: 0s !important;
      transition-delay: 0s !important;
    }
  }