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

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;
  color: white;
}

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

body{
  font-family: 'Ubuntu', Arial, Helvetica, sans-serif;
  font-size: 2.5rem;
  line-height: 1.5rem;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

#container{
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Distribute space evenly */

}

#container #particles-js, #overlay, #footer{
  position: absolute;
}

#particles-js{
  width: 100%;
  height: 100%;
  background-color: #111;
  background-image: url('https://wallpapercave.com/wp/FjnZ25X.jpg');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

#overlay{
  top: 0px;
  margin-top: 5%;
  margin-left: 10%;
  margin-right: 10%;
}

#overlay h1{
  font-size: 3rem; /* Default size for h1 on larger screens */
  font-weight: 700;
}

#overlay h3{
  font-size: 1.5rem; /* Default size for h3 on larger screens */
  font-weight: 300;
}

#footer{
  position: relative;
  font-size: 1.0rem; /* Smaller text */
  text-align: left; /* Left-justified */
  margin-top: auto; /* Pushes the footer to the bottom */
  margin-left: 10%;
  padding-bottom: 5%; /* Keeps footer 5% from the bottom */
  font-weight: 300;
}

canvas {
  border: 1px solid black;
  display:block;
}

a {
  color: white; /* Set the link text color */
  text-decoration: none; /* Remove the underline (optional) */
}

a:hover {
  color: #cccccc; /* Set hover color (optional) */
  text-decoration: underline; /* Add underline on hover (optional) */
}