/* css styles */

body {
  /*direction: rtl;
  text-align: right;*/
  font-family: 'Alef', sans-serif;
  font-size: 18px;
  /*font-family: 'Press Start 2P', cursive;
  background-image: url('images/home_page.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(0, 0, 0, 0.7);
  background-color: black;
  color: #00FF00; */
}

Headings 
h1, h2, h3, h4, h5, h6 {
  color: black;
}

/* Headings and other elements */
h1 {
  font-size: 2.2em; /* Larger for main headings */
}

h2 {
  font-size: 1.8em; /* Medium for sub-headings */
}

h3 {
  font-size: 1.5em; /* Slightly smaller */
}

p {
  font-size: 1.1em; /* Slightly larger for regular paragraph text */
}

footer {
  font-size: 0.8em; /* Smaller font size for footer */
}

@media (max-width: 768px) {
  body {
    font-size: 14px;  /* Smaller font size for mobile screens */
  }

  h1 {
    font-size: 1.8em;  /* Adjust heading size on smaller screens */
  }

  h2 {
    font-size: 1.5em;
  }
}

/*
  Table styles copied from Bootstrap
  Copyright (c) 2018 Twitter, Inc
*/

table {
  background-color: $table-bg;

  // Table cell sizing
  //
  // Reset default table behavior

  col[class*="col-"] {
    position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
    display: table-column;
    float: none;
  }

  td,
  th {
    &[class*="col-"] {
      position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
      display: table-cell;
      float: none;
    }
  }
}

caption {
  padding-top: $table-cell-padding;
  padding-bottom: $table-cell-padding;
  color: $light-gray;
  text-align: left;
}

th {
  text-align: left;
}


// Baseline styles

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: $line-height-computed;
  border-collapse: collapse;
  // Cells
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        padding: $table-cell-padding;
        line-height: $line-height;
        vertical-align: top;
        border-top: 1px solid $table-border-color;
      }
    }
  }
  // Bottom align for column headings
  > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid $table-border-color;
  }
  // Remove top border from thead by default
  > caption + thead,
  > colgroup + thead,
  > thead:first-child {
    > tr:first-child {
      > th,
      > td {
        border-top: 0;
      }
    }
  }
  // Account for multiple tbody instances
  > tbody + tbody {
    border-top: 2px solid $table-border-color;
  }

  // Nesting
  .table {
    background-color: $background-color;
  }
}


// Condensed table w/ half padding

.table-condensed {
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        padding: $table-condensed-cell-padding;
      }
    }
  }
}


// Bordered version
// Add borders all around the table and between all the columns.

.table-bordered {
  border: 1px solid $table-border-color;
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        border: 1px solid $table-border-color;
      }
    }
  }
  > thead > tr {
    > th,
    > td {
      border-bottom-width: 2px;
    }
  }
}


// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)

.table-striped {
  > tbody > tr:nth-of-type(odd) {
    background-color: $table-bg-accent;
  }
}


// Hover effect
//
// Placed here since it has to come after the potential zebra striping

.table-hover {
  > tbody > tr:hover {
    background-color: $table-bg-hover;
  }
}


// Table backgrounds
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.

@mixin table-row-variant($state, $background) {
  // Exact selectors below required to override `.table-striped` and prevent
  // inheritance to nested tables.
  .table > thead > tr,
  .table > tbody > tr,
  .table > tfoot > tr {
    > td.#{$state},
    > th.#{$state},
    &.#{$state} > td,
    &.#{$state} > th {
      background-color: $background;
    }
  }

  // Hover states for `.table-hover`
  // Note: this is not available for cells or rows within `thead` or `tfoot`.
  .table-hover > tbody > tr {
    > td.#{$state}:hover,
    > th.#{$state}:hover,
    &.#{$state}:hover > td,
    &:hover > .#{$state},
    &.#{$state}:hover > th {
      background-color: darken($background, 5%);
    }
  }
}


// Generate the contextual variants
@include table-row-variant('active', $table-bg-active);
@include table-row-variant('success', $state-success-bg);
@include table-row-variant('info', $state-info-bg);
@include table-row-variant('warning', $state-warning-bg);
@include table-row-variant('danger', $state-danger-bg);


// Responsive tables
//
// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
// by enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally.

.table-responsive {
  min-height: .01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
  overflow-x: auto;

  @media screen and (max-width: $screen-xs-max) {
    width: 100%;
    margin-bottom: ($line-height-computed * .75);
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid $table-border-color;

    // Tighten up spacing
    > .table {
      margin-bottom: 0;

      // Ensure the content doesn't wrap
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th,
          > td {
            white-space: nowrap;
          }
        }
      }
    }

    // Special overrides for the bordered tables
    > .table-bordered {
      border: 0;

      // Nuke the appropriate borders so that the parent can handle them
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th:first-child,
          > td:first-child {
            border-left: 0;
          }
          > th:last-child,
          > td:last-child {
            border-right: 0;
          }
        }
      }

      // Only nuke the last row's bottom-border in `tbody` and `tfoot` since
      // chances are there will be only one `tr` in a `thead` and that would
      // remove the border altogether.
      > tbody,
      > tfoot {
        > tr:last-child {
          > th,
          > td {
            border-bottom: 0;
          }
        }
      }

    }
  }
}

/*.homepage body {
  background-image: url('images/home_page.png') !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: rgba(0, 0, 0, 0.7) !important; /* Semi-transparent background color */
}

/* Links 
a {
  color: #FF00FF;
}

/* Fallback for browsers that support target-new */
/*a:not([href^="#"]) {
  target-new: tab;      
}

/* Optional: Add an external link icon or indicator */
/*a:not([href^="#"])::after {
  content: ' ↗'; 
}

/* Sidebar 
.sidebar {
  background-color: #111;
  border: 4px solid #FF00FF;
  padding: 10px;
  color: #00FF00;
  box-shadow: 0 0 10px #00FFFF;
}

/* Content
.content {
  border: 4px solid #FF00FF;
  padding: 10px;
  box-shadow: 0 0 10px #00FFFF;
}

/* Buttons
button, .btn {
  background-color: #FF4500;
  color: #FFFFFF;
  border: 2px solid #00FFFF;
  padding: 10px 20px;
  text-transform: uppercase;
  font-family: 'Press Start 2P', cursive;
}

button:hover, .btn:hover {
  background-color: #00FF00;
  border-color: #FF00FF;
}

/* Blinking Text
.blinking-text {
  color: #FFFF00;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* Images
img {
  image-rendering: pixelated;
  border: 2px solid #FF00FF;
}