@-webkit-keyframes growing
{
    0% {
        width: 0;
        height: 0;
        -webkit-transform: scale(.1) translate(253px, 203px);
    }

    100% {
        width: 100vw;
        height: calc(83.33vh - 20px);
        -webkit-transform: scale(1.0) translate(0, 0);
    }
}

@keyframes growing
{
    0% {
        width: 0;
        height: 0;
        transform: scale(.1) translate(253px, 203px);
    }

    100% {
        width: 100vw;
        height: calc(83.33vh - 20px);
        transform: scale(1.0) translate(0, 0);
    }
}

@-webkit-keyframes growing-big-width
{
    0% {
        width: 0;
        height: 0;
        -webkit-transform: scale(.1) translate(253px, 203px);
    }

    100% {
        width: 1015px;
        height: calc(100vh - 20px);
        -webkit-transform: scale(1.0) translate(0, 0);
    }
}

@keyframes growing-big-width
{
    0% {
        width: 0;
        height: 0;
        transform: scale(.1) translate(253px, 203px);
    }

    100% {
        width: 1015px;
        height: calc(100vh - 20px);
        transform: scale(1.0) translate(0, 0);
    }
}

@-webkit-keyframes growing-big-height
{
    0% {
        width: 0;
        height: 0;
        -webkit-transform: scale(.1) translate(253px, 203px);
    }

    100% {
        width: 100vw;
        height: 580px;
        -webkit-transform: scale(1.0) translate(0, 0);
    }
}

@keyframes growing-big-height
{
    0% {
        width: 0;
        height: 0;
        transform: scale(.1) translate(253px, 203px);
    }

    100% {
        width: 100vw;
        height: 580px;
        transform: scale(1.0) translate(0, 0);
    }
}

@-webkit-keyframes growing-big-width-height
{
    0% {
        width: 0;
        height: 0;
        -webkit-transform: scale(.1) translate(253px, 203px);
    }

    100% {
        width: 1015px;
        height: 615px;
        -webkit-transform: scale(1.0) translate(0, 0);
    }
}

@keyframes growing-big-width-height
{
    0% {
        width: 0;
        height: 0;
        transform: scale(.1) translate(253px, 203px);
    }

    100% {
        width: 1015px;
        height: 615px;
        transform: scale(1.0) translate(0, 0);
    }
}


@-webkit-keyframes finalAnimation
{
    0% {-webkit-transform: rotateX(0deg);}
    10% {-webkit-transform: rotateX(108deg);}
    20% {-webkit-transform: rotateX(216deg);}
    30% {-webkit-transform: rotateX(324deg);}
    40% {-webkit-transform: rotateX(432deg);}
    50% {-webkit-transform: rotateX(540deg);}
    60% {-webkit-transform: rotateX(648deg);}
    70% {-webkit-transform: rotateX(756deg);}
    80% {-webkit-transform: rotateX(864deg);}
    90% {-webkit-transform: rotateX(972deg);}
    100% {-webkit-transform: rotateX(1080deg);}
}

@keyframes finalAnimation
{
    0% {transform: rotateX(0deg);}
    10% {transform: rotateX(108deg);}
    20% {transform: rotateX(216deg);}
    30% {transform: rotateX(324deg);}
    40% {transform: rotateX(432deg);}
    50% {transform: rotateX(540deg);}
    60% {transform: rotateX(648deg);}
    70% {transform: rotateX(756deg);}
    80% {transform: rotateX(864deg);}
    90% {transform: rotateX(972deg);}
    100% {transform: rotateX(1080deg);}
}


@-webkit-keyframes greenFade {
    0% {background-color: rgba(0, 255, 0, 1);}
    100% {background-color: rgba(200, 200, 255, .5);}
}

@keyframes greenFade {
    0% {background-color: rgba(0, 255, 0, 1);}
    100% {background-color: rgba(200, 200, 255, .5);}
}


@-webkit-keyframes redFade {
    0% {background-color: rgba(255, 0, 0, 1);}
    100% {background-color: rgba(200, 200, 255, .5);}
}

@keyframes redFade {
    0% {background-color: rgba(255, 0, 0, 1);}
    100% {background-color: rgba(200, 200, 255, .5);}
}


html {
    perspective: 500px;
}

body {
    margin: 0;
}

html, body {
    background: black;
}

#wrapper {
    background: #ddd;

    -webkit-transform-origin: top left;
    transform-origin: top left;
}

#centerMe {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    position: relative;
}

#bigClueDiv {
    position: absolute;
    background-color: blue;
    font: 24px Arial;
    color: white;
    text-align: center;
}

#bigClueDivCover {
    position: absolute;
    background-color: transparent;
}

#bigClueTop {
    height: 150px;
    line-height: 150px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
}

#bigClueTop section {
    font-size: 16px;
    position: relative;

    color: white;
    text-shadow: 1px 1px 1px black;
}

#cluesTable {
    border: 0;
    border-collapse: collapse;
}

#cluesTable th, #cluesTable td {
    color: white;
    border: 1px solid gray;
    font: 12px Arial;
}

#cluesTable th {
    background: #0000BB;
}

#cluesTable td {
    background: blue;
}

