html { 
    background-color: rgb(20, 23, 26);
  }
  html,body {
    margin: 0;
    padding: 0;
    font-family: "Share Tech Mono", monospace;
    font-size: calc(2vh + 3vw);
    color:white;
    /* background-color: rgb(173, 41, 41); */
    z-index: -2;

  }
  
  canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -1;
  
  }
  
  p{ 
  
    font-size: 50%;
  }
  
  h1{ 
    margin: 0.1rem;
    padding: 0;
    /* background-color: green; */
    font-size:150%;
  }
  
  h2{
    /* width:100%; */
    height: 100%;
  
  
  
   font-size: 0.5rem;
   color: rgba(255, 255, 255, 0.607);
   text-align: center;
  display: grid; 
  align-items: center;
  
  
  z-index:1;
  
  }
  
  
  
  .content { 
    margin-top:1rem;
    min-height: 100vh;
  }
  
  
  
  
  
  /* =============NAV & FOOTER ============== */
  
  .nav{
    display:flex;
    text-align: center;
    /* padding: 14px 16px; */
    text-decoration: none;
    overflow:hidden;
    width: 100%;
    justify-content: center;
    z-index: 3;
    position: fixed;
    left:0;
    top:0;
    border-bottom: solid white 0.001rem;
  
  }
  
  .nav, #footer{ 
  font-size: 0.45rem;
  color: white;
  background-color: rgb(0, 0, 0);
  }

  
  /* Links inside the navbar */
  .nav a {
  float: right;
  text-align: center;
  text-decoration: none;
  color:inherit;
  /* margin:0.25rem; */
  padding:0.25rem;
  border:solid; 
  border-width: 0.0025rem;
  border-color:white;
  
  }
  
  .nav a:hover, .dropdown:hover .dropbtn {
  background-color: white;
  color:black;
  }
  
  #home { 
  position:absolute;
  left:0;
  
  color: white;
  border:none;
  }
  
  #home:hover { 
  background-color: inherit;
  color: white; 
  /* border-color: white; */
  }
  
  #footer { 
    /* margin-top: 4rem; */
    text-align: center;
    background: black;  
    /* padding: 0.25rem; */
    flex-direction: row;
  }
  #footer p { 
    font-size: inherit;
    margin: 0;

  }
  #footer .links { 
    width: 100%;
    margin: auto;
  } 
  #footer img {
    vertical-align: middle;
  
    width: 0.5rem;
    height: auto;
    margin: 0.25rem;
  
  }
  /* =================================== */
  

  .title{ 

    display: flex-box;
    flex-direction: column;
    font-size: 1rem;
  
  }

  h1{ 
    font-size: 125%;

  }

  h2{ 
    font-size: 40%;


  }
  .container {
    display: grid;
    grid-template-columns: 33% 33% 33%;


    padding: 0.5rem;

  }
  .container div {

    border: 0.1rem solid rgba(0, 0, 0, 0);
    /* background-color: rgb(255, 255, 255); */
    /* aspect-ratio: 1/1; */
    height: auto;  
    display:flex;
    position: relative;
    align-items: center;
    justify-content: center;


    text-align: center;
  }
  .vid{ 
    width: 100%;
    height: auto;
    object-fit: cover;
    overflow: hidden;
    opacity: 0.5;


  }


  .container div p { 
    display: block;
    position: absolute;
    color: rgb(255, 255, 255);
    font-size: 0.6rem;
    opacity: 0.8;
    /* padding: 0.5rem; */
    min-width:0;
  }
  /* .container div:hover p{ 
   display:none;
  } */
  
  
  

  
  


  

  
  
  
  
  
  
  
  
  
  
  
  @media screen and (max-width: 1000px) {
    .container {
      grid-template-columns:100%;
      /* grid-template-rows: 100%; */

    }
    .vid{ 
      margin-bottom:0.75rem;
    }
    .title{ 
      font-size: 1.25rem;
      margin-bottom: 0.75rem;
      margin-top:0.75rem;
    }
    .container div p{ 
      font-size: 1rem;
    }
  }
  
  /* ===================================== */