* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
  position:relative;
  overflow-y:hidden;
  overflow-x:hidden;
}

:root {
--button-color:      #2b2b42ff;   /* space-cadet*/
--dark-color:        #101040ff;   /* space-cadet*/

--full-color:        #2299ccff;   /* space-cadet*/
--hover-color:       #446699ff;   /* manatee */
--background-color:  #c0d0f6ff;   /* alice-blue */
--top-color:         #233c9fff;   /* imperial-red */
--frame-color:       #001070ff;   /* amaranth-red d90429ff*/
}

a:link {
  color:   white;
  background-color:  transparent;
  text-decoration:   underline;
}
a:visited {
  color:   white;
  background-color:  transparent;
  text-decoration:   underline;
}
a:hover {
  color:   yellow;
  background-color:  transparent;
  text-decoration:   none;
}
a:active {
  color:   white;
  background-color:  transparent;
  text-decoration:   underline;
}
/* --------------------------------------------- */
.topMenu{
  font-size:      16px;
  font-weight:   100;
  text-align:   center;
  color:         white;
  margin:          0px;
  padding:         0px 0px 0px 0px;   
  width:         100%;
  min-height:     40px;  
  border-top:      0px;
  background:    var(--background-color);
  border:          4px solid var(--frame-color);
  border-radius:   4px;
  overflow:     hidden;
  position:   relative;
}
.navArea {
  float:      left;
  width:      50%;  
  padding:     0px;
  border:      0px solid var(--background-color);
}

.rightArea {
  float:     right;
  width:      50%;  
  padding:     0px;
  border:      0px solid var(--background-color);
}
.topLinks {
  background:  var(--top-color);
  width:       190px;
  height:       32px;   
  /*min-height:  20px;   */
  margin:        0px;
  padding:       0px 0px 0px 0px; 
  border-left:   4px solid var(--background-color);
  float:        left;
  border-top:    0px;
  cursor:    pointer;
  display:     flex;
  align-items: center;
  justify-content: center; 
}

.topIcon {
  float:       right;
  background:  var(--top-color);
  width:        40px;
  height:       32px;    
  /*min-height:  20px;   */
  margin:        0px;
  padding:       0px 0px 0px 0px; 
  border-right:  4px solid var(--background-color);
  border-top:    0px;
  cursor:    pointer;
  display:     flex;
  align-items: center;
  justify-content: center; 
}
.topButton, .topFull {
     height:    32px;   
  /*min-height:  20px;   */
  margin:        0px;
  padding:       0px 0px 0px 0px; 
  border-right:  4px solid var(--background-color);
  border-top:    0px;
  cursor:    pointer;
  display:     flex;
  align-items: center;
  justify-content: center; 
}
.topButton {
  float:       right;
    width:       138px;  
  /*min-height:  20px;   */
  background:  var(--top-color);
  padding:       0px 0px 0px 0px; 
  border-right:  4px solid var(--background-color);
  border-top:    0px;
}
.topFull {
  float:       left; 
  width:       138px; 
  /*min-height:  20px;   */
  background:  var(--full-color);
  padding:       0px 0px 0px 0px; 
  border-left:   4px solid var(--background-color);
  border-top:    0px;
  display:     hidden;
}

.topLinks:hover, .topFull:hover, .topButton:hover, .topIcon:hover {
  background: var(--frame-color);
  color:      yellow;
  border:        4px solid var(--frame-color);
}
/* --------------------------------------------- */
.statusContainer{
  background: var(--background-color);
  font-size:     16px;
  width:        100%;
  min-height:    20px;
  margin-top:     2px;
  border:         4px solid var(--frame-color);
  border-radius:  4px;
  overflow: hidden;
}
.statusbarDiv{
  width:         99%;
  background:   var(--background-color);
  border:         0px 4px 0px 0px solid var(--background-color);
  border-radius:  4px;
}  

#statusbar{
  width:        100%;
  height:        30px;
  margin:         2px;
  border-top:     0px;
  border:         4px solid var(--top-color);
  border-radius:  0px;
  /*font-weight:  100; */
  padding:        0px;   
  background:   var(--top-color);
  color:        var(--background-color);
  text-align:    left;
  overflow:    hidden;
  position:  relative;
        display:     flex;
    align-items: center;
}
/* --------------------------------------------- */
.instructionsContainer {
  display: none;
  float:   left;
  width:   100%;
  font-size:      14px;
  background-position:80% center;
  background: var(--background-color);
  margin-top:         2px;
  border:    4px solid var(--frame-color);
  border-radius: 4px;
  padding:   0px 0px 0px 0px;
}
.instructions {
  background: var(--background-color);
  border: 0px solid var(--top-color);
  color:     var(--button-color);
  padding:   0px 3px 0px 0px;
}

