*
{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

html, body
{
    margin:  0px;
    padding: 0px;
    width:   100%;
}

.ratingForm
{
    display:       none;            /* Hide the form until its (dynamic) formation is complete */
    margin:        5vh auto 0px;
    padding:       2vw;
    padding-left:  2vw;             /* For Firefox support, as 'padding' value cannot be retrieved through JS (an empty-string is returned) */
    width:         92vw;
    height:        auto;
    /*max-width: 1400px;*/

    background-position: top left;
    background-repeat:   no-repeat;
    background-size:     100% 100%;
}

#introAnimation
{
    position: absolute;
    top:      0;
    left:     0;
    width:    100vw;
    height:   100vh;
    z-index:  10;
}

.formText
{
    position:    relative;
    margin:      0 auto;
    width:       fit-content;
    text-align:  center;
    color:       blue;
    font-family: Arial, Helvetica, sans-serif;
    word-wrap:   break-word;
}

#title
{
    font-size:   6vw;
    text-shadow: none;
}

/* Rating-Bar */
.ratingBar
{
    position: relative;
    margin:   5% auto;
    
    width: intrinsic;           /* Safari/WebKit uses a non-standard name */
    width: -moz-max-content;    /* Firefox/Gecko */
    width: -webkit-max-content; /* Chrome */

    height: intrinsic;          /* Safari/WebKit uses a non-standard name */
    height: -moz-max-content;   /* Firefox/Gecko */
    height: -webkit-max-content;/* Chrome */

    /* [r02] Suited Chrome:
    width:  fit-content;
    height: fit-content;
    */
}

.ratingBar #rateButtonsContainer
{
    display: inline-block;
}

.ratingBar .buttonBox
{
    display:    inline-block;
    position:   relative;
    width:      var(--buttonBox_dim);
    height:     var(--buttonBox_dim);
    text-align: center;
    background: none;
}

.ratingBar .buttonBox img
{
    position:   absolute;
    top:        50%;
    left:       50%;
    transform:  translate(-50%, -50%);
    max-height: 100%;
    width:      auto;
}

.ratingBar .buttonBox button
{
    position:         absolute;
    top:              0;
    left:             0;
    width:            100%;
    height:           100%;
    text-align:       center;
    font-size:        var(--buttonBox_fontSize);
    color:            #fff;
    text-shadow:      2px 2px 2px black;
    background-color: transparent;
    border:           0px;
    cursor:           pointer;
}

/* Navigation Bar */
.navigationBar
{
    position: relative;
    display:  block;
    margin:   10px auto;
    width:    100%;
    height:   var(--navigationBar_dim);
}

.navigationBar .navigationButton
{
    border:            0;
    height:            100% !important;
    min-width:         var(--navigationBar_dim);   /* to match navigation-bar's height */
    background-color:  transparent;
    background-size:   contain;
    background-repeat: no-repeat;
}

.navigationBar #prevButton
{
    float:               left;
    background-position: left;
}

.navigationBar #nextButton
{
    float:               right;
    background-position: right;
}

#comment
{
    /* Center the text within the Navigation-Bar */
    position:  absolute;
    top:       50%;
    left:      50%;
    transform: translate(-50%, -50%);

    font-size:   4vw;
    text-shadow: none;
}

/* Media Customizations */
@media screen
{
    :root
    {
        --navigationBar_dim  : 12vw;
        --buttonBox_dim      : 10vw;    /* Calculated in code */
        --buttonBox_fontSize : 5vw;     /* Calculated in code. Nominally = --buttonBox_dim / 2. */
    }
}