/*
    Mission Solar System. P. Cross, 2022
*/

@font-face {
    font-family: digitalDream;
    src: url("fonts/digitaldream.ttf");
}

@font-face {
    font-family: kenneySpace;
    src: url("fonts/kenney-space.regular.ttf");
}

@font-face {
    font-family: turretRoad;
    src: url("fonts/turret-road.extrabold.otf");
}

body {
    background: black; 
    color: rgb(255, 255, 255);
    font-family: "Tahoma", sans-serif;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

td {
    word-wrap: break-word;
    white-space: prewrap;
}

@media print {
    body { color: black; }
}

body p {
    font-family: "Tahoma", sans-serif;
    font-size: 12pt;
    font-weight: normal;
}

td, th {
    padding: 6pt 10pt 6pt 10pt;
    text-align: start;
    vertical-align: top;
}

.TopBar {
    z-index: 200;
    position: absolute;
    top: 0;
    left: 0;    
    background-color:hsl(220, 45%, 10%);
    height: 48pt;
    min-width: 300pt;
    width: 100%;
    border-bottom: 1pt solid hsl(220, 30%, 70%);
}

.MainLogo, .LogIcon {
    vertical-align: middle;
}

@media(max-width: 800px) {
    .MainLogo { width: 600px; margin-top: 5px;}
    .LogIcon { width: 80px; margin-top: 5px;}
}

@media(max-width: 700px) {
    .MainLogo { width: 500px; margin-top: 10px;}
    .LogIcon { width: 60px; margin-top: 10px;}
}

@media(max-width: 600px) {
    .MainLogo { width: 350px; margin-top: 15px;}
    .LogIcon { width: 50px; margin-top: 15px;}
}

.MainContent {
    z-index: 200;
    position: absolute;
    top: 45pt;
    width: 100%;
    min-width: 320pt;
    display: flex;
    flex-direction: column;
}

@media print {
    .TopBar div {display: none;}
    .TopBar {
        border: none;
        font-family: "kenneySpace";
        font-size: 18pt;
        color: hsl(220, 100%, 20%);
        position: relative;
        height: 26pt;
    }
    .TopBar:first-child:before {content: "Mission: Solar System";}
    .MainContent {
        border: black 1pt;
        position: relative;
        padding: none;
        margin: none;
        top: 0;
    }
}

.Stars {
    background-image: url('images/starmap.jpg');
}

.Overlay {
    z-index: 300;
    position: absolute;
    text-align: center;
    vertical-align: bottom;
}

.Overlay div.IconLink {
    margin: none; 
    padding: none;    
    display: inline-block;    
}

.InfoDisplay, .SpacecraftControl {
    z-index: 300;
    position: absolute;
    background-color:hsla(220, 45%, 10%, 0.5);
    border: 1px solid hsl(220, 30%, 70%);
    border-radius: 5pt 5pt;
    text-align: center;
    vertical-align: middle;
}

.InfoDisplay {
    left: calc(50vw - 200pt);
    width: 400pt;
    min-height: 60pt;
    top: calc(100vh - 80pt);
}

.SpacecraftControl {
    left: calc(50vw - 110pt);
    width: 220pt;
    min-height: 60pt;
    top: 65pt;
}

.impulseControl img {
    margin: 0;
    padding: 0;
}

input[type=range]#scpitch {
    width: 10pt;
    height: 76pt;
    -webkit-appearance: slider-vertical;
}

input[type=range] {
  width: 150pt;
  height: 10pt;
}

.SpacecraftControlLeft {
    display: inline-block;
    max-width: 160pt;
    margin: 4pt;
}

.pitchControl {
    display: inline-block;
    max-width: 50pt;
}

.SpeedDisplay {
    font-size: 10pt;
    font-weight: normal;
    min-height: 1em;
    padding: 2pt;
}

.InfoDisplay div.IconLink,  .InfoDisplay div.TimeDisplay, .SpacecraftControl div.IconLink {
    border: 1px solid hsl(220, 30%, 70%);
    border-radius: 5pt 5pt;
    display: inline-block;
    vertical-align: middle;
}