/*
.topMenu .options select{
  background: transparent;
    color:      blue;
  line-height: 2;
  border: 0;
  padding: 0;
  border-radius: 0;
  width: 60%;
  position: relative;
  z-index: 10;
  font-size: 1em;
} */
/* --------------------------------------------- */
.gameStatusArea {
  width:        100%;
  min-height:    30px;   
  margin-top:     2px;
  border:         4px solid var(--frame-color);  
  border-radius:  4px;
  font-size:    18px;
  font-weight:  12;
  padding:       0px 0px 0px 0px;   
  background: var(--background-color);
  overflow: hidden;
  position: relative;
}
.status{
  width:        50%;
  border:        2px solid var(--background-color);
  margin:        0px;
  float: left;
}
.area2{
  width:        50%;
  border:        2px solid var(--background-color);
  margin:        0px;
  float: left;
}

.topTitle, .title, .timer, .reset{
  float:        left;
  text-align: center;
  /*color:      #999900;  */
  min-height:   36px;   
  padding:      0px 0px 0px 0px;   
  border-top:    0px;
      display:     flex;
    align-items: center;
    justify-content: center; 
}
.topTitle {
  background: var(--button-color);
  color:      white;
  width:        33%;
}
.title {
  background: var(--button-color);
  color:      white;
  width:        33%;
  border-left:  4px solid var(--background-color);
}

.reset {
  background-color: var(--top-color); /* Green background */
  border:         0px solid var(--frame-color);  
  color:      yellow;
  border-right:   4px solid var(--background-color);

/*  border-right:   10px solid #00dddd;  */
} 

.reset:hover {
  background: var(--frame-color);
    color:      yellow;
}

.lighter {
  background: var(--hover-color);
}

.statusCanvas{
  width:         70%;
  margin:        0px;
  float: left;
  background:  white;

}
#statusCanvas{
  border-top:    0px;
  border:        0px solid var(--background-color);
  border-radius: 0px;
  border-width:  0px 1px 1px 1px;
}
/* --------------------------------------------- */
.gameArea {
  width:        100%;
  height:       568px;
  margin-top:     2px;
  border:         4px solid var(--frame-color);  
  border-radius:  4px;
  font-size:    16px;
  font-weight:  12;
  background: var(--background-color);
  overflow: hidden; 
  position: relative;
}

.button-group {
  float:    left;
  width:     16%;
}

.divbutton, .divbutton-sel {
  background-color: var(--top-color); /* Green background */
  border:         3px solid var(--dark-color);  
  border-radius:  3px;
  font-size:     18px;
    display:     flex;
    align-items: center;
    justify-content: left;  
  color:        white;
  width:        150px;
  height:        60px;   
  margin:         2px;
  padding:       10px 3px 10px 3px;   
  cursor:     pointer;
}

.divbutton:hover, .divbutton-sel:hover {
  background: var(--frame-color);
  opacity: 1.0;
}

.button-group button:not(:last-child) {
  border-bottom: none; /* Prevent double borders */
}

/* --------------------------- */
/* The container <div> - needed to position the dropup content */
.new-dropup {
  position:   relative;
  width:           30%;
  border-right  :   5px solid var(--background-color);
  display:    inline-block;
}

/* Dropup content (Hidden by Default) */
.new-dropup-content {
  display: none;
  position: relative;
  color: white; /* White text */
  text-align: left;
  top: 0px;
  left: 0px;
  height: 36px;
  width: 140px;
  /*box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.2); */
  z-index: 10;
  cursor:  pointer;
}

/* Show the dropup menu on hover */
.new-dropup:hover .new-dropup-content {
  display: inline-block;
  background-color: var(--frame-color); /* Blue background */
  padding: 5px 3px 3px 16px;
}

/* Change the background color of the dropup button when the dropup content is shown */
.new-dropup:hover .new-dropup-content:hover {
    background-color: var(--hover-color); /* Blue background */
}  
/* --------------------------- */

.canvasContainer {
  float:     right;
  width:       84%;
  height:     100%;
  border:        4px solid var(--xxx-color);  
  border-width: 0px 0px 0px 0px;
       padding: 2px 3px 2px 2px; 
}

.canvasArea {
  float: left;
  width:      100%;
  height:     100%;
  border:         4px solid #001080ff;  
  border-radius:  4px;
  border-width: 0px 0px 0px 0px;
       padding: 0px 0px 0px 0px; 
}

.mazeCanvas {
  border:         4px solid var(--xxx-color);  
  border-width: 8px 8px 8px 8px;
       padding: 0px 0px 0px 0px; 
}

#mazeCanvas {
  margin:         0px;
  border-top:     0px;
  border:        10px solid #001080ff;
  border-radius:  4px;
  border-width: 8px 20px 20px 8px;
       padding: 0px 0px 0px 0px; 
}
/* --------------------------------------------- */
.hiddenArea {
  display: none;
}

.footerArea {
  float: left;
  width:  100%;
  margin-top:  2px;
  background: var(--box-color);
  border: 4px solid var(--frame-color);
  border-radius:  4px;
     padding: 2px 2px 2px 2px; 
}

