/* Main text. */

@viewport {
    width: device-width ;
    zoom: 1.0 ;
  }
  
    /* Device checker */
    /* min-width: 769px */
  
  @media screen and (orientation: landscape) {
    #navigation {display:block; line-height: 45px;}
    #show:checked ~ #navigation {display:none;}
    input {opacity: 0;}
  .desktop {display: block;}
  .mobile {display: none;}
  .desktop {visibility: visible;}
  .mobile {visibility: hidden;}
  body {font-size: 20px;}
  .main h3 {font-size: 20px;}
  .main h2 {font-size: 23px;}
  .main h1 {font-size: 28px;}
  #navigation {font-size: 18px;}
  #navigation .button, #navigation .smallbutton {margin: 0% .5% 0% .5%}
  .button, .smallbutton {padding: 8px 25px 8px 25px; margin: 10px 0px 10px 0px; border: 2px solid black;}
  }
  
  @media screen and (orientation: portrait) {
    #navigation {display:none; line-height: 45px;}
    #show:checked ~ #navigation {display:block;}
    input {opacity: 0;}
  .desktop {display: none;}
  .mobile {display: block;}
  .desktop {visibility: hidden;}
  .mobile {visibility: visible;}
  body {font-size: 15px;}
  .main h3 {font-size: 16px;}
  .main h2 {font-size: 18px;}
  .main h1 {font-size: 23px;}
  #navigation {font-size: 18px; text-align: center}
  .button, .smallbutton {padding: 5px 20px 5px 20px; margin: 0% 2% 0% 2%; border: 1px solid black; text-align: center;}
  }
  
  @media screen and (orientation: landscape) {
    #groups {display:block; line-height: 45px;}
    #groupshow:checked ~ #groups {display:none;}
    input {opacity: 0;}
  .desktop {display: block;}
  .mobile {display: none;}
  .desktop {visibility: visible;}
  .mobile {visibility: hidden;}
  body {font-size: 20px;}
  .main h3 {font-size: 20px;}
  .main h2 {font-size: 23px;}
  .main h1 {font-size: 28px;}
  #groups {font-size: 18px;}
  #groups .button, #groups .smallbutton {margin: 0% .5% 0% .5%}
  .button, .smallbutton {padding: 8px 25px 8px 25px; margin: 10px 0px 10px 0px; border: 2px solid black;}
  }
  
  @media screen and (orientation: portrait) {
    #groups {display:none; line-height: 45px;}
    #groupshow:checked ~ #groups {display:block;}
    input {opacity: 0;}
  .desktop {display: none;}
  .mobile {display: block;}
  .desktop {visibility: hidden;}
  .mobile {visibility: visible;}
  body {font-size: 15px;}
  .main h3 {font-size: 16px;}
  .main h2 {font-size: 18px;}
  .main h1 {font-size: 23px;}
  #groups {font-size: 18px; text-align: center}
  .button, .smallbutton {padding: 5px 20px 5px 20px; margin: 0% 2% 0% 2%; border: 1px solid black; text-align: center;}
  }
  
  @media screen and (max-width: 600px) {
    .column {
      width: 100%;
    }
  }
  
  h1, h2, h3 {
    color: black;
  }
  html{ 
    background-image: linear-gradient(#8beef3, #c8edf0, #8beef3, #c8edf0, #8beef3);
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100%;
  }
  body {
    color: black;
    font-family: Verdana;
  }
  
  .square {
    object-fit: contain;
    height: 350px;
    width: 350px;
  }
  
  .threecolumn {
    float: left;
    width: 33.33%;
  }
  .twocolumn {
    float: left;
    width: 50%;
  }
  
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  .info {
    border: 3px solid #05deee;
    padding: 20px 20px 20px 20px;
    margin: 1% 5% 2% .5%;
    border-radius: 10px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.35), -5px 0px 5px rgba(0, 0, 0, 0.35);
    float: left;
    width: 25%;
    background: #abedf1;
  }
  .info img {
    object-fit: cover;
    width: 200px;
    height: 200px;
  }
  .info h4 {
    padding: 1px 0px 2px 0px;
    background: black;
    color: rgb(189, 189, 189);
  }
  .info p{
    padding: 0px 0px 0px 0px;
  }
  .info hr{
    border: 1px solid #030f14;
  }
  .info:after {
    content: "";
    display: table;
    clear: both;
  }
  
  .const {
    border: 5px solid #05deee;
    padding: 0px 20px 0px 20px;
    background: #abedf1;
    color: black;
    border-radius: 15px;
    margin: 1% 2% 2% 2%;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.35), -5px 0px 5px rgba(0, 0, 0, 0.35);
  }
  
  .const img{
    object-fit: contain;
    width: 300px;
    height: 200px;
    float: left;
    padding-right: 30px;
  }
  
  .const h2{
    display: inline;
  }
  
  
  .illus {
    object-fit: contain;
    width: 300px;
    height: 300px;
    float: left;
  }
  
  .const:after {
    content: "";
    display: table;
    clear: both;
  }
  
  .desc {
  
    padding: 5px 40px 5px 5px;
  }
  
  .desc p{
   text-indent: 60px;
  }
  
  .desc hr{
    border: 1px solid black;
  }
  
  .main {
    border: 3px solid #05deee;
    padding: 0px 20px 10px 20px;
    background: #c8edf0;
    color: black;
    border-radius: 15px;
    margin: 1% 2% 2% 2%;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.35), -5px 0px 5px rgba(0, 0, 0, 0.35);
  }
  
  .main h1{
    color: black;
    padding-right: 40px;
  }
  
  .main h2 {
    padding-top: 5px;
    color: black;
    }
    
  .main p {
    padding: 5px 1% 5px 1%;
  }
  
  .mainnf {
    border: 4px solid black;
    padding: 0px 20px 10px 20px;
    font-size: 20px;
    background-color: #c8edf0;
    color: black;
    border-radius: 15px;
    margin: 5% 25% 2% 25%;
  }
  
  nav {
      padding: 0px 5px 0px 5px;
      margin: 0% 2% 0% 2%;
      line-height: 25px;
  }
  
  label {
    cursor: pointer;
  }
  
  /* Links */
  
  a:link {
    color: #000000;
    text-decoration: underline;
  }
  a:visited {
    color: #272627;
    text-decoration: underline;
  }
  
  a:hover, a:focus {
    color: #353434;
    text-decoration: underline;
  }
  
  /* Misc. Formatting */
  
  hr {
   border: 2px solid black; 
  }
  
  .highlight:hover {
      color: #353434;
  }
    .secret {
    display: none;
  }
    
  code {
    font-size: 12px;
    padding-right: 10%;
    padding-left: 10%;
    word-break: break-all;
  }
  
  .hidden{
    display: none;
  }
  
  .button, .smallbutton{
    border-radius: 10px;
    box-shadow: 2px 2px 2px #030f14;
    background-color: #c8edf0;
    display: inline-block;
  }
  
  .button:hover, .smallbutton:hover {
    background-color: #dcebec;
  }
  
  .button:focus, .smallbutton:focus {
   outline: 1px solid #dcebec; 
  }
  
  input[type="checkbox"]:focus + label {
    outline: 1px solid #dcebec;
  }
  
  label {
   color: #c3fbfe;
   line-height: 20px;
   margin-bottom: 5px;
  }
  
  .hiddenbox {
    border: 5px solid #05deee;
    padding: 0px 20px 10px 20px;
    background: #abedf1;
    color: black;
    border-radius: 15px;
    margin: 1% 2% 2% 2%;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.35), -5px 0px 5px rgba(0, 0, 0, 0.35);
  }