html,
body {
    font-family: "Lato";
    color: #fff;
    overflow: hidden;

    margin: 0;
    padding: 0;

    height: 100%;
    width: 100%;
}

.container {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* SCOREBOARD */
#scoreboard
{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;

    position: absolute;

    transform: translate(-39.5vw, -43.5vh) scale(0.17);

    transition-duration: 0.5s;

}

#scoreboard.center
{
    transform: translate(0vw, -43.5vh) scale(0.17);
}

#scoreboard.right
{
    transform: translate(39.5vw, -43.5vh) scale(0.17);
}

#scoreboard.fullscreen
{

    transform: translate(0vw, 0vh) scale(1);
}

#scorebar
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 0px;

    grid-column: 1;
    grid-row: 1;
}

#leftBar
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    
    background: url('../img/barleft.png') no-repeat;
    background-size: contain;

    align-items: center;

    width: 959px;
    height: 600px;

    transform-origin: right;
    transition-duration: 0.5s;
    opacity: 1;
}

#leftBar.hidden
{
    transform: rotateY(90deg);
    opacity: 0;
}

#leftTeam
{
    position: relative;
    left: 100px;
    top: -10px;
    font-size: 110pt;
    font-weight: 600;
}

#leftScore
{
    position: relative;
    right: 215px;
    top: -10px;

    text-align: right;
    font-size: 140pt;
    font-weight: bold;

    transition: color 0.5s linear;
}

.green
{
    color: #29be1b;
}

.red
{
    color: #bb1616;
}

#rightBar
{
    display: grid;
    grid-template-columns: 1fr 1fr;

    background: url('../img/barright.png') no-repeat;
    background-size: contain;

    align-items: center;

    width: 959px;
    height: 600px;

    transform-origin: left;
    transition-duration: 0.5s;
    opacity: 1;
}

#rightBar.hidden
{
    transform: rotateY(90deg);
    opacity: 0;
}

#rightTeam
{
    position: relative;
    right: 90px;
    top: -10px;

    text-align: right;
    font-size: 110pt;
    font-weight: 600;
}

#rightScore
{
    position: relative;

    left: 235px;
    top: -10px;
    font-size: 140pt;
    
    font-weight: bold;

    transition: color 0.5s linear;
}

#logo
{
    background: url('../img/logo.png') no-repeat;
    background-size: contain;

    position: absolute;
    left: 759px;

    width: 419px;
    height: 600px;

    transform-origin: center;
    transition-duration: 0.5s;
}

#logo.preparehide
{
    transform: rotateZ(-40deg) scale(1.5);
}

#logo.hidden
{
    transform: rotateZ(360deg) scale(0);
}

#setCounters
{
    display: grid;
    grid-template-columns: 1fr 1fr;

    background: url('../img/setcounters.png') no-repeat;
    background-size: contain;

    position: relative;
    top: -167px;
    
    width: 1920px;
    height: 166px;

    transition-duration: 0.5s;
    transform-origin: top;
}

#setCounters.hidden
{
    transform: rotateX(90deg);
}

#leftSets
{
    position: relative;

    top: -25px;
    right: 60px;

    text-align: center;
    font-size: 110pt;

    transition: color 0.5s linear;
}

#rightSets
{
    position: relative;

    top: -25px;
    left: 33px;

    text-align: center;
    font-size: 110pt;

    transition: color 0.5s linear;
}

/* POPUP */
#popup {
    display: flex;
    
    align-items: center;
    justify-content: space-around;

    position: absolute;
    top: 0;
    left: 0;

    margin: 12px;
    padding: 12px;

    opacity: 0;
    visibility: hidden;
    transition: opacity .75s linear, visibility .75s linear;

    background: rgba(51, 51, 51, .25);
    border-radius: 8px;
    color: #fff;
}
#popup.active {
    opacity: 1;
    visibility: visible;
}
#popup .icon {
    margin-right: 12px;
    color: #fff;
    font-size: 1.25rem;
}
#popup .fa-check-circle {
    color: limegreen;
}
#popup .fa-times-circle {
    color: red;
}