* {
  box-sizing: border-box;
}
body{ background-color: rgb(80,130,190);
      color: black;
      font-weight: plain;
      font-family: helvetica, sans-serif;
      font-size: 100%; }
.row::after {
  content: "";
  clear: both;
  display: block;
}
[class*="col-"] {
  float: left;
}


/* for small phones */
@media only screen and (max-width: 659px) {
  .col-ss-1 {width: 5%;}
  .col-ss-2 {width: 10%;}
  .col-ss-3 {width: 15%;}
  .col-ss-4 {width: 20%;}
  .col-ss-5 {width: 25%;}
  .col-ss-6 {width: 30%;}
  .col-ss-7 {width: 35%;}
  .col-ss-8 {width: 40%;}
  .col-ss-9 {width: 45%;}
  .col-ss-10 {width: 50%;}
  .col-ss-11 {width: 55%;}
  .col-ss-12 {width: 60%;} 
  .col-ss-13 {width: 65%;}
  .col-ss-14 {width: 70%;}
  .col-ss-15 {width: 75%;}
  .col-ss-16 {width: 80%;}
  .col-ss-17 {width: 85%;}
  .col-ss-18 {width: 90%;}
  .col-ss-19 {width: 95%;}
  .col-ss-20 {width: 100%;}
}

/* for large phones or small tablets */
@media only screen and (min-width: 660px) {
  .col-s-1 {width: 5%;}
  .col-s-2 {width: 10%;}
  .col-s-3 {width: 15%;}
  .col-s-4 {width: 20%;}
  .col-s-5 {width: 25%;}
  .col-s-6 {width: 30%;}
  .col-s-7 {width: 35%;}
  .col-s-8 {width: 40%;}
  .col-s-9 {width: 45%;}
  .col-s-10 {width: 50%;}
  .col-s-11 {width: 55%;}
  .col-s-12 {width: 60%;} 
  .col-s-13 {width: 65%;}
  .col-s-14 {width: 70%;}
  .col-s-15 {width: 75%;}
  .col-s-16 {width: 80%;}
  .col-s-17 {width: 85%;}
  .col-s-18 {width: 90%;}
  .col-s-19 {width: 95%;}
  .col-s-20 {width: 100%;}
}

/* for tablet */
@media only screen and (min-width: 900px) {
  .col-t-1 {width: 5%;}
  .col-t-2 {width: 10%;}
  .col-t-3 {width: 15%;}
  .col-t-4 {width: 20%;}
  .col-t-5 {width: 25%;}
  .col-t-6 {width: 30%;}
  .col-t-7 {width: 35%;}
  .col-t-8 {width: 40%;}
  .col-t-9 {width: 45%;}
  .col-t-10 {width: 50%;}
  .col-t-11 {width: 55%;}
  .col-t-12 {width: 60%;} 
  .col-t-13 {width: 65%;}
  .col-t-14 {width: 70%;}
  .col-t-15 {width: 75%;}
  .col-t-16 {width: 80%;}
  .col-t-17 {width: 85%;}
  .col-t-18 {width: 90%;}
  .col-t-19 {width: 95%;}
  .col-t-20 {width: 100%;}
}

/* for desktop */
@media only screen and (min-width: 1200px) {
  .col-1 {width: 5%;}
  .col-2 {width: 10%;}
  .col-3 {width: 15%;}
  .col-4 {width: 20%;}
  .col-5 {width: 25%;}
  .col-6 {width: 30%;}
  .col-7 {width: 35%;}
  .col-8 {width: 40%;}
  .col-9 {width: 45%;}
  .col-10 {width: 50%;}
  .col-11 {width: 55%;}
  .col-12 {width: 60%;} 
  .col-13 {width: 65%;}
  .col-14 {width: 70%;}
  .col-15 {width: 75%;}
  .col-16 {width: 80%;}
  .col-17 {width: 85%;}
  .col-18 {width: 90%;}
  .col-19 {width: 95%;}
  .col-20 {width: 100%;}
}

/* for desktop with wide screen */
@media only screen and (min-width: 1450px) {
  .col-l-1 {width: 5%;}
  .col-l-2 {width: 10%;}
  .col-l-3 {width: 15%;}
  .col-l-4 {width: 20%;}
  .col-l-5 {width: 25%;}
  .col-l-6 {width: 30%;}
  .col-l-7 {width: 35%;}
  .col-l-8 {width: 40%;}
  .col-l-9 {width: 45%;}
  .col-l-10 {width: 50%;}
  .col-l-11 {width: 55%;}
  .col-l-12 {width: 60%;} 
  .col-l-13 {width: 65%;}
  .col-l-14 {width: 70%;}
  .col-l-15 {width: 75%;}
  .col-l-16 {width: 80%;}
  .col-l-17 {width: 85%;}
  .col-l-18 {width: 90%;}
  .col-l-19 {width: 95%;}
  .col-l-20 {width: 100%;}
}

/* for desktop with quite wide screen */
@media only screen and (min-width: 1750px) {
  .col-L-1 {width: 5%;}
  .col-L-2 {width: 10%;}
  .col-L-3 {width: 15%;}
  .col-L-4 {width: 20%;}
  .col-L-5 {width: 25%;}
  .col-L-6 {width: 30%;}
  .col-L-7 {width: 35%;}
  .col-L-8 {width: 40%;}
  .col-L-9 {width: 45%;}
  .col-L-10 {width: 50%;}
  .col-L-11 {width: 55%;}
  .col-L-12 {width: 60%;} 
  .col-L-13 {width: 65%;}
  .col-L-14 {width: 70%;}
  .col-L-15 {width: 75%;}
  .col-L-16 {width: 80%;}
  .col-L-17 {width: 85%;}
  .col-L-18 {width: 90%;}
  .col-L-19 {width: 95%;}
  .col-L-20 {width: 100%;}
}