.IconLink {
   padding: 3pt; 
}

.TimeDisplay {
    font-family: "digitalDream";
    font-size: 16pt;
    font-weight: normal;
    padding: 3pt;
}

.SmallDisplay {
    font-family: "serif";
    font-size: 9pt;
    font-style: italic;
    font-weight: 100;
    padding: 3pt;
}

.SimulationBox {
    z-index: 100;
    position: absolute;
    min-width: 400pt;
    min-height: 100%;
    height: 100%;  
    width: 100%;
}

.PlanetInfoContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 800pt;
}

.InfoBox {
    margin: 0pt; 
}

.InfoBox p, .MenuBox h1 {
    margin-top: 0pt; 
    margin-left: 8pt;
    margin-right: 8pt;
    margin-bottom: 10pt;
    line-height: 150%;
}

.AnimationBox {
    width: 265pt;
    height: 245pt;
    margin-left: 8pt;
    border: 1px solid hsl(220, 30%, 70%);
    background-image: url("images/starmap.jpg");
    text-align: right;
    display: inline-block;
}

.AnimationBox a, .AnimationBox a:link, .AnimationBox a:visited {
    text-decoration: none;
    color: white;
    font-size: 9pt;
}
  
.AnimationBox a:hover {
    filter: drop-shadow(0px 0px 8px white);    
    color: white;
    font-size: 9pt;
}

.QuickFact {
    break-inside: avoid-column;
}

.QuickFact p {
    font-weight: normal;
    padding-left: 20pt;
    margin: 6pt;
}

.QuickFact p:first-child {
    font-weight: bold;
    padding-left: 0;
    border-bottom:1px solid white;
    min-width: 70%;    
    width: 70%;
    margin: 0 0 0 6pt;
}

a.IconLink:link img, a.IconLink:visited img {
    text-decoration: none;
    filter: drop-shadow(0px 0px 4px white);    
}

a.IconLink:hover img  {
    filter: drop-shadow(0px 0px 8px white);    
}

.IconLinkContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
}

.IconLink {
    display: inline-block;
    font-family: "Tahoma";
    font-size: 10pt;  
    text-align: center; 
    font-weight: normal;
}

.IconLink a {
    text-decoration: none;
}

.IconLink img {
    text-align: center;
}

.IconLink a:link, .IconLink a:visited  {
    text-decoration: none;
    color: white;
}

.IconLink a:hover, .IconLink:hover {
    color: white;
    filter: drop-shadow(0px 0px 4px white);
}

a.IconLink:link img, a.IconLink:visited img {
    filter: drop-shadow(0px 0px 4px hsl(220, 80%, 10%));  
}

.MenuBox, .SimulatorHelpDisplay {
    background-color:hsl(220, 45%, 10%);
    border: 1px solid hsl(220, 30%, 70%);
    border-radius: 5pt 5pt;
    padding: 12pt;
    margin: 12pt 12pt 0pt 12pt;
}

.MenuBox h1 {
    font-family: "kenneySpace";
    font-size: 14pt;
}

.FlexContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

.FlexItem {
    flex: 1 1 300pt;
    padding-right: 16pt;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.4;
    margin: 0;
}

.LogBox {
    background-color:hsl(220, 100%, 80%);
    border: 1px solid hsl(220, 30%, 70%);
    border-radius: 5pt 5pt;
    min-height: 500pt;
    min-width: 400pt;
    margin: 20pt;
    padding: 10pt 20pt 10pt 20pt;
    color: black;
 }

