@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Great+Vibes&family=Lobster&family=Lora:ital,wght@1,500&display=swap');

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;	
	box-sizing: border-box; 
  list-style-type: "🐕‍🦺";
}
body {
  margin: 0;
}

h1 {
  font-size: 7vw;
  font-family: 'Bangers', cursive;
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
}
h1, h2, h3, h4, h5 {
  color: #fff;
  text-shadow: 2px 2px 7px #999, 2px 2px 1px #000;
}
h2, h3, h4, h5 {
  font-family: 'Lobster', cursive;
  font-size: 1.8em;
  color: #fff;
}
h4, h5 {
  font-size: 1.5em;
}
/*
h3 {
  border-bottom: 3px double #7c311e;
  width: 50%;
  margin: 1em;
}
*/
blockquote {
  font-style: italic;
  font-variant-caps: petite-caps;
  margin: 2em; padding: 2em;
  border-width: 1em; 
  border-radius: 5%;
  border-style: double;
  border-color: rgba(124,49,30,0.85);
  border-radius: 15%;
  box-shadow: 5px 10px 8px 10px #888888;
}
/* fonts that I like ;)
font-family: 'Bangers', cursive;
font-family: 'Great Vibes', cursive;
font-family: 'Lobster', cursive;
font-family: 'Lora', serif;
*/

.wrapper {
  min-height: 100vh;
  background: #ccc;
  display: flex;
  flex-direction: column;
}


/* Style the top navigation bar */
#breadcrumb {
  padding: 0; margin: 0;
  height: 50px;
  display: flex;
  justify-content: flex-end;
  background-color: #2d2d2f;
}
/* Style the navigation bar links */
#breadcrumb .list-inline {
  font-size: 2.4vh;
  padding: 0 5px 0 0;
  margin: 0;
}

#breadcrumb .list-inline li {
  font-size: 1.5em;
  font-family: 'Lora', serif;
  display: inline-flex;
  padding: 0;
}
#breadcrumb .list-inline a {
  padding-left: 15px;
  color: white;
  text-decoration: none;
}
#breadcrumb .list-inline a:hover {
  color: #fff;
  background-color: #7c311e;
  text-decoration: overline;
}
#breadcrumb .list-inline a::after {
    content: " > ";
    color: #fff; font-size: .5em; vertical-align: middle; padding: 0 1em;
}
#breadcrumb .list-inline a[title=last]:after {
    content: "";
}

header {
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(124.0, 49.0, 30.0, 1)), url('/images/gsd-sleeping.jpg') top center;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
}
header h1::before {
  content: url('/images/ptdr-logo-200.png');
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-30deg);
}

header, footer {
  text-align: center;
  height: 200px;
  color: #fff;
}
footer {
  font-family: 'Lora', serif;
  display: flex;
  background: #7c311e;
}
footer aside {
  flex: 1;
  background: #7c311e;
}
footer aside h3 {
  margin-bottom: -.25em;
}
footer aside a {
  color: #fff;
}
.dog-trained {
  float: left;
  width: 300px;
  margin-right: 2em;
  margin-bottom: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.9), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.dog-right {
  float: right;
  margin: 0 0 1em 1em;
}

  .main-sidebar {
  font-family: 'Lora', serif;
}
.dog-sidebar {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  background-color: #7c311e;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.9), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border: 1px solid #7c311e;
  border-radius: 4px;
  padding: 2px;
}
.content {
  display: flex;
  flex: 1;
  background: #999;
  color: #000;
  font-size: 1.25em;
}
.columns {
  display: flex;
  flex:1;
}
.main {
  flex: 1;
  order: 2;
  padding: 0 2em;
  background: #eee;
  box-shadow: 5px 10px 28px 10px #8c653a;
}
.sidebar-first {
  width: 20%;
  padding: 0 1em;
  background: #b3aea8;
  order: 1;
}
.sidebar-second { 
  width: 20%;
  order: 3;
  background: #f4e3af;
  box-shadow: 5px 10px 28px 10px #86867a;
}
article h3 {font-size: 1.5em;}
article h4 {font-size: 1.25em;}
article h5 {font-size: 1.24em;}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .columns, footer {
    flex-direction: column;
  }
  .main {
    order: 1;
  }
  .sidebar-first {
    order: 2;
    padding: auto; margin: auto;
    width: 100%;
  }
  .sidebar-second {
    padding: auto; margin: auto;
    width: 100%;
    order: 3;
  }
  h1 {
    padding: 0; margin: 0;
    font-size: 10vw;
  }
  #breadcrumb {
    justify-content: center;
  }
  #breadcrumb .list-inline li {
    font-size: 2vh;
   }
   #breadcrumb .list-inline a::after {
    content: " > ";
    color: #fff; font-size: .5em; vertical-align: middle; padding: 0;
  }
  #breadcrumb .list-inline a[title=last]:after {
    content: "";
  }
  .dog-right {
    margin: 0;
  }
}