/*links and text*/
/*==============*/
  /*Fonts*/
    @font-face {
      font-family: "Patrick Hand";
      src: url("/images/PatrickHand-Regular.tff") format("truetype");
    }
    @font-face {
      font-family: "Purple Purse";
      src: url("/images/PurplePurse-Regular.tff") format("truetype");
    }
  /*Text stuffs*/
  p {
    color: #2B0D06;
  }
  h1, h2, h3, h4, h5 {
    font-family: "Patrick Hand";
    color: #E3553F;
  }
  
  /*Links states*/
    a { color: #E3553F; }
    a:visited { text-decoration: none; color: #E3553F; }
    a:hover { text-decoration: none; color: #6AB4A3; }
    a:focus { text-decoration: none; color: #6AB4A3; }
    a:hover, a:active { text-decoration: none; color: #6AB4A3; }

/*Main site containter*/
  div.container {
  border-style: solid;
  border-color: #E3553F;
  border-width: 10px;
  margin: 95px;
  margin-right: 300px;
  margin-left: 300px;
  height: auto;
  min-height: 400px;
  min-width: 480px;
  background-color: #FAECB6;
  }
  
/*header*/
  div.header {
  height: 225px;
  width: auto;
  background-color: #6AB4A3;
  }
  
/*background*/
  body {
    margin: 0;
    padding: 0;
    background-image: url(/images/bg2.jpg);
    background-size:75px;
    background-repeat: repeat;
    font-family: "Patrick Hand", "Purple Purse", cursive, serif, sans-serif;
    height: auto;
  }

/*nav bar*/
.sidebar {
  display: flex;
  flex: 1;
  margin: 0;
  padding: 0;
  width: 250px;
  background-color: #3A406A;
  position: absolute;
  height: auto;
}
.sidebar a {
  color: #FCAC22;
  text-decoration: none;
}
.sidebar li {
  margin: 15px;
  margin-left: 0;
}
.sidebar a.active {
  color: #FCAC22;
}

/*mouse-over*/
.sidebar a:hover:not(.active) {
  color: #E3553F
}

/*navlist for links*/
.navlist{
  list-style: none;
}
.navlist a {
font-family: "Patrick Hand";
font-weight: bold;
font-size: 25px;
}

/*page content*/
div.content {
  margin-left: 250px;
  padding:16px;
  height: auto;
}

/*move nav bar to top on smaller screen*/
@media screen and (max-width: 900px) {
  .sidebar {
    width: auto;
    height: auto;
    min-height:0;
    padding: 10px;
    position: relative;
  }
  .sidebar a {float: left;}
  .sidebar li {margin: 20px;}
  div.content {margin-left: 0;}
  div.container {margin-left: 10%; margin-right: 10%;}
}