:root {
    --custom-primary-text: #33302D;
    --custom-primary: #F2911B;
    --custom-primary-rgb: 242, 145, 27;
    --custom-primary-dark: #543209;
    --custom-primary-dark-rgb: 84,50,9;
    --custom-secondary: #1BAAF2;
    --custom-secondary-rgb: 27, 170, 242;
    --custom-secondary-dark: #46819D;
    --custom-tertiary: #F2521B;
}

body {
    font-family: 'Exo 2', sans-serif;
    padding-top: 50px;
    position: relative;
    color: var(--custom-primary-text);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--custom-primary);
}

/* Fixes issues with smooth scrolling and fixed navbar*/
html {
    scroll-padding-top: 50px;
}

strong {
    font-weight: bold;
}

a, a:focus, a:active {
    color: var(--custom-secondary-dark);
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

a:hover {
    color: var(--custom-primary);
}

.masthead {
    height: 100vh;
    min-height: 500px;
    background-image: url('../img/Bike-city-small.jpg');
    background-size: cover;
    /*background-position: center; */
    background-position: 45% 0;
    background-repeat: no-repeat;
}

.masthead-text {
    color: white;
    background-color: rgba(var(--custom-primary-rgb), 0.70);
    line-height: 1.8em;
    padding: 0.1em;
}

/* Navbar setup */

.navbar-custom {
    background-color: var(--custom-primary);
}

.navbar-brand {
    color: white;
    font-weight: normal;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.dropdown-menu {
    background-color: var(--custom-primary);
}

.dropdown-item {
    color: white;
}

.nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: white;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .nav-link {
        transition: none;
    }
}

.nav-link:hover, .navbar-brand:hover {
    color: var(--custom-primary-text);
}

.nav-link.active {
    color: var(--custom-primary-text);
}

.nav-link.disabled {
    color: white;
    pointer-events: none;
    cursor: default;
}

.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
    border-color: rgb(255,255,255);
}

/* Padding of section */

section.anchor {
    padding-top: 2em;
}

/* A box with a background color spanning 100%*/

div.custom-box {
    background-color: rgba(var(--custom-primary-rgb),0.05); /* #87ACB9 */
    padding:10px;
    margin: 10px 0;
    width: 100%;
}

/* Buttons */

.btn-accent,
.btn-accent:active,
.btn-accent:visited,
.btn-accent:focus {
    background-color: var(--custom-primary);
    border-color: none;
    color: #FFFFFF;
}

.btn-accent:hover {
    background-color: var(--custom-primary-dark);
}


.btn-accent-top,
.btn-accent-top:active,
.btn-accent-top:visited,
.btn-accent-top:focus {
    background-color: rgba(var(--custom-primary-rgb), 0.70);;
    border-color: none;
    color: #FFFFFF;
}

.btn-accent-top:hover {
    background-color: rgba(var(--custom-primary-dark-rgb), 0.70);
}

/* For lecture section */
.lectures h5 {
    color: var(--custom-primary);
    padding-top: .5em;
}

.lectures h6 {
    color: var(--custom-primary-text);
    padding-bottom: 1em;
}

.lectures img {
    border-radius: 50%;
    border: 1px solid var(--custom-primary-text);
    height: 9em;
    width: 9em;
    object-fit: cover;
}

.lectures a, .lectures a:focus, .lectures a:active {
    color: inherit;
    text-decoration: inherit;
}

.lectures a:hover {
    color: var(--custom-primary);
}

/* For the program section */
#program thead th {
    width: 20%;
}

#program thead {
    background-color: var(--custom-primary);
    color: white;
}

/*#program tr:nth-child(even){
    background-color: #dcdcdc;
}*/

#program td.highlight1 {
    background-color: rgba(var(--custom-secondary-rgb),0.3);
}

#program td.highlight2 {
    background-color: rgba(var(--custom-secondary-rgb),0.1);
}


#program td div:first-child {
    font-weight: bold;
}

#program td div:nth-child(2) {
    font-style: italic;
}

#program td {
    color: var(--custom-primary-text)
}