body { height: 100vh;  width: 100%; background-color: #ffffd4;  color: navy; font-family: arial; font-size: .8em; line-height: 1.3 }

/* For all elements */
.hide-scrollbar {
    overflow: auto; /* or scroll */
    
    /* Hide scrollbar for Chrome, Safari, and Opera */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.hide-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

  
  .word-wrap {
    /* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
    -ms-word-break: break-all;
    word-break: break-all;
    /* Non standard for webkit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
#statsWrapper {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  margin-left: 40px; /* optional, matches your layout */
}

.statsBlock h2 {
  margin-bottom: 10px;
}



.button {
  background-color: red;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

/* Specifies the size of the audio container */
audio {
  width: 100px;
  height: 15px;
}


audio::-webkit-media-controls-enclosure {
    overflow:hidden;
}

audio::-webkit-media-controls-panel {
    width: calc(80% + 10px); /* Adjust as needed */
	justify-content: center;
}

/* Removes the timeline */
audio::-webkit-media-controls-timeline {
  display: none !important;
}

/* Removes the timeline */
audio::-webkit-media-controls-more-options {
  display: none !important;
}

/* Removes the time stamp */
audio::-webkit-media-controls-current-time-display {
  display: none;
}
audio::-webkit-media-controls-time-remaining-display {
  display: none;
}

.buttonClass {
  font-size:15px;
  font-family:Arial;
  width:22px;
  height:22px;
  border-width:1px;
  color:#fff;
  border-color:#84bbf3;
  font-weight:bold;
  border-top-left-radius:6px;
  border-top-right-radius:6px;
  border-bottom-left-radius:6px;
  border-bottom-right-radius:6px;
  box-shadow:inset 0px 1px 0px 0px #bbdaf7;

  background:linear-gradient(#79bbff, #378de5);
}

.buttonClass:hover {
  background: linear-gradient(#378de5, #79bbff);
}

.buttonClass2 {
  font-size:15px;
  font-family:Arial;
  width:10px;
  height:22px;
  border-width:1px;
  color:#fff;
  border-color:#84bbf3;
  font-weight:bold;
  border-top-left-radius:6px;
  border-top-right-radius:6px;
  border-bottom-left-radius:6px;
  border-bottom-right-radius:6px;
  box-shadow:inset 0px 1px 0px 0px #bbdaf7;

  background:linear-gradient(#79bbff, #378de5);
}

.buttonClass2:hover {
  background: linear-gradient(#378de5, #79bbff);
}
header h1 {display: inline-block; padding-left: .5em; font-size: 2.5em; font-family: sans-serif; color: menu}
.nav {
    padding: .5em;
   }
.nav ul {border: 0px; list-style-type: none; padding-left: .5em; margin-bottom: 0; margin-top: 0; margin-left: 0; margin-right: 0; text-align: left; top: -.5em; border-top-width: thin; border-bottom-width: thin}
.nav li {display: list-item; padding-right: 1.3em; font-family: Arial;}
 
 .inav {
    padding: 0;	
	
   }
.inav ul {border: 0px; list-style-type: none; padding-left: .5em; text-align: left; top: -1.5em;}
.inav li {padding-right: 1.3em; font-family: Arial; }



.aside-left {display: inline-block; width: 15%; padding: .4em; background-repeat: repeat; float: left; height: 100%; margin-top: 2em}
article {
    display: inline-block;
    padding: 0em;
    width: 64%;	
	height: 100vh;
}
.mostly-customized-scrollbar {
  display: block;
  width: 100%;
  overflow: auto;
  height: 700px;
}
.bullets {
  width: 90%;
  margin-left: 4em
}

blockquote { 
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
  text-align: justify;
}
.tableleft {display: inline-block; float: left;	border:8px; width: 45%; margin-left: 1em; margin-right: 1em; text-align: left
}
   
.tableright {display: inline-block; float: left; border:8px; width: 45%; margin-left: 1em; margin-right: 1em; text-align: left
}

.ctableleft {display: inline-block; float: left;	border:8px; width: 10%; margin-left: 1em; margin-right: 1em; text-align: left
}
   
.ctableright {display: inline-block; float: left; border:8px; width: 80%; margin-left: 1em; margin-right: 1em; text-align: left
} 

.dtableleft {display: inline-block; float: left;	border:8px; width: 20%; margin-left: 1em; margin-right: 1em; text-align: left
}
   
.dtableright {display: inline-block; float: left; border:8px; width: 70%; margin-left: 1em; margin-right: 1em; text-align: left
} 


  .red    { background: red;    color: white;  width: 115px;  text-align: center;}
  .amber  { background: orange; width: 115px;  text-align: center;}
  .green  { background: green;  color: white; width: 115px;  text-align: center;}
  .gray   { background: gray;   color: white; width: 115px;  text-align: center;}

  .progressBar {
    width: 200px;
    height: 12px;
    background: #eee;
    border-radius: 4px;
    overflow: hidden;
    margin: 4px 0;
  }

  .progressFill {
    height: 100%;
  }

  .grid {
    margin-top: 25px;
    margin: 20px auto; /* centers horizontally */
    display: grid;
    grid-template-columns: repeat(25, 31px);
    gap: 3px;
    justify-content: center; /* ensures grid items are centered */
  }

  .gridItem {
    width: 31px;
    height: 20px;
    border-radius: 3px;
    cursor: pointer;
  }

#statsArea {
  margin-left: 40px;
}


.phrase-table {
  display: grid;
  grid-template-columns: repeat(4, 28px);
  grid-template-rows: repeat(12, 28px);
  grid-gap: 1px;
  margin-right: 1%;
  max-width: 175px;
  justify-content: right;
}

.phrase-element group-level {
  padding: 1px;
  position: relative;
  z-index: 1;
  cursor: default;
  transition: all 0.1s ease;
}
.phrase-element void {
  padding: 4px;
  position: relative;
  z-index: 1;
 
  transition: unset;
}
.phrase-element .phrase-element-inner {
  background-color: #ffffd4; 
  border-color: #ffff97;
  padding: 4px 4px;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  transition: inherit;
}
.phrase-element .title {
  font: 700 9pt/1.3 "Poppins", sans-serif;
  margin: 0em 0 0;
  padding-right: 4px;
  transition: 0.08s ease 60ms;
  background: transparent;
    border-color: red;
text-align:right;
}

.phrase-element:after {
  z-index: 10;
  background: #f9f8f7;
  color: #222;
  width: 35px;
  position: absolute;
  top: 80%;
  opacity: 0;
  transition: opacity 0.03s ease 0.03s, top 0.03s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.03s;
  height: auto;
  font-size: 10pt;
  line-height: 1;
  padding: 6px;
  margin: 0 0 0 0px;
  border-radius: 2px;
    border-color: white;
  text-align: right;
}
.phrase-element:hover {
  transform: scale(.95);
  z-index: 10;
}
.phrase-element:hover .phrase-element-inner {
  background: transparent;
  color:white;
}
.phrase-element:hover .title,


.phrase-element:hover:after {
  top: 100%;
  opacity: 1;
}

a.phrase-element {
  cursor: pointer;
}

a:link {
  text-decoration: none;
  color: navy;
}

a:visited {
  text-decoration: none;
  color: navy;
}

a:hover {
  text-decoration: underline;
  color: white;
  background: linear-gradient(to bottom right, #37cfdc 0%, #5a88e5 100%);
}

a:active {
  text-decoration: none;
  color: navy;
}

.group-level {
  background: linear-gradient(to bottom right, #37cfdc 0%, #5a88e5 100%);
}
.group-level .title,



.empty-spacer-1 {
  grid-column: 3/span 4;
  grid-row: 1;
}
.empty-spacer-2 {
  grid-column: 1;
  grid-row: 4;
}



h2 {
    font-size: 2em;	
	margin-left: .5em;
	margin-top: .25em;
	margin-bottom: .25em;
}
article p {margin-bottom: 1em; margin-top: .5em; margin-left: 1em; margin-right: 1em; text-align: justify}
.aside-right {
    display: inline-block;
    vertical-align: top;
  
    padding: 1em; 
	background-repeat: repeat;
	color: navy;
}	
frame {margin-bottom: 1em; margin-top: .5em; margin-left: 2em; margin-right: 1em; text-align: left}   
 footer {	 
  border-bottom: 2px solid gray; 
   width: 100%;	
	height: 2em;
   }
footer ul {border: 0px; list-style-type: none; padding-left: .5em; margin-bottom: 0; margin-top: 0; margin-left: 0; margin-right: 0; text-align: center; top: -1em; border-top-width: thin; border-bottom-width: thin; }
footer li {display: inline-block; padding-right: 1.2em; font-family: Arial; font-weight: bold; }
 
 
 #words {
    border-collapse: collapse;
  width: 100%;
}

#words td, #words th {
  border: 1px solid #ddd;
  padding: 4px;
}

#words tr:nth-child(even) { background: #fafafa; }

#words tr:hover { background: #e9f7ff; }

.col-eng { width: 55%; }
.col-pin { width: 30%; }
.col-aud { width: 15%; text-align: center; }


#words td {
    padding: 6px 8px;
    vertical-align: middle;
}


#words th {
  padding: 8px;
  text-align: left;
  background-color: #0000ff;
  color: white;
}
 
 #details {
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
  font-weight: normal;
  border-collapse: collapse;
  width: 100%;
  vertical-align:top;
  background-color: white;
}

#details td, #words th {
  border: 1px solid #aaaaaa;
  padding: 4px;
  vertical-align:top;
}

#details tr:nth-child(even){background-color: #1d87ff;
color: white; }

#details th {
  padding-top: 4px;
  padding-bottom: 4px;
  text-align: center;
  border: 1px solid #aaaaaa;
  background-color: #0068de;
  color: white;
  font-size:large;
}

