/* css variables */
:root 
{
   /* a nice standard color pallete for the website to use */
   --background-color-nav: #161320;
   --background-color-body: #1c1c1c;
   --background-color-footer: #252525;
   --primary-color: #ffffff;
   --secondary-color: #dfd3a1;
   /* set the height of the header, main and footer */
   --header-height: 50px;
   --footer-height: 100px;
   /* set the footer and header first so that I can */
   /* calculate the main's height based on the header and footer */
   --main-height: calc(100vh -
      var(--header-height) -
      var(--footer-height)
   );
   /* makes each link in the top nav take up 1/4th of the screen */
   /* since there are 4 links in the main nav */
   --nav-list-width: calc(100vw / 4);
}

/* load a custom font, jetbrains-mono in this case */
/* a nice programmer font */
@font-face 
{
  font-family: "Jetbrains-mono";
  src: url("../fonts/JetBrainsMono/fonts/webfonts/JetBrainsMono-Regular.woff2") format("woff2");
}

/* set the font globally to all elements and set a default font-size */
* 
{
   font-family: Jetbrains-mono;
   font-size: 13px;
}

/* disables the scrollbar for all mayor browsers for any element that uses this css block */
header::-webkit-scrollbar,
nav ul::-webkit-scrollbar 
{
   display: none; /* The other browsers */
}

header,
nav ul 
{
  -ms-overflow-style: none;  /* Edge */
  scrollbar-width: none;  /* Firefox */
}

html,
body,
header,
main,
footer 
{
   overflow-x: hidden !important;
   overscroll-behavior: none;
}

body 
{
   background-color: var(--background-color-body);
   margin: 0px;
   padding: 0px;
}

p, h1, h2, h3, h4, h5, h6 
{
   color: var(--primary-color);
}

header 
{
   height: var(--header-height);
}

nav 
{
   height: var(--header-height);
}

li a 
{
   width: 100%;
   height: 100%;
   display: inline-block;
   align-content: center;
}

img#coverBanner 
{
   width: 100%;
   height: 130px;
}

h2#coverText 
{
   position: fixed;
   top: 50px;
   text-align: center;
   width: 100%;
   height: 130px;
   margin: 0px;
   align-content: center;
   color: var(--primary-color);
   font-size: 24px;
}

a 
{
   text-decoration: none;
}

main 
{
   height: var(--main-height);
   padding-top: 5px;
   padding-bottom: 5px;
}

footer 
{
   height: var(--footer-height);
   position: fixed;
   bottom: 0px;
   width: 100%;
   background-color: var(--background-color-footer);
   text-align: center;
   align-content: center;
}

.fade
{
   /* make the element invisible */
   opacity: 0;
   /* make the change in opacity get applied slowly over the course of 2 seconds */
   transition: opacity 2.0s linear;
}

nav ul 
{
   margin: 0px;
   display: flex;
   overflow-x: scroll;
   padding: 0px;
   overscroll-behavior: none;
}

nav li 
{
   color: var(--secondary-color);
   list-style: none;
   min-width: var(--nav-list-width);
   max-width: var(--nav-list-width);
   text-align: center;
   border: 1px var(--secondary-color) solid;
   height: 48px;
   align-content: center;
}

/* make the nav list item stand out a bit more when you hover over it */
/* with your mouse */
nav li:hover 
{
   background-color: #252525;
   font-weight: bold;
}

#scrollList 
{
   height: 100%;
   overflow-x: scroll;
   overscroll-behavior: none;
}

.listOption 
{
   overflow: hidden;
   height: 30%;
   padding: 5px;
   margin: 5px;
}

img.listImage 
{
   width: 60%;
   height: 100%;
   float: left;
}

.listInfo 
{
   width: 40%;
   float: right;
}

h3.listTitle 
{
   text-align: center;
   margin-top: 0px;
   margin-bottom: 0px;
   font-size: 14px;
   margin-left: 5px;
}

p.listParagraph 
{
   margin-left: 5px;
   font-size: 10px;
}