html, body {
    width: 100%;
    height: 100%;
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
}

h1 {
    color: #606;
    font-size: 60px;
    margin: 3px;
}

h2 {
    color: #006;
    font-size: 52px;
    margin: 3px;
}

h3 {
    color: #066;
    font-size: 44px;
    margin: 3px;
}

h4 {
    color: #930;
    font-size: 40px;
    margin: 3px;
}

p {
    padding: 12px;
    margin: 6px;
}

li {
    padding: 8px;
}

ul {
    margin-top: 6px ;
    margin-bottom: 6px ;
}

ol {
    margin-top: 6px ;
    margin-bottom: 6px ;
}

table, th, td {
    border: 2px solid white;
}

div.title {
    z-index: 2;
    position: fixed;
    background-color: #acb;
    top: 0;
    right: 3%;
    left:  3%;
    margin: 6px, 6px, 6px, 6px;
    height: 160px;
    border: 3px solid #7b2;
    padding: 6px;
    font-size: 30px;
}

div.scroll {
    position: fixed;
    z-index: 4;
    top: 180px;
    right: 3%;
    left: 3%;
    bottom: 3px;
    border: 3px solid #27b;
    background-color: #ddc;
    text-align: left;
    scroll-behaviour: smooth;
    overflow-x: wrap;
    overflow-y: auto;
    margin: 6px, 6px, 6px, 6px;
}


textarea {
    position: fixed;
    top: 90px;
    right: 3%;
    width: 90%;
    margin: 0px, 0px;
    padding: 10px;
    bottom: 0%;
    z-index: 5;
    background-color: #ddc;
    border: 3px solid #AD7321;
    font-size: 30px;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #abc;
  color: #444;
  cursor: pointer;
  padding: 4px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 52px;
}

 
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
    background-color: #cab;
}

.active, .collapsible {
    background-color: #abc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  display: block;
  overflow: hidden;
  background-color: #ddc;
  font-size: 30px;
}

@media screen and (max-width: 600px),
       screen and (max-height: 600px),{
  .collapsible {
      position: -webkit-sticky;
      position: sticky;
      top: 0px;
  }
  .collapsible.first {
    z-index: 3;
    top: 0pt;
    height: 30pt;
  }

  .collapsible.second {
    z-index: 2;
    top: 30pt;
    height: 25pt;
    background-color: #bac;
  }
  
  html, body {
    width: 100%;
    height: 100%;
    background-color: #000;
    color: #000;
    font-size: 20px;
    overflow-x: hidden;
  }

  h1 {
    font-size: 36px;
    margin: 3px;
  }

  h2 {
    font-size: 32px;
    margin: 3px;
  }

  h3 {
    font-size: 28px;
    margin: 3px;
  }

  h4 {
    font-size: 24px;
    margin: 3px;
  }

  div.title {
    height: 90px;
  }

  div.scroll {
    font-size: 20px;
    position: fixed;
    z-index: 4;
    top: 180px;
    right: 3%;
    left: 3%;
    bottom: 3px;
    border: 3px solid #2173AD;
    background-color: #ddc;
    text-align: left;
    scroll-behaviour: smooth;
    overflow-x: hidden;
    overflow-y: scroll;
    margin: 6px, 6px, 6px, 6px;
    top: 100px;
  }
  
  .content {
    display: block;
    overflow: hidden;
    background-color: #ddc;
    font-size: 24px;
  }

  .active, .collapsible {
    background-color: #abc;
  }

  .collapsible {
    padding: 2px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 40px;
  }

}

@media screen and (max-height: 600px) and (orientation: landscape){
  div.title {
    height: 45px;
  }
  div.scroll {
    top: 50px; 
  }
}