/* styles.css */

:root {
  /* NAMING SCHEME: TAB [BUTTON] [TEXT/BG] [SELECTED] [HOVER] COLOR*/


  /* Generic */
  --TabHeight: 67px;
  --BgColor: #676767;
  --BgColorFade: #00000067;
  --EffectToggleButtonOpacity: 0.4;

  --TabBgColor: #444444;
  --TabBgColor2: #555555; 

  /* Border */
  --TabBorderColor: #AAAAAA;
  --TabBorderSelectedColor: #00FF00;

  /* Border Hover */
  --TabBorderHoverColor: #000000;
  --TabBorderSelectedHoverColor: #00FF00;

  /* Text */
  --TabButtonTextColor: #FFFFFF;
  --TabButtonTextSelectedColor: #00FF00;

  /* Text Hover */
  --TabButtonTextHoverColor: #000000;
  --TabButtonTextSelectedHoverColor: #00FF00;

  /* Button BG */
  --TabButtonBgColor: linear-gradient(180deg,#232323, #343434);
  --TabButtonBgSelectedColor: linear-gradient(180deg,#343434, #346734);

  /* Button BG Hover */
  --TabButtonBgHoverColor: linear-gradient(180deg,#676767, #EEEEEE);
  --TabButtonBgSelectedHoverColor: linear-gradient(180deg,#676767, #EEEEEE);

  /* Hover time */
  --HoverMoveTimeStart: 0.1s;
  --HoverMoveTimeStop: 0.2s;
  --HoverMoveLogoProperties: translate(10px,10px) scale(1.25);
  --HoverMoveProperties: translate(10px,10px) scale(1.15);
  --HoverMoveNotProperties: translate(20px,0px) scale(1.00);
}

#transitionVideo {
    opacity: 1;
    pointer-events: none;
    position: fixed;
    object-fit: fill;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

body {
  opacity: 0;
  transition: 1s ease;
  font-family: Arial, sans-serif;
  margin: 0;
  background: var(--BgColorFade);
  padding-top: calc(var(--TabHeight) + 5px);
}
body.visible {
  opacity: 1;
}


header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--TabBgColor);
  overflow: visible;
}
.corner-text {
  position: fixed;
  bottom: 10px;
  left: 10px;
  color: white;
  font-size: 12px;
  background: #666;
  padding: 5px;
  border-radius: 2px;
  border-style: ridge;
  border-color: darkgray;
}

.tabs {
  display: flex;
  height: var(--TabHeight);
  align-items: center;            /* vertically center tabs */
  padding: 0 5px;                 /* optional horizontal padding */
  box-sizing: border-box;         /* include padding in height */
  -webkit-overflow-scrolling: touch; /* smooth scrolling on mobile */
}
nav.tabs {
  display: flex;
  align-items: center;
  height: var(--TabHeight);
  overflow: visible; /* Prevent the nav.tabs from scrolling */
}
.nav-links {
  display: flex; /* Make the links inside also use flex for alignment */
  overflow-x: scroll; /* THIS MAKES IT SCROLLABLE */
  overflow-y: visible;
  flex-grow: 1; /* Allows it to take up the remaining space */
  align-items: center;
  padding: 20px 20px 20px 20px; /* Adds space around the scrolling tabs */
  margin-left: 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-width: none;
}

.tab {
  flex: 0 0 auto; /* do not grow or shrink, width based on content */
  color: var(--TabButtonTextColor);
  background: var(--TabButtonBgColor);
  padding: 15px 20px;
  margin: 0 5px;
  text-decoration: none;
  border-radius: 5px;
  transition: var(--HoverMoveTimeStop);
  border-style: groove;
  border-color: var(--TabBorderColor);
}

.tab:hover {
  background: var(--TabButtonBgHoverColor);
  border-radius: 5px;
  color: var(--TabButtonTextHoverColor);
  transform: var( --HoverMoveProperties);
  transition: var(--HoverMoveTimeStart);
  border-style: solid;
  border-color: var(--TabBorderHoverColor);
}

.tab.active {
  background: var(--TabButtonBgSelectedColor);
  color: var(--TabButtonTextSelectedColor);
  border-radius: 10px;
  transition: var(--HoverMoveTimeStart);
  border-style: groove;
  border-color: var(--TabBorderSelectedColor);
}

.tab.active:hover {
  background: var(--TabButtonBgSelectedHoverColor);
  color: var(--TabButtonTextSelectedHoverColor);
  border-radius: 10px;
  transition: var(--HoverMoveTimeStart);
  transform: var( --HoverMoveProperties);
  border-style: groove;
  border-color: var(--TabBorderSelectedHoverColor);
}





main {
  padding: 20px;
}

nav.tabs {
  display: flex;
  align-items: center;
  height: var(--TabHeight);
  overflow: visible;
}

nav.tabs img {
  height: calc(var(--TabHeight) * 0.8);
  width: auto;
  display: block;
  border-radius: 5px;
  border-style: solid;
  border-radius: 5px;
  border-color: var(--TabBgColor2);
  transition: var(--HoverMoveTimeStop);
}

nav.tabs img:hover {
  transform: var( --HoverMoveLogoProperties);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: var(--HoverMoveTimeStart);
}

.tabs .tab {
  transition: var(--HoverMoveTimeStop);
}

.tab:hover ~ .tab {
  transform: var(--HoverMoveNotProperties);
  transition: var(--HoverMoveTimeStart);
}

/* Special effects */
.effect-toggle {
    background-color: var(--TabButtonBgSelectedColor);
    color: var(--TabButtonSelectedColor);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 16px;
    cursor: pointer;
    opacity: var(--EffectToggleButtonOpacity);
    transition: opacity 0.3s ease;
}

.effect-toggle:hover {
    opacity: 1;                    /* fully visible on hover */
    background-color: var(--TabButtonBgSelectedHoverColor);
    color: var(--TabButtonTextSelectedHoverColor);
}