@import url('https://fonts.googleapis.com/css2?family=Baumans&family=Henny+Penny&family=Rock+3D&display=swap');
.blog-content p, .blog-title {
  animation-play-state:paused;
}

.blog-container {
  background-image: url('/img/Rough-Rock_2.jpg');
  background-size: cover;
  background-blend-mode: darken;
  color: #ff4dd5;
  background-color: var(--container);
  min-height: 30vh;
  padding: 20px;
  position: relative;
  flex: 1;
  max-width: 800px;
  margin-top: 50px;
  margin-bottom: 20px;
box-shadow:
  inset 5px 5px 0px rgba(0, 0, 0, 0.6),
  inset -5px -5px 0px rgba(255, 255, 255, 0.1),
  inset 0px 5px 0px rgba(0, 0, 0, 0.5),
  inset 0px -5px 0px rgba(255, 100, 255, 0.2);

  border: 20px solid transparent;
  border-image-source: url('/img/clouds/cloud-border.png');
  border-image-slice: 80; 
  border-image-outset:1;
  border-image-width: 20px;
  border-image-repeat: round;
  z-index:2;
}

.blog-inner-container {
  height: 400px;
  width: 85%;
  overflow-y: scroll;
  margin: 10px;
  padding: 30px 30px 30px 70px; /* extra left padding for margin line */
  margin-left: 0;
  text-align: left;

  background-color: #c7eced;
  color: #4c00ab;

  background-image:
    linear-gradient(to right, transparent 55px, #e8a0b0 55px, #e8a0b0 57px, transparent 57px),
    repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 31px,
      #7fc8e3 31px,
      #7fc8e3 32px
    );
  background-size: 100% 100%, 100% 32px;
  background-attachment: local;

  box-shadow:
    inset 5px 4px 8px rgba(0, 0, 0, 0.3),
    inset -5px -4px 8px rgba(0, 0, 0, 0.2),
    inset 0px 8px 16px rgba(0, 0, 0, 0.25);
}

.blog-entry + .blog-entry {
  border-top: 2px dashed #000000;
  margin-top: 20px;
  padding-top: 20px;
}

#blog-container,
#blog-container * {
  font-family: 'Baumans', system-ui !important;
}

#blog-container h1 {
  font-weight:bold;
  font-family: "Rock 3D", system-ui !important;
}

.d-t, .date { 
  font-family: "Henny Penny", system-ui;
  color:#ff4dd5 !important;
  animation-play-state:paused;
}