@media print {
  nav, .navbar, aside, .skip, .carousel, .form-group, .btn {
      display: none;
  }

  video {
      display: none;
  }

  img {
      max-width: 100%;
      height: auto;
  }

  h1, h2, h3, p {
      page-break-inside: avoid; 
      color: blueviolet;
  }

}
  
  table.index {
    width: 45%;
    border-collapse: collapse;
    height: 512px;
    background-color: beige;
  }
  


  table.easy {
    border-collapse: collapse;
    /* padding: 30px; */
  }

  .bg-dark {
    background-color: #000000 !important; /* Black */
}
  
  .easy tr {
    height: fit-content;
  }
  
  td,
  th {
    border: 1px solid black;
  }
  
  p {
    font-family: sans-serif;
    color: black;
    font-size: 1.5em;
  }
  
  p.header {
    font-size: 2em;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  iframe {
    border: none;
  }

  h1 {
    font-size: 5em;
  }
  
  h2 {
    font-size: 4em;
  }
  
  footer {
    text-align: center;
    font-size: large;
    background-color: #ff6a00;
  }
  
  body {
    background-image: url("back.jpg");
    background-size: cover;
    background-attachment: fixed;
    font-size: small;
  }
  
  .easy td {
    width: 50%;
    height: 250px;
    font-size: 1.5em;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  }
  
  .easy video {
    width: 100%;
  }
  
  form {
    width: 20%;
  }
  
  a {
    text-decoration: underline;
    font-size: 2em;
    color: #140003;
  }
  
  a:visited {
    color: purple;
    /* color: #140003; */
  }
  a:hover {
    text-decoration: underline;
    /* font-size: 2em; */
    color: #444444;
  }
  
  .skip {
    position: absolute;
    /* top: -40px; */
    left: -9999px;
    /* background-color: #000; */
    /* color: #fff; */
    /* padding: 10px; */
    /* z-index: 100; */
    text-decoration: none;
  }
  body.normal {
    font-size: 1em;
    line-height: 1.5;
}

body.large {
    font-size: 1.5em;
    line-height: 1.5;
}

  .skip:focus {
    position: inherit;
    top: 2.3em;
    right: 2em;
  }

/* Default for larger screens (Computers) - 2 columns */
@media (min-width: 992px) { /* Bootstrap's 'lg' breakpoint and above */
    .row.g-4 > .col-md-6 { /* Targeting direct children of the row with col-md-6 */
        width: 50%;
        flex: 0 0 auto;
    }
}

/* Tablets - Adjust as needed. Here, we'll keep it 1 column for simplicity,
   but you could make it a narrower 2 columns if desired. */
@media (max-width: 991.98px) and (min-width: 768px) { /* Bootstrap's 'md' breakpoint */
    .row.g-4 > .col-md-6 {
        width: 100%;
        flex: 0 0 auto;
    }
}

/* Smartphones - 1 column */
@media (max-width: 767.98px) { /* Bootstrap's 'sm' breakpoint and below */
    .row.g-4 > .col-md-6 {
        width: 100%;
        flex: 0 0 auto;
    }
}