#decomp {
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
  font-weight: normal;
  border-collapse: collapse;
  width: 100%;
  vertical-align:top;
  background-color: white;
}

#decomp td, #words td {
  border: 1px solid #aaaaaa;
    text-align: left;
    padding-left: 4px;
    padding-top: 0px;
  padding-bottom: 0px;
  
  vertical-align:top;
}

#decomp tr:nth-child(even){background-color: #1d87ff;
color: white; }

#decomp th {
  padding: 4px;
  text-align: left;
  border: 1px solid #aaaaaa;
  background-color: #0068de;
  color: white;
  font-size:medium;
  font-weight: normal;
}

#decomp2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
  font-weight: normal;
  border-collapse: collapse;
  width: 100%;
  vertical-align:top;
  background-color: white;
}

#decomp2 td, #words td {
  border: 1px solid #aaaaaa;
    text-align: left;
    padding-left: 4px;
    padding-top: 0px;
  padding-bottom: 0px;
  
  vertical-align:top;
}

#decomp2 tr:nth-child(even){background-color: #1d87ff;
color: white; }

#decomp2 th {
  padding: 4px;
  text-align: left;
  border: 1px solid #aaaaaa;
  background-color: #0068de;
  color: white;
  font-size:medium;
  font-weight: normal;
}
 
h3 {font-size: 1.25em; margin-top: .5em; margin-bottom: 0em; text-align: center}
h6 {font-size: 4.25em; color: #000080; margin-top: .5em; text-align: center}
h5 {font-size: 3.25em; color: #000080; margin-top: .5em; text-align: center}
h4 {font-size: 2.25em; color: #000080; margin-top: .5em; text-align: center}
.h7 {font-size: 1.25em; color: #000080; margin-left: .5em; margin-right: .25em; margin-bottom: .25em; text-align: left}
.h8 {font-size: .9em; color: #000080; margin-left: 3em; margin-right: .25em; margin-bottom: .25em; text-align: left}

/* BACKGROUND COLORS */
header {
     background-color: #ffffff;
   
}
aside, main { background-color: #ffff97; }
nav {
    background-color: #ffff97;
   
}	
 footer {
    background-color: #ffff97;
   
}	

article {
    background-color: white;
}