root {
  --headerHeight: 3rem;
}



/* =============================================================================
   HTML5 CSS Reset Minified - Eric Meyer
   ========================================================================== */

/* html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle} */
/* li{list-style:none} */


/* =============================================================================
   My CSS
   ========================================================================== */

/* ---- base ---- */

html,body{ 
	width:100%;
	height:100%;
	/* background:#111; */
}

html{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body{
  font:normal 100% Arial, Helvetica, sans-serif
}

canvas{
  display:block;
  vertical-align:bottom;
}



/* ---- particles.js container ---- */

#particles-js{
  position: absolute;
  z-index: 96;
  top: 0px;
  left: 0px;
  /* top: 1.2em; */
  padding: 0px;
  margin: 0px;
  max-width: 100vw;
}


.particles-js-canvas-el{
  position: absolute;
  z-index: 97;
  top: 0px;
  left: 0px;
  margin: auto;
  max-width: 100vw;
  width: 100%;
  background-color: rgb(2, 0, 119);
  /* height: var(--headerHeight); */
}

#titleWrapperDiv{
  z-index: 98;
  width: 100vw;
  /* min-height: 133px; */
  min-height: 80px;
  max-width: 100vw;
  height: 15vh;
  display: flex; flex-direction: row; text-align: center; justify-content: center;
  padding: 0;
  margin: 0;
}

#titleDiv{
  z-index: 99;
  max-width: 100vw;
  width: 100vw;
  height: auto;
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-family: 'Times New Roman', Times, serif;
  filter: drop-shadow(0px 0px 14px rgb(255, 255, 255)) drop-shadow(0px 0px 14px rgb(255, 255, 255)) drop-shadow(0px 0px 14px rgb(255, 255, 255)) drop-shadow(0px 0px 14px rgb(255, 255, 255))  drop-shadow(0px 0px 14px rgb(255, 255, 255));
  font-size: 2.75em;
  font-weight: bold;
  display: flex; flex-direction: row; text-align: center; justify-content: center;
}

#titleSpan1, #titleSpan2{
  position: relative;    
  z-index: 100;
  display: flex; flex-direction: column; text-align: center; justify-content: center;
  color: black;
  white-space: nowrap;
  font-size: max(5vh, 1.75rem);
}
#titleSpan2 {
  font-size: 2.55rem;
}



/* RESPONSIVE DESIGN: */

  @media only screen and (max-width: 599px) {
    #titleSpan1, #titleSpan2{
      font-size: 2.5rem;
    }
    #titleSpan2{
      display: none;
      visibility: hidden;
    }
  }

  @media only screen and (min-width: 600px) and (max-width: 900px) {
    #titleSpan1, #titleSpan2{
      
    }
    #titleSpan2{
      display: none;
      visibility: hidden;
    }
  }

  @media only screen and (min-width: 901px) and (max-width: 1200px) {
    #titleSpan1, #titleSpan2{
      
    }
    #titleSpan2{
      display: none;
      visibility: hidden;
    }
  }

  @media only screen and (min-width: 1201px) and (max-width: 1800px) {
    #titleSpan1, #titleSpan2{
      
    }
    #titleSpan2{
      display: flex; flex-direction: column; text-align: center; justify-content: center;
      visibility: visible;
    }
  }

  @media only screen and (min-width: 1801px) {
    #titleSpan1, #titleSpan2{
      
    }
    #titleSpan2{
      display: flex; flex-direction: column; text-align: center; justify-content: center;
      visibility: visible;
    }
  }