#answersTable {
    position: absolute;
    border-collapse: separate;
    display: none;
}

/* #answersTable td {width: 252px; height: 80px;} */
#answersTable td {border: 1px solid white; background-color: blue;}

#answersTable td:hover {border: 1px solid black; transform: scale(1.03);}
hr {background: white; height: 1px; width: 30px; margin: 0 auto;}

.growingClue
{
  -webkit-animation-name: growing;
  -webkit-animation-duration: 1.5s;
  animation-name: growing;
  animation-duration: 1.5s;
}

.finalClue {
  -webkit-animation-name: finalAnimation;
  -webkit-animation-duration: 2s;
  animation-name: finalAnimation;
  animation-duration: 2s;
}

.greenScore{
  background-color: green;
  -webkit-animation-name: greenFade;
  -webkit-animation-duration: 2s;
  animation-name: greenFade;
  animation-duration: 2s;
}

.redScore {
  background-color: red;
  -webkit-animation-name: redFade;
  -webkit-animation-duration: 2s;
  animation-name: redFade;
  animation-duration: 2s;
}

#player1Span,
#player2Span
{
    background-color: rgba(200, 200, 255, .5);
    padding: 2px;
}


#wrapper
{
    height: 100vh;
}

#centerMe
{
	padding-top: 0px;
    padding-bottom: 40px;
    width: 100vw;
    height: calc(100vh - 10px);
}

#bigClueDiv,
#bigClueDivCover
{
    width: 100vw;
    height: calc(100vh - 20px);
    height: calc(83.33vh - 20px);
}

#bigClueTop
{
    margin-top: 0;
    padding-top: 0;
    height: 50vh;
    height: 41.5vh;
    font: 24px/40vh Arial, sans-serif;
}

#cluesTable th,
#cluesTable td
{
    width: calc(100vw / 5);
    height: calc(100vh / 6);
    font: 12px/18px Arial, sans-serif;
}

#answersTable
{
    width: 100%;
    top: calc(100vh * 2.5 / 6);
    height: calc(100% * 3.5 / 6);

    height: calc(83.33vh - 100vh * 2.5 / 6);
}

#answersTable tbody
{
    height: 100%;
}

#answersTable th,
#answersTable td
{
    width: 50%;
    /* height: calc(25vh - 20px / 2); */
    height: calc(100vh * 2.5 / 6 - 20px / 2);
    height: calc(100% * 1.75 / 6 - 20px / 2);

    height: 20.75vh;
}

#bigClueDiv,
#bigClueDivCover
{
    margin-top: 0px;
    padding-top: 0px;
}

@media (min-width: 800px)
{
    #bigClueTop section
    {
        font-size: 24px;
    }
}

@media (min-height: 500px)
{
    #bigClueTop section
    {
        font-size: 24px;
    }
}

@media (min-width: 1020px)
{
    #cluesTable th,
    #cluesTable td
    {
        width: 200px;
    }

    #centerMe
    {
        padding: 10px;
        width: 1020px
    }

    #bigClueDiv,
    #bigClueDivCover
    {
        width: 1015px;
    }

    .growingClue
    {
        -webkit-animation-name: growing-big-width;
        animation-name: growing-big-width;
    }
}

@media (max-width: 616px)
{
    #centerMe
    {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (min-height: 720px)
{
    #bigClueTop section
    {
        font-size: 24px;
    }

    #centerMe
    {
        padding-top: 10px;
        padding-bottom: 100px;
    }
    
    #cluesTable th,
    #cluesTable td
    {
        height: 120px;
    }

    #bigClueDiv,
    #bigClueDivCover
    {
        height: 615px;
        height: 580px;
    }

    #bigClueTop
    {
        height: 300px;
    }

    #player1Span,
    #player2Span
    {
        font: 20px/30px Arial, sans-serif;
    }

    #answersTable
    {
        top: 300px;
        height: 300px;
    }

    #answersTable th,
    #answersTable td
    {
        height: 180px;
        height: 150px;
    }

    #bigClueTop section {
        font-size: 24px;
        top: -75px;
    }

    .growingClue
    {
        -webkit-animation-name: growing-big-height;
        animation-name: growing-big-height;
    }
}

@media (min-width: 800px) and (min-height: 540px)
{
    #cluesTable th,
    #cluesTable td,
    #player1Span,
    #player2Span
    {
        font: 18px/24px Arial, sans-serif;
    }

    #answersTable th,
    #answersTable td
    {
        font: 24px/24px Arial, sans-serif;
    }

    #bigClueTop
    {
        font: 32px/270px Arial, sans-serif;
    }
}

/* @media (min-width: 1010px) and (min-height: 720px) */
@media (min-width: 960px) and (min-height: 620px)
{
    #cluesTable th,
    #cluesTable td,
    #player1Span,
    #player2Span
    {
        font: 20px/30px Arial, sans-serif;
    }

    #answersTable th,
    #answersTable td
    {
        font: 32px/32px Arial, sans-serif;
    }

    #bigClueTop
    {
        font: 36px/300px Arial, sans-serif;
    }

    .growingClue
    {
        -webkit-animation-name: growing-big-width-height;
        animation-name: growing-big-width-height;
    }
}