/* Author: Jan Durdik / durdik.ch ----------------------- */
.button {
  border:1px solid grey;
  background-color: forestgreen;
  color:white;
  display:inline;
  /* box-shadow: 10px 5px 5px 1px grey; s. dj.css */
  box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
              inset -2px -2px 3px rgba(0, 0, 0, .6);
  border-radius: 5px;
  cursor:pointer;
}
.button:active {
  background-color: lawngreen;
  color:forestgreen;
  box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
              inset 2px 2px 3px rgba(0, 0, 0, .6);
}
blink {
  animation: 4s linear infinite condemned_blink_effect;
}
@keyframes condemned_blink_effect {
  0% {
    visibility: visible;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: hidden;
  }
}

.progressBar {
  animation: progressBarKeyframes cubic-bezier(.5, -1, .5, 2)
    11s infinite alternate;

  position: relative;
  border: 2px solid White;
  width: 10px;
  height: 20px;
  background: Blue;
  cursor: pointer;
}

/* The transform property is a great choice, because: */
  /* . CSS transforms affect the target element box as a */
     /* whole (rotate, flip, stretch, shift it). */
  /* . CSS transforms never affect neighbour elements. */
/* Paring transform with opacity can usually solve most */
/* of our needs, providing fluid, good-looking animations. */
@keyframes progressBarKeyframes {
  from { width: 50px; height: 10px; background-color: Salmon;
    left: 15%;
    transform: rotate3d(1, 2.0, 3.0, 0deg); }
  to { width: 75px; height: 20px; background-color: DarkOrchid;
    left: calc(85% - 75px);
    transform: rotate3d(1, 2.0, 3.0, 360deg); }
}

del {
  text-decoration: line-through;
  background-color: #fbb;
  color: #555;
}

ins {
  text-decoration: none;
  background-color: #d4fcbc;//;
}

  /*blockquote { // TODO why selector necessary and declarations ignored?
  //margin: 0px;
  //padding: 0px;
  //width:100%;
    }*/
blockquote p {
  padding: 10px;
  background: whitesmoke; // #eee is unnamed and somewhat lighter
  border: 5px dotted whitesmoke;
  border-radius: 5px;
  box-shadow: 10px 5px 5px grey;
}
blockquote p::before {
  content: '«';
}
blockquote p::after {
  content: '»';
}

.striped {
  display: block;
  color:snow;
  border-radius: 5px;
  /* box-shadow: 10px 5px 5px grey; s. dj.css */
  padding:5px 0 5px 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.1) 10px,
    rgba(0, 0, 0, 0.2) 10px,
    rgba(0, 0, 0, 0.2) 20px
  );
  url();//https://css-tricks.com/stripes-css/
  background-size: 25px 25px;
 }

@font-face {
  font-family: "Bitstream Vera Serif Bold";
  src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
}
.dedicatedFont {
  font-family: "Bitstream Vera Serif Bold", serif;
  //font-weight:100;//no impact;
  //color:DarkSlateGray;
}

:target {
  color: red;
}

h3 + h3:first-letter,
.first-word-uppercase-p::first-letter {
  //padding-left: 7px;
  font-size: 25px;
  //color: #e80222;
  //font-weight: bold;
  font-family: "Bitstream Vera Serif Bold", serif;
  line-height: .75;
}
h3 + p:first-letter,
.first-word-uppercase-p::first-letter {
  font-size: 40px;
  //color: #e80222;
  //font-weight: bold;
  font-family: "Bitstream Vera Serif Bold", serif;
  line-height: .75;
}
/*h3 ~ p {
  color: red;
}*/
h3 + p {
  margin-top: -10px;
  //color: red;
}

/*2nd selector is for manual setting... courtesy of https://stackoverflow.com/questions/63194536/how-to-make-first-letter-of-paragraph-bigger-without-stretching-the-content
*/

.MediumVioletRed {
  color: MediumVioletRed;
  font-weight: bold;
}