@media (orientation: landscape) {
  img {
    width: auto;
  }
}

@media (orientation: portrait) {
  img {
    width: 100%;
  }
}

@media all and (orientation:landscape) {
 p {font-size:1.25em; margin: 30px;}
 span {font-size:1.25em; margin: 30px;}
 #textarea {font-size:1.25em; margin: 30px;}
 #heading_id{font-size:5em;} 
 h1 {font-size:2em;}
 h2 {font-size:1.5em;}
 #input {font-size:1.25em;}
 #button {font-size:20px;}
  #dropdown {font-size:1em;}
  #div {font-size:1em;}
 #thumbsup_id{width:15px;}
  #likes_id {font-size:1em;}
   #image_id{width:70%;}

}

@media all and (orientation:portrait) {
 p {font-size:1em; margin: 10px;}
 span {font-size:1em; margin: 10px;}
 #textarea {font-size:1em; margin: 10px;}
 #heading_id{font-size:1.3em;} 
 h1 {font-size:1.25em;}
 h2 {font-size:1em;}
 #input {font-size:1em;}
 #button {font-size:1em;}
 #dropdown {font-size:1em;}
  #div {font-size:1em;}
 #thumbsup_id{width:15px;}
  #likes_id {font-size:0.8em;}
 #image_id{width:1000;}

}


@media all and (orientation:landscape) {    
   .dataTables_filter input {
      height:50px;
      color: white;
      background-color: blue;
      border: 2px solid white;
      font-family:'Courier New';
      border-radius: 20%;
      display:inline-block;
      padding:2px 7px;
      margin-right:16px;
      
   }

}
@media all and (orientation:portrait) {

  .dataTables_filter input {
      height:50px;
      color: white;
      background-color: blue;
      border: 2px solid white;
      font-family:'Courier New';
      border-radius: 20%;
      display:inline-block;
      padding:2px 7px;
      margin-right:16px;
   }

}
body 
{
  font-size: 100%;
}

* 
{
  box-sizing: border-box;
}

.column {
  float: left;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

.button:hover {
  background-color: white; 
  color: black;
  border: 2px solid black;
 }
 
    .redText
    {
        color:red;
        font-style: italic;
        text-shadow: 1px 1px red;
        font-size:3em;
    }
    .greenText
    {
        color:green;
        font-style: italic;
        text-shadow: 1px 1px green;
        font-size:3em;
    }
    .blueText
    {
        color:blue;
        font-style: italic;
        text-shadow: 1px 1px blue;
        font-size:3em;
    }
    .blackText
    {
        color:black;
        font-style: italic;
        text-shadow: 1px 1px black;
        font-size:2em;
    }


.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

img {
  display: block;
  margin: 0 auto; 
}

.imageleft {
  float: left;
  width:3%;
   margin-left: 0px;
}

.imageright {
  float: right;
  width:3%;
   margin-right: 0px;
}

.container {
  display: grid;
  height: auto;
  grid-template-columns: auto auto;
  grid-template-rows: auto;
    justify-content: center;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  position: relative;
}

.value 
{
  width: 100%;
  height: 100%;
  background: white;
  border: 2px solid black;
}
.label 
{
  width: 100%;
  height: 100%;
  background: white;
  border: 0px solid black;
  text-align: right;
}
*:focus {
    outline: none;
}