* {
    margin: 0;
    width: calc(100vw - (100vw - 100%));
  }

main 
{
    height: 100vh;
}

#headline, #compTitle, #compExpl 
{
    display: flex;
    justify-content: left;
    align-items: center;
}

/* ---- */ 
/* body */
/* ---- */ 

body 
{
    background-color: #DB18AC;
}

/* ------ */ 
/* header */
/* ------ */ 

#headline 
{
    height: 5%;
    background-color: #DB18AC;
    font-weight: bold;
    font-size: xx-large;
}

/* ------------- */ 
/* render canvas */
/* ------------- */ 

#renderCanvas 
{
    display: block;
    height: 60%;
    touch-action: none;
    cursor: grab;
}

/* ------------- */ 
/* countdown bar */
/* ------------- */ 

#countdown 
{
    position: block;
    height: 1vh;
    vertical-align: sub;
    background-color: #07DBD8;
}

#thebar 
{
    float: right;
    height: 100%;
    width: 0%;
    background-image: linear-gradient(to right, #07DBD8, #DB18AC, #DB18AC, #DB18AC);
}

/* -------- */ 
/* carousel */
/* -------- */ 

#carousel-container 
{
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.dot 
{
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin-left: 5px;
    margin-right: 5px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid #fff;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    vertical-align: middle;
    /*align-items: baseline;*/
    /*box-shadow: inset 0 .2vw .2vw 0 #999;*/
}

@media only screen and (min-width: 1000px) 
{
    .dot 
    { 
        height: 15px;
        width: 15px;
        margin-left: 10px;
        margin-right: 10px;
    }
}

.active, .dot:hover 
{
    background: rgb(245, 245, 245);
}

#playpause
{
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    right: 3vw;
    margin-top: 5px;
    width: 15px;
}

/* -------- */ 
/* text box */
/* -------- */ 

#compDet
{
    display: block;
    font-size: normal;
}

#compTitle
{
    font-weight: bold;
    font-size: x-large;
    align-items: baseline;
}

#compExpl 
{
    vertical-align: middle;
    align-items: initial;
}

@media only screen and (min-width: 600px) 
{
    #compTitle { font-size: x-large; }
    #compExpl { font-size: large; }
}

@media only screen and (min-width: 1000px) 
{
    #compTitle { font-size: xx-large; }
    #compExpl { font-size: x-large; }
}

.textfield 
{
    padding-left: 3vw;
    padding-right: 3vw;
    padding-top: 1vh;
    padding-bottom: 1vh;
    font-family: Arial, Helvetica, sans-serif;
    font-family: Calibri, 'Trebuchet MS', sans-serif, 'Gill Sans', 'Gill Sans MT';
}

.tb 
{ 
    cursor: pointer;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 10%;
}

#selectedlanguage
{
    display: flex;
    justify-content: right;
    align-items: baseline;
    color: whitesmoke;
    cursor: pointer;
    width: 3vw;
    font-size: smaller;
}

.fadein
{
    animation: fadeIn linear 1s;
    -webkit-animation: fadeIn linear 1s;
    -moz-animation: fadeIn linear 1s;
    -o-animation: fadeIn linear 1s;
    -ms-animation: fadeIn linear 1s;
}

@keyframes fadeIn 
{
    0% {opacity:0;}
    100% {opacity:1;}
}

@-moz-keyframes fadeIn 
{
    0% {opacity:0;}
    100% {opacity:1;}
}

@-webkit-keyframes fadeIn 
{
    0% {opacity:0;}
    100% {opacity:1;}
}

@-o-keyframes fadeIn 
{
    0% {opacity:0;}
    100% {opacity:1;}
}
  
@-ms-keyframes fadeIn 
{
    0% {opacity:0;}
    100% {opacity:1;}
}