/* Style the header */
.header {
    background-color: #a5a5a5;
    padding: 20px;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
  }

.image_class_1 {
  align-items: flex-start;
  margin: 0;
}

/* Class for a background img 
  .background_body {
  background-image: url("giphy.gif");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }*/
  /* Style Other Lists */
  .other_list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  /* Style the Dropdown Nav Menu Start*/
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
  

  li {
    float: left;

  }

  li a, .dropbtn {
    background-color: #5b635c; /* Green */
    border: 1px solid rgb(146, 146, 146);
    color: white;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    font-size: 15px;
    cursor: pointer;
    width: 100%;
    height: 75px;
    display: block; 
    letter-spacing: 1px;
    line-height: 95%;
    font-family: 'Courier New', Courier, monospace;
  }
  
  li a:hover, .dropdown:hover .dropbtn {
    background-color: black;
  }
  
  li.dropdown {
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #4e4b4b;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  .center-it {
    text-align: center; 
    position:relative; 
    padding-top:29px;
  }

  .dropdown-content a:hover {background-color: black;}
  
  .dropdown:hover .dropdown-content {
    display: block;
    color: white;
  }

/* Style the buttons */   
.btn-group .button {
  background-color: #5b635c; /* Green */
  border: 1px solid rgb(146, 146, 146);
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  cursor: pointer;
  width: 100%;
  height: 60px;
  display: block; 
  letter-spacing: 1px;
  line-height: 140%;
  font-family: 'Courier New', Courier, monospace;
}

.btn-group .button:not(:last-child) {
  border-right: none; /* Prevent double borders */
}

.btn-group .button:hover {
  background-color: #000000;
}

/* Button style 2 */
.button_style_2 {
  background-color: #5b635c; 
  border: 1px solid rgb(146, 146, 146);
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  cursor: pointer;
  width: 25%;
  height: 60px;
  display: block; 
  letter-spacing: 1px;
  line-height: 140%;
}
.button_style_2:hover {
  background-color: #000000;
}

/* Button style 3 */
.button_style_3 {
  background-color: #5b635c; 
  border: 1px solid rgb(146, 146, 146);
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  cursor: pointer;
  width: 65%;
  height: 65px;
  display: block; 
  letter-spacing: 1px;
  line-height: 140%;
}
.button_style_3:hover {
  background-color: #000000;
}

/* Button style 4 */
.button_style_4 {
  background-color: #5b635c; 
  border: 1px solid rgb(146, 146, 146);
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  cursor: pointer;
  width: 45%;
  height: 60px;
  display: block; 
  letter-spacing: 1px;
  line-height: 100%;
}
.button_style_4:hover {
  background-color: #000000;
}

  /* Style the body ; fixes a footer covering content
  body {
    min-height: 400px;
    margin-bottom: 100px;
    clear: both;

 }*/

/* Article element parameters (global) */
article {
    float: left;
    padding: 15px;
    width: 100%;
    background-color: rgb(189, 181, 181, .5);
    border: 5px solid rgb(255, 255, 255);
    font-family: 'Courier New', Courier, monospace;
    /*height: 500px;  only for demonstration, should be removed */
  }    
.article_style_0 {
  float: left;
  padding: 15px;
  width: 100%;
  background-color: rgb(189, 181, 181, .5);
  border: 1px solid rgb(255, 255, 255);
  /*height: 500px;  only for demonstration, should be removed */
}

  /* Class for aside tag */
.aside_class_1{
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}
/* Global Image style */
img {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

  /* Create two equal columns that float next to each other 
  .column {
    float: left;
    width: 50%;
    padding: 10px;
  }*/
/*
div {
  width: 100%;
}*/

  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
    width: 100%; 
  }
  
/* Style the body of the boxes */
  * {
    box-sizing: border-box;

  }


/* Col border style  */
  [class*="col-"] {
    float: left;
    padding: 10px;
    width: 100%; 
    border: 3px solid #ffffff; 
    
  }
  
/* Col border style  
[class*="col-"] {
  float: left;
  padding: 10px;
  width: 100%; 
  border: 3px solid #fd29ec; 
  
}*/

/* Responsiveness settings */
[class*="col- "] {
  width: 100%;
  font-family: 'Courier New', Courier, monospace;
}

/* Style for buttons */
.custom-button {
  background-color: #5b635c; 
  border: 1px solid rgb(146, 146, 146);
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  cursor: pointer;
  width: 100%;
  height: 80px;
  display: block; 
  letter-spacing: 1px;
  line-height: 100%;
}
.custom-button:hover {
  background-color: #000000;
}


@media only screen and (min-width: 600px) {
  /* For phones: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 20.00%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}

  /* Adjusting button size for smaller screens */
  .custom-button {
    padding: 10px 20px; /* Smaller padding */
    font-size: 14px;    /* Slightly smaller font size */
    height:50px;
  }

}


@media only screen and (min-width: 768px) {
  /* desktop screens: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 20.00%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}


/* Specified Table style */
.table_style_01 {
        width: 100%;    
        background-color: black;
        border: 1px solid white;
        border-collapse: collapse;
        text-align: center;
        color: white;
}

/* Code tag; for code block style */
code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 15px;
}


pre code.hljs{display:block;overflow-x:auto;padding:1em;margin:3px}code.hljs{padding:1em;margin:3px}.hljs{color:#c4c6c9;background:#282c34}.hljs-comment,.hljs-quote{color:#4e8b48;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}


  /* Style the footer */
  .footer {
    background-color: #a5a5a5;
    padding: 10px;
    text-align: center;
    position: initial;
    bottom: 0;
    width: 100%;
    color: #494b50;
    font-family: 'Courier New', Courier, monospace;
  }


  #code_book_pop {
    display: none;
    width: 100%;
    padding: 6px 0;
    text-align: left;
    background-color: rgb(194, 204, 207);
    margin-top: 20px;
  }

  .image-container {
    display: flex;
    gap: 10px; /* Adds space between images */
}

.image-container img {
    max-width: 25%; /* Ensures responsiveness */
    height: auto;
}