/* body elements */

html {
  height: 100%;
  align-items: stretch;
}

body {
  margin: 0;
  justify-content: stretch;
  background-color: var(--background);
  font-family: Arial;
  flex-grow: 1;
  overflow-x: auto;
  
  /* This is the noscript element, it gets converted to a span */
  & > span:first-child {
    text-align: center;
    padding: 0.5rem;
  }
}


/* current event (top bar) block */

#current_event_div {
  background-color: var(--current-event-banner-background);
  justify-content: center;
  gap: 0.3rem;
  font-size: 1.5rem;
  padding: 0.5rem;
}


/* scroll button div stuff */

#scroll_to_top_button_div, #scroll_to_bottom_button_div {
  height: 0;
  flex-direction: row-reverse;
  
  & > button {
    z-index: 1;
    padding: 0 0.6rem 0.2rem;
    margin: 0.5rem 1.3rem 0.5rem 0;
    border: 0.3rem solid var(--scroll-buttons-outline);
  }
}

#scroll_to_top_button_div {
  align-items: start;
}

#scroll_to_bottom_button_div {
  align-items: end;
}


/* bottom menu block */

#bottom_menu_div {
  background-color: var(--bottom-menu-background);
  flex-shrink: 0;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem;
  
  & > button {
    flex-shrink: 0;
    padding: 0.4rem 0.8rem 0.4rem;
    background-color: var(--bottom-menu-button-default);
    
    &:hover:where(:enabled) {
      background-color: var(--bottom-menu-button-hover);
    }
    
    &:active:where(:enabled) {
      background-color: var(--bottom-menu-button-active);
    }
    
    &.current_tab {
      background-color: var(--bottom-menu-button-current-tab);
    }
  }
}