#missionInfoArea
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

#missionTitle
{
    position: absolute;
    top: 35%;
    left: 50%;
    width: auto;
    height: auto;
    transform: translateX(-50%);

    font-size: 2.25vh;
    text-align: center;
    color: white;
    font-family: "Pirulen";
    font-weight: normal;
}

#missionTime
{
    position: absolute;
    bottom: 10%;
    left: 50%;
    width:25%;
    height: auto;
    transform: translateX(-50%);

    font-size: 3.0vh;
    text-align: center;
    color: white;
    font-family: "Pirulen";
}

#missionTimeNumbers
{
    font-size: 3.0vh;
}

#instructionsText
{
    position: absolute;
    bottom: 20%;
    left: 50%;
    width: auto;
    transform: translateX(-50%);

    font-size: 18px;
    text-align: center;
    color: white;
    font-family: "Pirulen";
}

#planetInfoPanel
{
    position: absolute;
    top: 50%;
    left: 0%;
    width: auto;
    height: 55%;
    transform: translateY(-50%);
    pointer-events: all;
}

#planetInfoImage
{
    top: 0px;
    left: 0px;
    width: auto;
    height: 100%;
}

#planetInfoTag
{
    position: absolute;
    top: 0.75%;
    left: 2%;
    width: auto;

    color: white;
    font-family: "Orbitron";
    font-weight: bold;
    font-size: 9px;
}

#planetInfoTitle
{
    position: absolute;
    top: 13%;
    left: 10%;
    width: 70%;
    height: auto;

    color: white;
    font-family: "Orbitron";
    font-size: 24px;
}

.planetInfoField
{
    position: absolute;
    left: 12%;
    width: 70%;
    height: auto;

    color: white;
    font-family: "Orbitron";
    font-size: 18px;
}

#planetInfoField1
{
    top: 29%;
}
#planetInfoField2
{
    top: 39%;
}
#planetInfoField3
{
    top: 49%;
}
#planetInfoField4
{
    top: 65%;
    font-size: 24px;
}

#quantumArea
{
    position: absolute;
    top: 75%;
    left: 7%;
    width: 85%;
    height: auto;
    display: none;
}

#quantumText
{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: auto;
    transform: translateX(-50%) translateY(-50%);

    color: #fc8003;
    font-family: "Orbitron";
    font-weight: bold;
    font-size: 20px;
    text-align: center;
}

/*#region BlinkingAnim */

.blink-image 
{
    mix-blend-mode: screen;

    -moz-animation: blink normal 3s infinite ease-in-out;
    -webkit-animation: blink normal 3s infinite ease-in-out;
    -ms-animation: blink normal 3s infinite ease-in-out;
    animation: blink normal 3s infinite ease-in-out;
}
@-moz-keyframes blink {
    0% { opacity: 1;}
    50% { opacity: 0.35; }
    100% { opacity: 1; }
}
@-webkit-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.35; }
    100% { opacity: 1; }
}
@-ms-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.35; }
    100% { opacity: 1; }
}
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.35; }
    100% { opacity: 1; }
}

/*#endregion BlinkingAnim */

@media screen and (min-height: 2000px)
{
    #planetInfoTitle, #planetInfoField4, #quantumText { font-size: 40px;}
    .planetInfoField{ font-size: 36px; }
    #planetInfoTag { font-size: 20px; }
}

@media screen and (min-height: 1750px) and (max-height: 2000px)
{
    #planetInfoTitle, #planetInfoField4, #quantumText { font-size: 36px; }
    .planetInfoField{ font-size: 32px; }
    #planetInfoTag { font-size: 18px; }
}

@media screen and (min-height: 1500px) and (max-height: 1750px)
{
    #planetInfoTitle, #planetInfoField4, #quantumText { font-size: 32px; }
    .planetInfoField{ font-size: 28px; }
    #planetInfoTag { font-size: 16px; }
}

@media screen and (min-height: 1250px) and (max-height: 1500px)
{
    #planetInfoTitle, #planetInfoField4, #quantumText { font-size: 28px; }
    .planetInfoField{ font-size: 24px; }
    #planetInfoTag { font-size: 12px; }
}

@media screen and (min-height: 1000px) and (max-height: 1250px)
{
    #planetInfoTitle, #planetInfoField4, #quantumText { font-size: 22px; }
    .planetInfoField{ font-size: 18px; }
    #planetInfoTag { font-size: 10px; }
}

@media screen and (min-height: 750px) and (max-height: 1000px)
{
    #planetInfoTitle, #planetInfoField4, #quantumText { font-size: 16px; }
    .planetInfoField{ font-size: 13px; }
    #planetInfoTag { font-size: 8px; }
}

@media screen and (min-height: 600px) and (max-height: 750px)
{
    #planetInfoTitle, #planetInfoField4, #quantumText { font-size: 13px; }
    .planetInfoField{ font-size: 11px; }
    #planetInfoTag { font-size: 6px; }
}

@media screen and (min-height: 500px) and (max-height: 600px)
{
    #planetInfoTitle, #planetInfoField4, #quantumText { font-size: 10px; }
    .planetInfoField{ font-size: 8px; }
    #planetInfoTag { font-size: 5px; }
}

@media screen and (max-height: 500px)
{
    #planetInfoTitle, #planetInfoField4, #quantumText { font-size: 8px; }
    .planetInfoField{ font-size: 8px; }
    #planetInfoTag { font-size: 4px; }
}