/* Text Formatting */
body { padding-top: 56px; }
body { font-family:'Ubuntu', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, serif; 
       background-color: #2e2d2d;
       color: white; }

.left-aligned { margin-left: auto; }
.bg-dark { background-color: #120707 !important; }
.bg-hero { background-color: #BD2121; 

  position: relative;
}

/* Style the overlay */
.overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%; /* Adjust as needed to control the width of the overlay */
    width: 100%;
    height: 100%;
    pointer-events: none;
    
    /* background-color: #AC6F14; /* Adjust the color and opacity as needed */
}

/* Style the overlay image */
.overlay-image {
    position: absolute;
    top: 50%;
    left: 80%; /* Adjust the left position as needed */
    transform: translate(-50%, -50%); /* Center the image vertically and horizontally */
    z-index: 2; /* Ensure the image is above the overlay */
    /* You can also set a maximum width if needed */
    max-width: 15%;
    height: auto;
}


/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }




/* Notebook Classes and Such -----------------------------------------------------------------------*/

* {
  box-sizing: border-box;
}

/* Create three equal columns that floats next to each other */
.columnnotebook {
  float: left;
  width: 33.33%;
  padding: 10px;
  text-align: center;
  background: white;
  color: black;
  display: table-cell;
}
     
.rownotebook {
border: black solid 2px;}
     
     
/* Clear floats after the columns */
.rownotebook:after {
  content: "";
  display: table;
  clear: both;
}
     
.accordionnotebook {
  background-color: #FDF5F5;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  border-top: black solid 3px;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.8s;
}
     
.active22, .accordionnotebook:hover {
  background-color: #dc3434;
  color: black;
}
     
.accordionnotebook:after {
  content: '\002B';
  color: black;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
     
.active22:after {
  content: "\2212";
  color: black;
}
     
.panelnotebook {
  padding: 0px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
  background: white; 
}
     
.columnnotebook li {
text-align: left;
margin-left: 5%;
}
     
.underlinewet {
        text-decoration: none; 
        position: relative; 
}   
     
.underlinewet:after {
             position: absolute;
             content: '';
             height: 5px;
             bottom: -5px; 
             margin: 0 auto;
             left: 0;
             right: 0;
             width: 50%;
             background: #DC8834;
}
               
.underlinedry {
            text-decoration: none; 
            position: relative; 
}   
     
.underlinedry:after {
             position: absolute;
             content: '';
             height: 5px;
             bottom: -5px; 
             margin: 0 auto;
         left: 0;
             right: 0;
         width: 50%;
         background: #DC3434; }
               
      .underlinehp {
            text-decoration: none; 
            position: relative; 
}   
     
.underlinehp:after {
             position: absolute;
             content: '';
             height: 5px;
             bottom: -5px; 
             margin: 0 auto;
         left: 0;
             right: 0;
         width: 50%;
         background: #DC3488; 
}
     
.columnnotebook h2 {
     color: black !important;
     font-size: 1.6em !important;
}
     
.columnnotebook h4 {
     font-size:.8em !important;
     font-weight: bold !important;
}

.move-image {
    transition: transform 0.3s ease;
}

     
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
       .columnnotebook {
         width: 100%;
       }
}
     



/*
#34C97B green
#a62615 red
#E5007E pink */