.ThreeColumns {
    columns: 3 300pt;
    column-gap: 10pt;
    column-fill: auto;
    margin-top: 10pt;
 }

 .TwoColumns {
    columns: 2 400pt;
    column-gap: 10pt;
    column-fill: auto;
    margin-top: 10pt;
 }

 .ThreeColumns p, .TwoColumns p {
     margin-top: 0;
     margin-bottom: 12pt;
     break-inside: avoid-column;     
 }

 .LogBox h1, .LogBox h2 {
    column-span: all;
 }

 .LogBox img {
    border: 1px solid black;
    display: block; 
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12pt;
 }

 .LogBox img.Equation {
    border: none;
    display: block; 
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12pt;
    padding: 4pt;
 }

 @media print {
    .LogBox {
        margin: 0pt;
        border: 0pt;
        padding: 0pt;
    }
 }

 .LogBox h1, .LogBox h2, .LogBox h3 {
    font-family: "Tahoma", sans-serif;
    color:hsl(220, 100%, 20%);
 }

 .QuizBox {
    background-color:hsl(220, 45%, 10%);
    border: 1px solid hsl(220, 30%, 70%);
    border-radius: 5pt 5pt;
    padding: 12pt;
    margin: 12pt;
    padding-left: calc(20vw);
    padding-right: calc(20vw);    
}

.QuizBox h1 {
    font-family: "turretRoad";
    font-size: 28pt;
}

.QuizBox h2 {
    font-family: "turretRoad";
    font-size: 24pt;
}

.QuizBox p {
    font-size: 16pt;
}

.Answer input {
    display: none;
}

.Answer label, .QuizBox button {
    font-size: 16pt;
    display: inline-block;
    width: 90%;
    border: 1pt solid hsl(220, 30%, 70%);
    margin: 8pt;
    padding: 8pt;
    border-radius: 5pt 5pt;
    text-align: center;
}

.Answer label:hover, .QuizBox button:hover {
    background-color: hsl(220, 45%, 50%);
    filter: drop-shadow(0px 0px 8px white); 
}

.Answer label.WrongAnswer {
    background-color: hsl(340, 45%, 50%);
    filter: drop-shadow(0px 0px 2px white); 
}

.Answer label.CorrectAnswer {
    background-color: hsl(100, 45%, 50%);
    filter: drop-shadow(0px 0px 2px white); 
}

.Answer input:checked+label {
    background-color: hsl(40, 45%, 50%);
    filter: drop-shadow(0px 0px 2px white); 
}

#questionResult.CorrectAnswer:before {
    content:  url('images/tick.svg');
}

#questionResult.WrongAnswer:before {
    content:  url('images/cross.svg');
}

#questionResult.WrongAnswer, span.WrongAnswer{
    color: red;
}

#questionResult.CorrectAnswer, span.CorrectAnswer {
    color: green;
}

.Progress {
    text-align: center;
}

.Progress span {
    padding-top: 20pt;
    padding-left: 2pt;
}

@media(max-width: 600px) {
    .MenuBox h1 {font-size: 12pt;}
    .QuizBox h1 {font-size: 20pt;}
    .QuizBox h2 {font-family: "turretRoad"; font-size: 16pt;}
    .QuizBox p, .QuizBox label  {font-size: 14pt;}   
    .QuizBox {
        padding-left: 8pt;
        padding-right: 8pt;  
    }     
}

@media(min-width: 800pt) {
    .SimulatorHelpDisplay {
        column-width: 300pt;
        column-count: 2;
        column-gap: 10pt;
        overflow-y: auto; 
        overflow-x: hidden;    
        width: 80vw;       
    }
 }

 @media(max-width: 799pt) {
    .SimulatorHelpDisplay {
        height: 80vh;      
    }
 }

.SimulatorHelpDisplay {
    position: absolute;
    display: none;
    z-index: 400;
    top: 10vh;  
    left: 5vw;
    width: 80vw;
    max-width: 80vw;
    margin: 10pt;
    filter: drop-shadow(4pt 4pt 4px gray);  
    overflow-y: auto;
    overflow-x: hidden;   
 }

 .HelpText {
    display: inline-block;
    width: 70%;
    vertical-align: middle;
 }

 .SimulatorHelpDisplay div.IconLink {
    min-width: 80pt;
    vertical-align: middle;
 }