:root {
  --bs-primary: #00275b; /* Primary colour */
  --bs-primary-rgb: 0, 39, 91; 
  --secondary-color: #ff8c00;
  --secondary-color-rgb: 255, 140, 0;
  --text-light: #f8f9fa; /* Same color as .text-light */
}

.text-secondary-color {
  color: var(--secondary-color);
}

/* btn-outline colour still needs to be set explicitly. */
.btn-outline-secondary {
  --bs-btn-color: var(--secondary-color);
  --bs-btn-border-color: var(--secondary-color);
  --bs-btn-hover-bg: var(--secondary-color);
  --bs-btn-hover-border-color: var(--secondary-color);
  --bs-btn-active-bg: var(--secondary-color);
  --bs-btn-active-border-color: var(--secondary-color);
  font-size: clamp(0.75rem, 2vw, 1rem);
}

@media (min-width: 925px) {
  .navbar-expand-custom {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .navbar-custom-none {
    display: none !important;
  }

  .d-custom-none {
    display: none !important;
  }

  .d-custom-flex {
    display: flex !important;
  }

  #main-content {
    margin-left: 260px;
  }
}

@media (max-width: 925px) {
  #main-content {
    margin-top: 50px;
  }
}

.sidebar {
  flex-direction: column;
  position: fixed;
  width: 260px;
  height: 100vh;
  color: var(--text-light);
  padding: 20px;
}

.sidebar hr {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: var(--bs-nav-link-padding-x);
  margin-right: var(--bs-nav-link-padding-x);
}

.sidebar .nav-link, .navbar .nav-link {
  color: var(--text-light);
}

.sidebar .nav-link:hover, .navbar .nav-link:hover {
  color: var(--secondary-color);
}

.flag-font-size {
  font-size: 65px
}

.icon-font-size {
  font-size: 12px;
}

@media (min-width: 400px) {
  .publications_and_awards_list hr {
    width: 250px;
  }
}

@media (max-width: 400px) {
  .publications_and_awards_list hr {
    width: 50%;
  }
}

.publications_and_awards_list li {
  font-size: 17px;
}

.publications_and_awards_list li::marker {
  color: var(--secondary-color);
}

.publications_and_awards_list span {
  font-size: 14px;
}

.article {
  max-width: 650px;
}

@media (max-width: 576px) {
  .article {
    font-size: 17px;
  }
} 

@media (min-width: 576px) {
  .article {
    font-size: 19px;
  }
}

@media (min-width: 768px) {
  .article {
    font-size: 20px;
  }
}

#project-header-image {
  max-width: 100%; 
}

.project-link h3 {
  transition: color 0.2s ease-in-out;
}

.project-link:hover h3 {
  color: var(--secondary-color);
}

a.unstyled {
  all: unset;
  display: inline-block;
}

.project-link {
  position: relative;
  display: inline-block;
  cursor: pointer;`
}

.bg-light-grey {
  background-color: #b0b0b0;
}

.bg-very-light-grey {
  background-color: #dcdcdc;
}

.underline {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--secondary-color);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.project-link:hover .underline {
  opacity: 1;
}

/* Gives the colour normally given to anchors/links */
.link-text-color {
  color: #0d6efd;
}