.bkgDraw {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: auto;
    z-index: 0;
    background-size: cover;
    background-position: center;
}
.bkgDraw canvas {
    display: block;
    width: 100vw;
    height: auto;
}
body {
    background-color: rgb(31, 31, 32);
    margin: 0;
    padding: 0;
}
.logo {
        width: 100 px; /* Adjust size as needed */
        height: auto;
        z-index: 10;
}
.echo-stack {
  position: relative;
  display: inline-block; 
  font-size: 64px; /* Make the echo text much larger */
  line-height: 0.0;
  font-weight: 300;
  margin-top: 10px;
}
.echo {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.7;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}
.echo-red {
  color: #ff4444;
  left: -4px;
}
.echo-white {
  color: #ffffff;
  left: 0;
}
.echo-blue {
  color: #4ed0ff;
  left: 4px;
}

.subtitle{
    position: fixed;
    top: 16px;
    left: 16px;
    color: white;
    font-size: 14px;
    z-index: 100;
    font-family: 'Qartella', Arial, sans-serif;
}

.content {
    position: fixed;
    top: max(50%, 300px);
    left: 16px;
    width: calc(100% - 32px); /* Adjust for padding */
    height: calc(100% - 50px - 50px); /* Adjust for header and footer */
    overflow-y: auto; /* Enable vertical scrolling */
    z-index: 100;
    color: white;
    font-family: 'Qartella', Arial, sans-serif;
}

.footer{
    color:#ffffff;
    font-family: 'Qartella', Arial, sans-serif;
    font-size: 10px;
    font-weight: 300;
    position: fixed;
    bottom: 50px;
    left: 16px;
    width: 100px; /* Adjust size as needed */
    height: auto;
    z-index: 100;
}

.footer_logo{
    position: fixed;
    bottom: 50px;
    left: 16px;
    width: 100px; /* Adjust size as needed */
    height: auto;
    z-index: 100;
}

h1 {
    color: white;
    z-index: 100;
    font-family: 'Qartella', Arial, sans-serif;
}

h2 {
    color: white;
    font-size: 24px;
    font-weight:300;
    z-index: 100;
    line-height: 0.05;
}
h3 {
    color: white;
    font-size: 18px;
    font-weight:300;
    z-index: 100;
}

a {
    color: #4ed0ff;
    text-decoration: none;
    font-family: 'Qartella', Arial, sans-serif;
}

.centered-video {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000; /* Make sure it's above other content */
    padding: 20px;
}

.centered-video video {
    max-width: 60vw;
    max-height: 60vh;
    display: block;
}