/* main.css */

html,
body {
  background-color: lightblue;
}
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Literata/static/Literata-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Literata";
  font-style: bold;
  font-weight: 400;
  src: url("../fonts/Literata/static/Literata-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Literata";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/Literata/static/Literata-Italic.ttf") format("truetype");
}

/****** header ******/
header {
  background-image: url("../images/bg_homepage.jpg");
  background-color: #fcfcdc;
  text-align: center;
  padding: 20px 0;
  font-family: "Literata", serif;
  color: white;
}

header hr {
  width: 30%;
}

/****** main content ******/
img{
  margin: 10px;
}

main {
  text-align: center;
}

ul {
  background-color: white;
  border: 8px double black;
  border-radius: 4px;
  margin: 0 auto;
  padding: 20px;
  text-align: left;
  width: 200px;
}

ul li {
  margin: 5px;
}

a:link { color: #3366BB; }
a:visited { color: #663366 }
a:visited:hover { color: #0b0080; }
a:hover { color: gray; }
a:active { background-color: yellow; border: 4px solid red;}


/****** footer ******/
footer {
  font-size: small;
  text-align: center;
}