/* main.css */

/* These are the colors and fonts used throughout the webpage.
 * I've listed them here so that a user may easily
 * do a search-and-replace for these to change the site theme.
 *   'Roboto',sans-serif; Font for the title text
 *   'Roboto-Slab',serif; Font for the body text 
 *   #fafafa; Background color of the site
 *   #505050; Foreground (text) color of the site
 *   #52739e; Navy, "Template" in the logo, current page in navigation, special titles in the Program
 *   #b2132e; Reddish, "Conference" in the logo, hover color for links
 *   #813c54; Heading color, titles in the Program
 *   #b8860b; Dark Goldenrod, color for links
 */

@import url('https://fonts.googleapis.com/css?family=Roboto%7CRoboto+Slab');

* {
    box-sizing: border-box;
}

body {
    background-color: #fafafa;
    color: #505050;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    line-height: 1.5em;
    margin: 60px auto;
    max-width: 1000px;
}

a {
    color: #b8860b;
    text-decoration: none;
}

a.current {
    color: #52739e;
}

a.current:hover {
    color: #e82945;
}

a:hover {
    color: #b2132e;
}

a:active {
    color: #e82945;
}

h1,
h2,
h3,
h4 {
    clear: left;
    color: #813c54;
    margin: 1.5em 0em 1em 0em;
    font-family: 'Roboto Slab', serif;
    text-shadow: 1px 1px 2px #d0d0d0;
}

h1 {
    font-size: 2.67em;
}

h2 {
    font-size: 2.00em;
}

h3 {
    font-size: 1.67em;
}

h4 {
    font-size: 1.33em;
}

p {
    margin: 1em 0;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    display: inline-block;
    margin-right: 10px;
}

nav.navigation ul {
    text-align: center;
}

nav.navigation a {
    display: block;
    padding: 10px;
}

nav.navigation a:hover {
    background-color: #b2132e;
    color: #fff;
}

nav.navigation .current {
    background-color: #52739e;
    color: #fff;
}

.banner {
    position: relative;
    font-family: 'Roboto Slab', serif;
}

.top-left {
    font-size: 5.33em;
    color: #505050;
    background: #fafafa;
    text-align: center;
    width: 1000px;
    height: 67px;
    position: absolute;
    padding: 36px 0 0 0;
    top: 0px;
}

.bottom-right {
    font-size: 2.33em;
    color: #fafafa;
    line-height: 1.5em;
    width: auto;
    height: 100px;
    padding: 0px 27px 27px 0px;
    text-align: right;
    position: absolute;
    bottom: 0px;
    right: 0px;
    text-shadow: 0px 0px 6px #000000;
}

.title1 {
    color: #b2132e;
    text-shadow: 1px 1px 3px #c0c0c0;
}

.title2 {
    color: #52739e;
    text-shadow: 1px 1px 3px #c0c0c0;
}

.year {
    color: #505050;
    font-size: 0.67em;
    font-weight: lighter;
}

.sponsors {
    text-align: center;
}

.sponsors a {
    margin: 0 10px;
}

footer {
    font-size: 0.875em;
    margin-top: 2em;
    text-align: center;
}

/* Responsive Styles */

@media only screen and (max-width: 768px) {
    nav.navigation ul {
        flex-direction: column;
    }

    li {
        display: block;
        margin: 0;
    }

    nav.navigation a {
        padding: 10px 0;
    }
}

/* main.css */

/* Banner Styles */
.banner {
    position: relative;
    height: 300px; /* Adjust as needed */
    overflow: hidden;
}

.banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    z-index: 1;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
}

.banner-content .top-left {
    font-size: 2.5em;
    font-weight: bold;
}

.banner-content .title1 {
    color: #b2132e;
}

.banner-content .title2 {
    color: #52739e;
}

.banner-content .year {
    color: #fff;
}

.banner-content .bottom-right {
    font-size: 1.5em;
    margin-top: 10px;
}

/* Responsive Banner Styles */
@media only screen and (max-width: 768px) {
    .banner {
        height: 200px;
    }

    .banner-content .top-left {
        font-size: 1.8em;
    }

    .banner-content .year {
        font-size: 0.8em;
    }

    .banner-content .bottom-right {
        font-size: 1em;
    }
}

/* main.css */

/* Program Styles */
.program {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.program h2 {
    margin-bottom: 20px;
}

.program h3 {
    margin-top: 40px;
    margin-bottom: 10px;
}

.program .event {
    margin-bottom: 20px;
}

.program .event-group {
    margin-bottom: 40px;
}

.program .event p.time {
    font-weight: bold;
    margin: 0;
}

.program .event p.title {
    margin: 5px 0;
}

/* Responsive Program Styles */
@media only screen and (max-width: 768px) {
    .program {
        padding: 10px;
    }

    .program h3 {
        margin-top: 30px;
    }

    .program .event p.time {
        font-size: 0.9em;
    }

    .program .event p.title {
        font-size: 0.9em;
    }
}

/* assets/main.css */

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

.day {
  background-color: #cde5fd;
}

.subheading {
  font-style: italic;
}

.lunch {
  background-color: #ffffcc;
}