/*-- scss:defaults --*/

$dark1:#FFA101;
$dark2:#31525B;
$light1: #FAE6B1;
$light2: #B3DEE5;

$navbar-fg: $light2;
$navbar-hl: $dark1;
$navbar-bg: $dark2;
$navbar-brand: $light2;
$navbar-brand-hl: $light2;
$nav-font: "Merriweather", serif;

$footer-bg: $dark2;

$body-bg: $light2;

$hr-color: $dark1;  /* Sets the color (e.g., your $dark1) */
$hr-opacity: 1;      /* Sets opacity to 100% so the color is solid */

$link-color: $dark2;
$link-decoration: none; 
$link-font-weight: 900;
$link-hover-color: $dark1;

/*-- scss:rules --*/
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');

a {
  font-weight: 900 !important;
}

h2 {
  border-bottom: 0px solid $light2 !important; /* Changes color and thickness */
}

h2, .h2 {
  margin-bottom: 0.2rem !important; /* Reduces space below the line */
  padding-bottom: 0 !important;      /* Reduces space between text and the line */
}

hr {
  border: 0;
  border-top: 2px solid $dark2 !important;
  opacity: 1;
}

.navbar {
  font-family: $nav-font;
  text-transform: none;
}

.nav-footer a:hover {
  color: $dark1 !important; /* Your $dark1 orange */
}

canvas.demo {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: auto;
  background-color: $light2;
}


// Borderless table
.borderless table, 
.borderless th, 
.borderless td, 
.borderless tr {
  border: none !important;
}


.borderless td {
  vertical-align: top;
  padding-top: 0.2em !important;
  padding-bottom: 0.2em !important;
  vertical-align: middle !important;
}

.borderless td:first-child {
  width: 1%; 
  padding-right: 10px;
  white-space: nowrap;
  padding-right: 15px; /* Adds space between the columns */
}

.borderless td:last-child {
  vertical-align: top;
}



/* --- My custom button --- */
.btn-sasha {
  display: inline-block;
  padding: 0.6em 1.2em;
  font-weight: 700;
  background-color: transparent;     /* Transparent center */
  color: $dark2 !important;        /* Text color matches border ($dark2) */
  border: 2px solid $dark2;        /* Thick border */
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}
.btn-sasha:hover {
  background-color: $light1;        /* Fills with color */
  color: $dark1 !important;        /* Text turns white */
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.software-entry h2 {
  margin-top: 0.1em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.column-margin a img {
  display: block;
  margin-bottom: 0.4rem;
  max-width: 100%;
  height: auto;
}
/* on narrow screens, show badges inline under description */
@media (max-width: 991.98px) {
 .column-margin a img {
    display: inline-block;
    margin-right: 0.4rem;
  }
}