/* 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: #E8C074;
  color: black;
  font-family: Georgia;
}

/* Borderbox being separate from body is what's keeping the header capable of overlapping the border
around the page. If I find a cleaner way to do this it may become obsolete and get absorbed back into
the "body" formatting. */

.borderbox {
  margin: 40px;
  border-style: groove;
  border-width: 15px;
  border-color: #DB9B24;
  padding: 40px;
}
  
h1 {
  background-color: #EFD19A;
  border-style: double;
  border-width: 15px;
  border-color: #B47F1D;
  padding: 15px;
  text-align: center;
}

h2 {
  width: 500px;
  background-color: #F5E3C2;
  margin: auto;
  border-style: double;
  border-width: 10px;
  border-color: #B47F1D;
  padding: 10px;
  text-align: center;
}

article h3 {
  display: inline-block;
  border-style: double;
  border-width: 0;
  border-bottom-width: 5px;
  border-color: #B47F1D;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  background-color: #F5E3C2;
  border-style: double;
  border-width: 0px;
  border-bottom-width: 10px;
  border-color: #B47F1D;
  padding-bottom: 10px;
}

header a, header a:link, header a:visited {
  color: black;
  text-decoration: none;
  background-color: white;
  margin-left: 2px;
  margin-right: 2px;
  border-style: inset;
  border-color: #DB9B24;
  border-width: 3px;
  border-radius: 5px;
  padding: 3px;
  transition-property: color;
  transition-duration: 1s;
}

header a:hover {
  color: #DB9B24;
}

footer {
  text-align: center;
  border-style: double;
  border-width: 15px;
  border-right-width: 0px;
  border-left-width: 0px;
  border-color: #B47F1D;
  padding: 15px;
  clear: both;
}

dt {
  font-weight: bold;
}

.sidebar {
  background-color: #F5E3C2;
  color: #654710;
  border-style: inset;
  border-width: 10px;
  border-color: #DB9B24;
  padding: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  width: 300px;
  margin: 0 0 10px auto;
  float: right;
  box-shadow: 5px 5px 3px 0px #6E3808;
}

.sidebar h3 {
  display: inline-block;
  border-style: double;
  border-width: 0;
  border-bottom-width: 5px;
  border-color: #B47F1D;
}

/* Everything below this line is currently for testing purposes only. */

.funbox {
  transition-property: color, background-color;
  transition-duration: 1s;
  background-color: #D991CC;
  color: #571E4D;
  border-style: inset;
  border-width: 10px;
  border-color: #BE41A7;
  border-radius: 5px;
  padding: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  width: 400px;
  margin: 0 auto;
}

.funbox h3 {
  color: white;
}

.funbox:hover {
  color: #FF6A00;
  background-color:#FFBB8A;
}

blockquote:before {
  content: "Quote:";
}

.floatybox {
  background: white url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSP_iJg049g6RN7Lu98JBeH33Xkw5bDIm-DQg&s) no-repeat center;
  background-size: 230px auto;
  color: #DB9B24;
  margin-right: 20px;
  margin-bottom: 20px;
  border-style: inset;
  border-width: 10px;
  border-color: #DB9B24;
  padding: 15px;
  text-align: center;
  width: 200px;
  float: left;
  box-shadow: 5px 5px 3px 0px #6E3808;
}