style.css

#canvasBackground {
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    position:absolute;
}

#canvasFade{
    margin:0;
    height: 100vh;
    aspect-ratio:1;
    position:absolute;
}

#canvasSmoke{
    margin:0;
    height: 100vh;
    aspect-ratio:1;
    position:absolute;
}

#canvasRain{    
    margin:0;
    height: 100vh;
    /* aspect-ratio: 1/1; */
    aspect-ratio: 1;
    position:absolute;
}

#canvasFront {    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    position:absolute;
}

#canvasDetail {    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    position:absolute;
}

#canvasStars {    
    margin:0;
    height: 100vh;
    /* height:150%; */
    /* width:150%; */
    /* width:100%; */
    aspect-ratio: 1/1;
    position:absolute;

    mask-mode: alpha;
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-image: url(images/test\ mask3.png);
    overflow: hidden;
    /* overflow:visible; */
} 
#canvasStars2 {    
    margin:0;
    height: 100vh;
    /* width:100%; */
    aspect-ratio: 1/1;
    position:absolute;

    mask-mode: alpha;
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-image: url(images/test\ mask3.png);
    overflow: hidden;
} 

#canvasMoon{    
    margin:0;
    height: 100vh;
    /* width:100%; */
    aspect-ratio: 1/1;
    position:absolute;

    mask-mode: alpha;
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-image: url(images/test\ mask3.png);
    overflow: hidden;
} 

#canvasComet{    
    margin:0;
    height: 100vh;
    /* width:100%; */
    aspect-ratio: 1/1;
    position:absolute;

    mask-mode: alpha;
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-image: url(images/test\ mask3.png);
    overflow: hidden;
} 

#canvasTitle{    
    margin:0;
    height: 100vh;
    /* width:100%; */
    aspect-ratio: 1/1;
    position:absolute;

    mask-mode: alpha;
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-image: url(images/titlemask2.png);
    /* mask-image: url(images/title\ mask4.png); */
    overflow: hidden;
} 

#canvasTitleFront{    
    margin:0;
    height: 100vh;
    /* width:100%; */
    aspect-ratio: 1/1;
    position:absolute;
}

#canvasPlane{    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    position:absolute;
}
#canvasPlane2{    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    position:absolute;
}
#canvasNightPlane{    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    position:absolute;
}
#canvasTrail{    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    position:absolute;
}

#canvasTrailOverlay{    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    position:absolute;
}
#canvasTrailOverlay2{    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    position:absolute;
}

#canvasTrail2{    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    position:absolute;
}

#canvasClouds1{    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    position:absolute;
}
#canvasClouds2{    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    position:absolute;
}
#canvasClouds3{    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    position:absolute;
}
#canvasClouds4{    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    position:absolute;
}
#canvasClouds5{    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    position:absolute;
}

#canvasBird{    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    /* height:15%; */
    /* aspect-ratio: 1/1; */
    position:absolute;
}

#canvasBird2{    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    /* height:15%; */
    /* aspect-ratio: 1/1; */
    position:absolute;
}

#canvasBird3{    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    /* height:15%; */
    /* aspect-ratio: 1/1; */
    position:absolute;
}
#canvasBird4{    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    position:absolute;
}

#canvasAnimationTest{    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    position:absolute;
}

#canvasBirdFlock{    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    position:absolute;
}
#canvasBirdFlock2{    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    position:absolute;
}

#canvasBorealis{    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    position:absolute;
}

#canvasWindow1{    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    position:absolute;
}
#canvasWindow2{    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    position:absolute;
}
#canvasWindow3{    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    position:absolute;
}

#canvasLights{    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    position:absolute;
}

#canvasTest{    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    position:absolute;
}

#canvasButtons{    
    margin:0;
    height: 100vh;
    aspect-ratio: 1/1;
    position:absolute;
    /* display:block; */
}


#canvasContainer {
    position:relative;
    /* padding-left:0;
    padding-right:0;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    display:block; */
    /* display:flex; */
    /* justify-content:50%; */
    /* justify-content:right; */
    /* align-items:center; */
}

body {
    min-height: 100%;
    height:100%;
    margin:0;
    z-index: 2;
    display:flex;
    overflow:hidden;
    background: rgba(0,0,0,0);
}