.footer {
  background: black);
  width:         100%;
  min-height:    20px;
  margin-top:     0px;
  border-top:     0px;
  border:         3px solid var(--top-color);
  border-radius:  0px;
       padding: 0px 0px 0px 0px; 
  /*overflow: hidden;  */
  text-align: center;
  font-size: 12px;
  color: white;  
}

.footerText {
  background-color: var(--top-color);
  width:         100%;
  border:         0px solid #00aacc;  
  border-radius:  0px;
    padding: 3px 3px 3px 3px;
}

/*-----------------------------------------*/
@media only screen and (max-width: 1000px) {

.topLinks {
  width:     33%;
  font-size: 10px;
}
.topButton {
  width:     33%;
  font-size: 10px;
}
.topFull {
  width:     30%;
  font-size: 10px;
}
.instructionsContainer {
  font-size: 12px;
}
.status{
  width:        100%;
  border:        2px solid var(--background-color);
  border-width: 2px 0px 1px 3px;
  margin:        0px;
  float: center;
}
.area2{
  width:        100%;
  border:        2px solid var(--background-color);
  margin:        0px;
  border-width: 1px 0px 2px 3px;
  float: center;
}

.statusContainer{
  font-size: 11px;
}

div.statusbar{
  width: 100%;
}

div.topTitle{
    font-size:   14px;
    min-height:  24px;   
}
div.title{
    font-size:   14px;
    min-height:  24px;   
}
.timer {
    font-size:   14px;
    min-height:  24px;   
}
.reset {
    font-size:   14px;
    min-height:  24px;   
}

div.statusCanvas{
  width: 100%;
}

  div.button-group {
    width:      100%;
    float:      left;
    position:   relative;
    display:    inline-block; 
  }
  
  div.divbutton {
    background-color: var(--dark-color); 
    float: left;
    font-size:    14px;
    /*padding:      12px 3px 3px 5px;/* Some padding */
    width:        32%;
    height:       24px;
  }
  div.divbutton-sel {
    background-color: var(--dark-color); 
    float: left;
    font-size:    14px;
    /*padding:      12px 3px 3px 5px;/* Some padding */
    width:       100%;
    height:       24px;
  }
  
  div.divbutton:hover, div.divbutton-sel:hover {
    background-color: var(--top-color); 
  }
    
  .new-dropup {
    width:        32%;
  } 
  
  .new-dropup-content {
    height:       14px;
    width:       100%;
    /*min-width: 90px; */
    box-shadow:    0px 10px 10px 0px rgba(80,0,0,0);
  }
  .new-dropup:hover .new-dropup-content {
    font-size:    12px;
    width:       90%;
    /*width:   90px; */
    height:       24px;
    background-color: var(--top-color); /* Blue background */
    padding:       3px;
    opacity:     1.0;
  }
  .new-dropup:hover .new-dropup-content:hover {
    background-color: var(--hover-color); /* Blue background */
}  
.footer {
  background: black);
  min-height:    20px;
  font-size: 10px;
  color: white;  
}
/*-----------------------------------------*/


/*-----------------------------------------
@media only screen and (min-width: 999px) {

.canvasContainer {
  float:     bottom;
  width:      100%;
  height:     100%;
}

.canvasArea {
  width:   100%;
}  

#mazeCanvas{
  width:   600px;
  height:  486px;
}

}
/*-----------------------------------------*/


/*-----------------------------------------*/
@media only screen and (max-width: 1000px) {
  
.gameArea {
  height:   440px;
}
  
.canvasContainer { 
  width:   100%;
  height:  90%;
}    
 
.canvasArea {
  width:   100%;
  height:   95%;
  background-color:  #001080ff; /* Blue background */
}    

.mazeCanvas{
  width:   100%;
  height:  100%;
  object-fit:  contain;
}
  
}
/*-----------------------------------------*/

/* Styles for portrait orientation */
@media screen and (orientation: portrait) {
  /* CSS rules specific to portrait mode */
  body {
    background-color: lightblue;
  }
  
  .topFull {
     display:  none;
  }
}

/* Styles for landscape orientation */
@media screen and (orientation: landscape) {
  /* CSS rules specific to landscape mode */
  body {
    background-color: lightgreen;
  }
  
  .topFull {
     display:  flex;
  }
}



/*
.footer {
  background-color: var(--frame-color);
  margin-top:  2px;
  width: 100%;
  float: left;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
    border-radius: 5px;
}    */

/* unused style group  */
/*
.button-group button {
  border: 10px solid #dd00ddff; 
  color: white; 
  padding: 10px 3px; 
  cursor: pointer; 
  width: 300px; 
  height: 500px;
  display: block; 
}   */

/* Add a background color on hover */
/*
.button-group button:hover {
  background-color: solid var(--frame-color);
}
*/