html {
    height: 100dvh;
    width: 100dvw;
}
body {
    margin:0;
    height: 100dvh;
    width: 100dvw;
    overflow: hidden;
    align-items: center;
    align-content: center;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pondstar{
    display:flex;
    flex-direction: column;
    padding:2em;
    border: 2px red dotted;
    margin: 2em;

}
.pondrow{
    display:flex;
    flex-direction: row;
    width:100%;
    align-items: center;
    vertical-align: middle;
}
.pondcolumn{
    display:flex;
    flex-direction: column;
    height:100%;

}

.logo{
    height:2em;
}
.pondtitle{
    font-size: 4em;
}

.fitimage {
    object-fit: cover;
display:flex;
}

.fitimage img{
    height:100%;
    width:100%;
}

#navball{
display:flex;
width:auto;
height:30dvh;
}
#navball img{
    width:100%;
    height:100%;

}
#navball canvas{
    border-radius:50%;
    height: 14em;
    width: 14em;
}
.hidden{
    display:none;
}

.pondstarfooter{
    height: 100px;
}

.pondstarcontent{
    height: 80%;
    width:100%;
}
.pondstarheader{
    height:10%;
}

.pondlight{
    display:flex;
   padding:1em;
   margin:1em;
   border-radius: 5px;
}

.lightbar{
    display:flex;
    flex-direction: row;
    border: 1px solid blue;

}
.pondbutton{
    width:100%;
    background-color: darkgrey;
    display:flex;
    height: 2em;
}