button {
    opacity:0.2;
    position:relative;
    display:block;
    flex-direction: row;
    /* flex-direction: column; */
    /* z-index: 9999; */
    font-size: 16px;

    margin:10px;
    height:26px;
  }

button2 {
    display:flex;
    /* flex-direction: column-reverse; */
    color: rgba(255,255,255,0.5);
    font-size: 16px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: rgba(0,0,0,0.1);

    align-items: center;
    justify-content: center;
    cursor: pointer;

    border-style: solid;
    border:0.5px;
    border-radius: 6px;
    /* margin:10px; */
    margin-left:10px;
    margin-top:10px;
    margin-right:20px;
    height:30px;
    /* width:110px; */
    width:110px;
  }

/* button2:hover {
    scale:1.1;  
} */

.outlined{
    border-style:solid;
    /* border-color: black; */
    border:2px;
    background-color: rgba(0,0,0,0.5);
}

buttonSound {
    display:flex;
    /* flex-direction: row; */
    font-size: 16px;
    /* color:black; */
    /* color: rgba(255,255,255,0.5); */
    color: rgba(255,255,255,0.3);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    /* background-color: rgba(0,0,0,0.1); */
    background-color: rgba(0,0,0,0.05);

    align-items: center;
    justify-content: center;
    cursor: pointer;

    border-style: solid;
    border:0.5px;
    border-radius: 6px;
    margin:10px;
    margin-top:35px;
    /* height:30px; */
    /* height:50px; */
    height:25px;
    width:30px
  }

buttonSound:hover {
    scale:1.1;  
}

buttonMain{
    display:flex;
    /* flex-direction: row; */
    /* font-size: 16px; */
    font-size:20px;
    /* color:black; */
    color: rgba(255,255,255,0.5);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: rgba(0,0,0,0.1);

    align-items: center;
    justify-content: center;
    cursor: pointer;

    border-style: solid;
    border:0.5px;
    border-radius: 6px;
    margin-top:10px;
    margin-right:10px;
    /* height:30px */
    /* width:40px */
    height:50px;
    width:70px
  }

buttonMain:hover {
    scale:1.1;  
}

buttonDebug{
    display:flex;
    font-size: 16px;
    color: rgba(255,255,255,0.3);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: rgba(0,0,0,0.05);

    align-items: center;
    justify-content: center;
    cursor: pointer;

    border-style: solid;
    border:0.5px;
    border-radius: 6px;
    margin:10px;
    /* height:30px;
    width:40px */
    height:20px;
    width:30px
  }

buttonDebug:hover {
    scale:1.1;  
}


#buttonBig{
    display:flex;
    /* flex-direction: row; */
    font-size: 26px;
    /* color:black; */
    color: rgba(255,255,255,0.5);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: rgba(0,0,0,0.1);

    align-items: center;
    justify-content: center;
    cursor: pointer;

    border-style: solid;
    border:0.5px;
    border-radius: 6px;
    margin:20px;
    height:60px;
    width:120px
  }

buttonBig:hover {
    scale:1.1;  
}

#bigButtonDiv {
    /* position:absolute; */
    position:relative;
    display:flex;
    top:40%;
    left: 50%;
    /* transform: translate(-50%, -50%); */
    transform: translate(-50%);
    /* top:90px; */
    /* top:50%; */
    /* left:50%; */
    /* left:25% */
    /* var canvas width? */
}

#soundButtonDiv {
    position:absolute;
    /* position:relative; */
    display:flex;
    top:90px
  }


  #firstRow {
    position:absolute;
    display: flex
  }

  #secondRow {
    /* top:40px; */
    top:60px;
    display: flex; 
    flex-direction: column;
    position:absolute;
    left:240px;

  }

  #thirdRow {
    top:60px;
    /* top:40px; */
    display: flex; 
    position:absolute;
    flex-direction: column;
    /* left:120px; */
  }
  #fourthRow{
    /* top:90px; */
    /* top:40px; */
    top:60px;
    /* bottom:60px; */
    display: flex; 
    position:absolute;
    flex-direction: column;
    left:120px;
  }


  #debugRow{
    position:absolute;
    display: flex;
  }