:root {
    --caption-num-of-lines: 4;
    /* This is smaller text, can fit more lines! */
    --caption-font-size: 1.1em;
    --caption-line-height: 1.5em;
    --caption-height: calc(var(--caption-num-of-lines) * var(--caption-line-height));
    --screen-width: 1024px;
    --screen-height: 576px;
}


.b-row {
    background-color: black;
    width: 100% ;
}
.choice-button {
    width: fit-content;
    height: fit-content;
    font-size: var(--caption-font-size) ;
    color: black ;
    background-color: white;
    border: 2px solid black ;
    margin-bottom: 5%;
}
#choice-button-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    margin-top: 10%;
    align-items: center;

}
#gn-caption-container {
    display: flex;
    height: var(--caption-height);
    font-size: var(--caption-font-size);
    width: 100% ;
    border: 2px solid black ;
}
.gn-caption-container-style {
    background-color: white;
}

.grid-container {
    display: grid ;
   margin: auto ;
    grid-template-rows: 5px calc(var(--screen-height) - var(--caption-height) - 5px)  var(--caption-height) ;
}
#title-image, #bkg-img  {
    width: var(--screen-width);
    height: 100% ;
    padding: 0 ;
}

#v-main {
    position: relative;
    display: flex ;
   left: 0;
    width: 100% ;
    padding: 0 ;
    overflow: hidden;
}

#title {
    background-color: white;
    border: 5px black solid;
    user-select: none;
}
.no-show {
    visibility: hidden;
}