h1 {  text-align: center;
      color: black;
      font-family: "Comic Sans MS", cursive, sans-serif;
      font-size: 2.5em;
      font-weight: bold;
      text-shadow: 3px 3px white;
      margin: 0px 0px 5px 0px; }
h2#appTitle {  text-align: center;
      color: rgb(250,250,250);
      font-size: 160%;
      font-weight: bold;
      text-shadow: 2px 2px black;
      }     
#hintSpace{
      color: rgb(255,255,255);
      }
#hint-content{
      height: 150px;
      overflow-x: auto;}
#expl-content{
      height: 450px;
      background-color: rgb(200,240,255);
      border-style: groove;
      border-width: 3px;
      border-color: rgb(50,0,100);
      border-radius: 3px;
      margin: 5px;
      padding: 5px 5px 5px 15px;
      text-align: justify;
      color: rgb(50,50,120);
      text-indent: 20px;
      overflow-x: auto;
}
.nav-lr{
      background-color: rgb(200,240,255);      
      color: rgb(200,50,120);
      border-style: groove;
      border-width: 4px;
      border-color: rgb(50,0,100);
      border-radius: 10px;
      margin: 10px 3px 10px 3px;
      padding: 0px 3px 0px 3px;
      text-align: center;
      font-size: 1.5em;
      font-weight: bold;
      text-shadow: 2px 2px rgb(240,150,200);
      opacity: 0.6;
      cursor: not-allowed;
      }
.explan-title{
      text-align: center;
      color: rgb(200,255,255);
      font-style: italic;
      }
h3#hintsTitle{
      padding-bottom: 0px;  
      margin-bottom: 0px;
      }
.navbut{  
      background-color: rgb(200,240,255);
      color: rgb(30,60,100);
      opacity: 0.6;
      cursor: not-allowed; 
      padding: 3px 3px 3px 3px;
      }
#help{
      color: rgb(200,240,255);
      text-align: center;
      font-size: 1.5em;
      font-weight: bold;
      text-shadow: 2px 0px black;}
#explan-head{
      display:grid;
      grid-template: auto / auto min-content min-content;
      grid-column: 1 / span 1; 
      grid-row: 1 / span 1;
      }
#app-container{
      float: right;
      text-align: center;      
      }
/* Dropdown Button */
#compl-but {
  background-color: rgb(255,240,255);
  color: rgb(30,60,100);
  width: 100%;
  height: auto;
  padding: 3px 3px 3px 3px;
}

/* Dropdown Content (Hidden by Default) */
#compl-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
#compl-content a {
  color: rgb(50,50,150);
  padding: 6px 10px;
  text-decoration: none;
  font-style: italic;
  display: block;
}

/* Change color of dropdown links on hover */
#compl-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
#compl-drop:hover #compl-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
#compl-drop:hover #compl-but {background-color: rgb(200,180,200);}
/*

/* Dropdown Button */
#lang-but {
  width: 100%;
  height: 30px;
  background-color: rgb(255,240,255);
  color: rgb(30,60,100);
}

/* The container <div> - needed to position the dropdown content */
#lang-drop {
  text-align: center;
  display: block;
}

/* Dropdown Content (Hidden by Default) */
#lang-content {
  display: none;
  position: absolute;
  right: 5px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
#lang-content a {
  color: rgb(50,50,150);
  padding: 6px 10px;
  text-decoration: none;
  font-style: italic;
  display: block;
}

/* Change color of dropdown links on hover */
#lang-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
#lang-drop:hover #lang-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
#lang-drop:hover #lang-but {background-color: rgb(200,180,200);}
/*


/* Dropdown Button */
#help-but { 
  border-style: groove;
  border-width: 2px;
  border-color: rgb(50,0,100);
  background-color: rgb(255,240,255);
  color: rgb(30,60,100);
  padding: 3px 3px 3px 3px;
  cursor: pointer;
}

/* Dropdown Content (Hidden by Default) */
#help-title{
  text-align: center;
  font-weight: bold;
  font-style: italic;
  padding: 2px 2px 2px 2px;
}
#help-close {      
      display: grid;
      grid-template: '. .';
      grid: auto / auto min-content;
}
#help-X {
  text-align: center; 
  padding: 2px 2px 2px 2px;
  border-style: groove;
  border-width: 1px;
  border-color: rgb(100,1000,100); 
  cursor: pointer;
}
#help-window {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  top: 100px;
  left: 400px;  
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1; 
  border-style: groove;
  border-width: 2px;
  border-color: rgb(50,0,100);
  border-radius: 5px;
} 
#help-content {
  width: 400px;
  height: 400px;
  margin: 10px;  
  overflow-x: auto;
  padding: 3px 3px 3px 3px;
  text-align: justify;
  text-indent: 20px;
}

/* Show the dropdown menu on hover */
#help-drop:hover #help-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
#help-drop:hover #help-but {background-color: rgb(100,20,50);}

#home-but { /*grid-row: 2 / span 1; */
  /*width: 100px;*/
  height: 40px;
  background-color: rgb(255,245,255);
  color: rgb(30,60,100);
  border-style: groove;
  border-width: 2px;
  border-color: rgb(50,0,100);
  cursor: pointer;
}
#home-but:hover {background-color: rgb(200,180,200);}