/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #191e39;
  background-image: url("data:image/svg+xml,%3Csvg width='84' height='16' viewBox='0 0 84 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M78 7V4h-2v3h-3v2h3v3h2V9h3V7h-3zM30 7V4h-2v3h-3v2h3v3h2V9h3V7h-3zM10 0h2v16h-2V0zm6 0h4v16h-4V0zM2 0h4v16H2V0zm50 0h2v16h-2V0zM38 0h2v16h-2V0zm28 0h2v16h-2V0zm-8 0h6v16h-6V0zM42 0h6v16h-6V0z' fill='%23bc78ff' fill-opacity='0.24' fill-rule='evenodd'/%3E%3C/svg%3E");
  color: white;
  font-family: 'Georgia', serif;
}

#title {
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
    height: auto;
    background-color: Ivory;
    border: 1px solid;
    border-color:darkgrey;
    padding: 10px 20px 20px 20px;
    color: black;
    text-align: center;
    font-size: 35px;
    margin-bottom: 20px;
}

#main {
    background-color:whitesmoke;
    border: 1px solid;
    border-color:darkgrey;
    color:#333333;
    padding: 0px 20px 20px 20px;
    width: 60%;
    height:auto;
    margin-left: 20%;
    margin-right: 20%;
}

#leftbar {
   position:absolute;
   top:230px; /* Adjust as needed w/ the title*/
   left: 2.5%;
   padding:10px;
   margin:10px;
   border:1px dashed #BBBBBB;
   width: 15%;
   background-color:whitesmoke;
   text-align: center;
   color:#333333;
}

.honk {
  font-family: "Honk", system-ui;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  font-variation-settings:
    "MORF" 15,
    "SHLN" 50;
}

.center-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  /* Optional: Set a width smaller than the container to allow margins to work */
  width: auto;
}

ul {
  list-style-image:url('listarrow.gif')
}

 a:link {
    color: Indigo;
    font-weight:bold;
    text-decoration: none;
}

a:visited {
  color: red;
  font-weight:bold;
  text-decoration: none;
}

a:hover, a:active {
  color: purple;
  font-weight:bold;
  text-decoration: underline;
  background:#EEEEFF;
}

a:active {
  color: blue;
  text-decoration: underline;
}

a:link img, a:visited img {
   border:0;
}