/* general page things */
:root {
  --background-color-light: #F1F0E8;
  --background-color-dark: #282c34;

  --accent-color: #b30000;
  --accent-color-dark: #ff4040;

  --light-gray: #d9d8ce;
  --light-gray-darker: #bab9ad;
  --dark-gray: #40454f;
  --dark-gray-lighter: #50555f;

  --scrollbar-thumb-light: #bababa;
  --scrollbar-active-light: #aaaaaa;

  --scrollbar-thumb-dark: #555555;
  --scrollbar-active-dark: #606060;

}

.light-theme {
  background-color: var(--background-color-light);
  color: black;

  a {
    color: var(--accent-color)
  }

  :focus-visible{
    outline: 1px solid var(--accent-color);
  }

  #pages {
    background-color: var(--background-color-light);
  }

  #theme:after{
    content: "\1F323";
  }

  #pages>a {
    color: var(--light-gray-darker);
    border-color: var(--light-gray-darker);
  }

  #pages>a.active, #pages>a:hover, #pages>a:focus-visible {
    color: var(--accent-color);
    border-color: var(--accent-color);
  }

  #language {
    background-color: var(--light-gray);
    color: var(--background-color-dark);
  }

  footer {
    hr {background-color: var(--dark-gray);}
    #copyright {
      color: var(--dark-gray);
    }
  }
}

html:has(.light-theme) {
  scrollbar-color: var(--accent-color) transparent;
}

.dark-theme {
  background-color: var(--background-color-dark);
  color: white;

  a {
    color: var(--accent-color-dark);
  }

  :focus-visible {
    outline: 1px solid var(--accent-color-dark);
  }

  #logo, #footerLogo, #socials img {
    filter: invert(1);
  }

  #pages {
    background-color: var(--background-color-dark);
  }

  #theme:after{
    content: "\263D";
  }

  #pages>a {
    color: var(--dark-gray-lighter);
    border-color: var(--dark-gray-lighter);
  }

  #pages>a.active, #pages>a:hover, #pages>a:focus-visible {
    color: var(--accent-color-dark);
    border-color: var(--accent-color-dark);
  }

  #language {
    background-color: var(--dark-gray);
    color: var(--background-color-light);
  }

  footer {
    hr {background-color: var(--light-gray);}
    #copyright {
      color: var(--light-gray);
    }
  }
}

html:has(.dark-theme) {
  scrollbar-color: var(--accent-color-dark) transparent;
}



/*

html:has(.light-theme)::-webkit-scrollbar-track {
  background-color: var(--light-gray);
}
html:has(.light-theme)::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-light);
}
html:has(.light-theme)::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-active-light);
}
html:has(.light-theme)::-webkit-scrollbar-thumb:active {
  background-color: #999999;
}
html:has(.dark-theme)::-webkit-scrollbar-track {
  background-color: var(--dark-gray);
}
html:has(.dark-theme)::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-dark);
}
html:has(.dark-theme)::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-active-dark);
}
html:has(.dark-theme)::-webkit-scrollbar-thumb:active {
  background-color: #666666;
}
*/
  body {
    font-family: Montserrat, Verdana, Helvetica, sans-serif;
    text-align: center;
    margin: 0;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
    
    display: grid;
      grid-template-rows: auto auto 1fr auto;
  }

.loadTransition {
  transition: filter 0.2s linear;
}



  * {
    -webkit-tap-highlight-color: transparent;
  }

  ::selection {
    background-color: rgb(179,0,0,0.4);
  }

  /*scrollbar*/
  html {
    scroll-behavior: smooth;
    scrollbar-width: auto;
  }