/* This file based on 'Tranquille' by Dave Shea */
/* You may use this file as a foundation for any new work, but you may find it easier to start from scratch. */
/* Not all elements are defined in this file, so you'll most likely want to refer to the xhtml as well. */

/* Your images should be linked as if the CSS file sits in the same folder as the images. ie. no paths. */


body{
    background-color: #8fb84e;
}

.main{
    background-image: url('https://fastly.picsum.photos/id/127/4032/2272.jpg?hmac=QFoFT2_eb_DCqjdlj09UFgUHwI_zefDTBdECRz9lO5Q');
}

.intro{
    background-image: url('https://fastly.picsum.photos/id/82/1500/997.jpg?hmac=VcdCqu9YiLpbCtr8YowUCSUD3-245TGekiXmtiMXotw');
    background-size: cover;
}

.header{
    color: white;   
    text-align: center;
}

.summary{
    color: white;   
    text-align: center;
}

.summary a{
    text-decoration: none;
    color: #0d5bcf
}

.summary a:hover{
    text-decoration: underline;
    color: #4888e9
}

.preamble{
    color: white;
    text-align: center;
}

.preamble h3{
    font-family: sans-serif;
}

.supporting{
    color: white;
    text-align: center;
}

.supporting h3{
    font-family: sans-serif;
}

.supporting a{
    text-decoration: none;
    color: #0d5bcf
}

.supporting a:hover{
    text-decoration: underline;
    color: #4888e9
}

.sidebar {
  width: 250px; 
  font-family: Arial, sans-serif; 
  border: 1px solid #ccc;
  border-radius: 5px;
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  overflow-y: auto;
}


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


.sidebar ul li a {
  display: block;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out; 
}

.sidebar ul li:not(:last-child) a {
    border-bottom: 1px solid #eee;
}

.sidebar ul li a:hover {
  background-color: #007bff; 
  color: white;              
}


.sidebar h3 {
    background-color: #f7f7f7;
    padding: 12px 15px;
    margin: 0;
    font-size: 1em;
    border-bottom: 1px solid #ccc;
}