html {
  height: 100%;
  width: 100%;
}

body {
  padding: 10px;
  background:white;
  font-family: sans-serif;  
  color: #404040;
  font-size: 13pt;
}

#menu {
 padding: 0px;
}

#help p {
  line-height: 90%;   
    
}

.activityBox{
  vertical-align: top;
  width: 300px;
  min-width: 300px;
  border: solid 3px #404040;
  border-radius: 15px;
  padding: 15px 15px 15px 15px;
  margin: 5px;
  display: inline-block;
  height:auto;
  overflow: hidden;
  break-inside: avoid-column; 
}


.choiceBox {

    width: auto;
    
}

table {

    border-spacing: 0px;
    border: solid 1px black;

}

td {
    border: solid 1px black;
    padding: 3px 10px;
    margin:0px;
    border-spacing: 0px;
    

}

td img {
    border: none;
    background: none;
    zoom: 0.7;
    padding: 0;
    margin: 10px 0 0 10px;
}

#chooser {
    display: none;
    margin-top: 10px;
    background: #fdf9f9;
}

#closeChooser{
    margin: 0px;
}

container {
    /*max-height: 600px;*/
    width: 100%;
  align-items: start;
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
  -webkit-column-width: 320px;
  column-width: 320px;
  -webkit-column-gap: 18px;
  -moz-column-gap: 18px;
  column-gap: 18px;
  display: block;
  column-fill: balance-all;    
}

button {    
    border: solid 4px gray;
    padding: 5px 9px;
    border-radius: 12px;
    background: ghostwhite;
    font-weight: 600;
    height: 37px;
}

#blockButton, #vocabButton {
    float: right;
    display: block;
    margin: -7px -8px;
}

#blockButton {
    margin: -30px -8px -7px 0px;
}

#zoomButtons {
    display: inline-block;
    margin-top: -15px;
    float: right;
}

#zoomButtons button {
    font-size: 24pt;
    width: 35pt;
    height: 35pt;
    line-height: 60%;
    margin: 5px 0;  
}

.refresh {
    font-size: 16px;
    border: none;
    border-radius: 24px;
    transform: rotate(90deg);
    float: right;
    margin:-37px 74px 0 0;
}

.fullSc {
    border: none;
    border-radius: 24px;
    font-size: 20px;
    float: right;
    margin: -37px 0px 0 0;
    line-height: 120%;
}

.rotateResize {
        transform: rotate(45deg);
        font-size: 33px;
        line-height: 0.7;
}
    

.choose {
    margin: -37px 40px 0 0;
}


#dailypredict {
  background: #feffa8;
}

#dailyVocab{
  background: #ffdddd; 
}

#dailyBlock{
  background:#d4d4ff; 
}

#dailyVideo {
   padding: 15px;   
}

#dailyVideo iframe {
    border-radius: 10px;
    border: solid 1px grey;
}

img {
    aspect-ratio: auto;
    max-height: 400px;
    max-width: 270px;
    margin: 10px 1px;
    padding: 10px;
    border: solid 3px #808080;
    border-radius: 15px;
    background: #fbfafb;
}

#dailyBlock img {
    max-width: 280px;
    max-height: 160px;
    width: auto;
    border: none;
    background: #fefefe;
}

#Title {
     padding: 5px 15px;   
}

h1 {
    color: black;
    margin: 0px;
    font-size: 24pt;
    text-align: center;
}

h2 {
    margin-block-end: 10px;
    margin-block-start: 2px;
}

h3 {
    margin: 5px 0;
}

ul {
 font-family: "Courier New", Courier, monospace;
 font-size: 18px;
 color: #888888;
    letter-spacing: -0.7px;
word-spacing: -3px;
 list-style-type: none;    
 padding-inline-start: 12px;    
}

ul b i {
  color: #000000;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
      width: 280px;
    background-color: #EEEEEE;
    color: #000;
    text-align: left;
    border-radius: 18px;
    border: solid 6px grey;
    padding: 10px 25px;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 34px;
  right: -13%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.vidBox {
    background: bisque;
}


#copyText {
visibility: hidden;
}

#copyright p {
    margin-block-start: 3px;
    margin-block-end: 3px;
    font-size: 11px;
}

@media print {
    #menu {display: none;}
    #zoomButtons {display: none;}
    #copyright {bottom:20px; position: absolute;}
    #dailyVideo {display: none;}
    }



@media only screen and (max-width: 767px) {
  
    body {
        margin: 0 auto;
        display: grid;
    }
    
    
    #zoomButtons {
        display: none;
    }

    container {
        margin: 0 auto;
        width: 400px;
        column-count: 1;
        display: inline;
    }
    
    .activityBox{
        width: 350px;
    }
    
    td img {
     zoom: 0.4;   
    }
    
    td {
    font-size: 12px;
    }
    
    #menu {
        margin: 0 auto;
        text-align:center;
        width: 400px;
        padding: 0;
        display: inline;
    }
    
    button {
        font-size: 15px;   
        
    }
    
    .tooltip .tooltiptext {
     width:310px;   
    }
}