@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic);

/* Fix for adjusting for AsciiDoc adding a paragraph inside each list element */
li>p {
  margin-top: 0;
  margin-bottom: 0;
}

html {
}
body {
  /* font-family: "Open-sans" ; */
  font-family: Montserrat;
  /* margin-top: 1em; */
  /* margin-left: 1em; */
  /* background: #110000 ; */
  /* color: #ccc ; */
  /* background: #FFFFFF ; */
  /* background: #85C4B5 ; */
  /* background-image: linear-gradient(to bottom, #4A2545, white); */
  /* background-image: linear-gradient(to bottom, #4A2545, #4A2545); */
  background-repeat: no-repeat;
  background-color: #4a2545;
  color: white;
}

a {
  color: white;
}

.social_media_image {
  box-shadow: none;
  height: 1.5em;
}

.logo {
  float: left;
  height: 2.6em;
  margin-right: 0.7em;
  border-radius: 2px;
  /* box-shadow: 5px 5px 2px #aaaaaa; */
  /* box-shadow: 1px 1px 1px #aaaaaa; */
  box-shadow: 0px 0px 0px #aaaaaa;
}

.logo-text {
  float: left;
}

#site_title {
  display: none;
  font-size: 120%;
  font-family: Montserrat;
  font-weight: bold;
  color: #d3b11b;
  text-align: left;
  float: left;
  margin-right: 1em;
}

img {
  /* border-radius: 25px; */
  /* box-shadow: 10px 10px 5px #aaaaaa; */
  box-shadow:
    0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
  max-width: 100%;
}

h1,
h2,
h3,
.card-title {
  font-family: "Montserrat", sans-serif;
  color:#d3b11b;
}

h1 {
  font-size: 200%;
}

h2 {
  text-transform: uppercase;
  font-size: 125%;
}

h2,
h3,
h4 {
  padding-top: 1em;
  margin: 0 0 0 0;
}

main {
  clear: left;
  max-width: 800px;
  margin: auto;
}

header h1 {
  text-align: center;
}

footer {
  padding-top: 3em;
  text-align: center;
  clear: both;
}

/* Added 2023-06-13 */
/* Trying to style the recipes, but also other places with same elements */

ul {
  /* color: green */
  list-style-type: square;
}

blockquote {
}

/* For TAGLIST.HTML */
.taglist {
  text-align: center;
  clear: both;
}

/* For NEXTPREV.HTML */
#nextprev {
  /* The container for both the previous and next articles. */
}
#prevart {
  float: left;
  text-align: left;
}
#nextart {
  float: right;
  text-align: right;
}
#nextart,
#prevart {
  max-width: 33%;
}

.menuactive {
  /* background-color: #ffcc00; */
}

.menuactive .menuname {
  /* color: black; */
  text-decoration: underline;
}

.topnav {
  overflow: hidden;
  font-weight: 500;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

.topnav a {
  float: right;
  margin-top: 6px;
  display: block;
  color: #d3b11b;
  text-align: center;
  padding: 0 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  /* background-color: #ffcc00; */
}

.topnav a.active {
  color: white;
  text-decoration: underline;
  text-decoration: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
.youtube_title {
  font-size: 100%;
  font-weight: bold;
  padding-bottom: 40px;
  text-align: center;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  color: #d3b11b;
}

.youtube_video iframe {
  margin: 10px 10px 10px 10px;
  box-shadow:
    0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
  width: 100%;
  height: 400px;
}

/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/montserrat-v25-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

.bio-img {
  text-align: center;
  float: left;
  width: 320px;
}

/* Select the last bio image */
.bio-img + .bio-img {
  float: right;
}

@media screen and (max-width: 800px) {
  .bio-img,
  .bio-img + .bio-img {
    display: block;
    float: none;
  }
}

#artlist li {
  list-style-type: none;
}

#artlist {
  padding: 0 0 0 0;
}

input#search {
  all: unset;
  color: #222;
  background: #fff;
  padding: 0.7rem 1rem;
  border-radius: 5px;
  width: 100%;
}

.older-article {
  display: none;
}

.hidden {
  display: none !important ;
}

.search {
  width: 400px;
  max-width: 85vw;
  position: relative;
  margin: 0.5rem auto 1.2rem;
  display: flex;
}

button#clear-search {
  all: unset;
  position: absolute;
  right: 4px;
  top: 5px;
  height: 30px;
  width: 30px;
  color: #888;
  cursor: pointer;
  transition: color 180ms ease-in-out;
}
button#clear-search:hover {
  color: #eee;
}

figcaption ol {
  margin: 0 0 0 0;
  padding-bottom: 15px;
}

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.card {
}

.card-title {
  font-weight: bold;
  font-size: 14pt;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  color: black;
}

.grid-links {
  text-decoration: none;
  color: green;
}

.featured-img {
  width: 100%;
}

blockquote p {
  margin-top: 4px;
  margin-bottom: 4px;
}

blockquote {
  font-size: 1em;
  width: 80%;
  margin: 20px auto;
  font-family: Open Sans;
  font-style: italic;
  color: #555555;
  /* padding: 0.3em 30px 0.3em 75px; */
  padding: 0.3em 10px 0.3em 10px;
  /* border-left:8px solid #85C4B5; */
  /* border-left: 2px solid #85c4b5; */
  border-left: 2px solid #FFFFFF;
  line-height: 1;
  position: relative;
  /* background:#EDEDED; */
}

/* blockquote::before{ */
/*   font-family:Arial; */
/*   content: "\201C"; */
/*   color:#78C0A8; */
/*   font-size:3em; */
/*   position: absolute; */
/*   left: 10px; */
/*   top:-10px; */
/* } */

/* blockquote::after{ */
/*   content: ''; */
/* } */

blockquote {
    color: white;
}

blockquote span {
  display: block;
  color: #333333;
  font-style: normal;
  font-weight: bold;
  margin-top: 1em;
}
