* {
  box-sizing: border-box;
  /* outline: 1px solid red; */
}

body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
  justify-content: center;
  align-items: center;

  background-image: url("blogbg.png");
}

.blog-post-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 40rem;
  padding: 1rem;

  border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAiFJREFUeF7tm0FywzAMA63/P9qZHq3MGMEQlph0e5WM0ksQjpV2HPxECYyoGmIHQMMmAChAwwTCcjgUoGECYTkcCtAwgbAcDgVomEBYDof+OtDzPE/nHscYrUzRqpg/kAB17PTBXoB+AMnZ8u+BVgG416vmzJnq6lczuZyh1YLd6wE6Eag6CKAAVR64rs8jm3bgar12GboagNf+41D1AdQkCtDp1bL6qeDrgJqGabe93ci3I2QWBFATmNoOUEXIXN8OdK5XPTSqBZt85HFgup7yuzxArwQAGj7xB2g3oCoz50hIZ5bK1NX1lR26umAF0M30dMMBKo4X3QYCdDdQd8TTI+U6ZnW9tkNXF+gCrGZo1QAAFR1zP5UAtDvQpw9w3Qiofue13aEANVuuHkoABejtn09uH3nVH7dApafW1USp6916ecp3f8qnO6701DoOVYTM9fZAq692biaZ/N62u0Cr9dkZCtD7FgN09/EdDn3YoS7gaka5maoyNF1PeeQBeiUA0G5fI+PQsENVRrmZt3t/NVPLIw9QHHo7BDg0nBHtgKoTe/f+V+sB1OyQahBAAeoRUI7y1L7wP+nUDaYBzb+vqt9u5AGqCIh194N91UGq3Ko+DhUHxNWGqwa+RY57wdP7VwNI30/5XT5dEEDDRAEK0AuBdiMf7s9yOYCGkQMUoGECYTkcCtAwgbAcDgVomEBYDocCNEwgLIdDARomEJZ7AT0aIHOhTKB1AAAAAElFTkSuQmCC")
    28 / 28px / 0 round;
  border-style: solid;
  border-image-outset: 1.5rem;

  background-color: #fff0e4;
}

.blog-post-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}

.divider {
  align-self: center;
  padding: 0.5rem;
  width: 100%;
}

.blog-title {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

/* crt effect start */
@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 1px rgba(179, 188, 255, 0.5),
      -0.4389924193300864px 0 1px rgba(255, 192, 212, 0.3), 0 0 3px;
  }
  5% {
    text-shadow: 2.7928974010788217px 0 1px rgba(179, 188, 255, 0.5),
      -2.7928974010788217px 0 1px rgba(255, 192, 212, 0.3), 0 0 3px;
  }
  10% {
    text-shadow: 0.02956275843481219px 0 1px rgba(179, 188, 255, 0.5),
      -0.02956275843481219px 0 1px rgba(255, 192, 212, 0.3), 0 0 3px;
  }
  15% {
    text-shadow: 0.40218538552878136px 0 1px rgba(179, 188, 255, 0.5),
      -0.40218538552878136px 0 1px rgba(255, 192, 212, 0.3), 0 0 3px;
  }
  20% {
    text-shadow: 3.4794037899852017px 0 1px rgba(179, 188, 255, 0.5),
      -3.4794037899852017px 0 1px rgba(255, 192, 212, 0.3), 0 0 3px;
  }
  25% {
    text-shadow: 1.6125630401149584px 0 1px rgba(179, 188, 255, 0.5),
      -1.6125630401149584px 0 1px rgba(255, 192, 212, 0.3), 0 0 3px;
  }
  30% {
    text-shadow: 0.7015590085143956px 0 1px rgba(179, 188, 255, 0.5),
      -0.7015590085143956px 0 1px rgba(255, 192, 212, 0.3), 0 0 3px;
  }
  35% {
    text-shadow: 3.896914047650351px 0 1px rgba(179, 188, 255, 0.5),
      -3.896914047650351px 0 1px rgba(255, 192, 212, 0.3), 0 0 3px;
  }
  40% {
    text-shadow: 3.870905614848819px 0 1px rgba(179, 188, 255, 0.5),
      -3.870905614848819px 0 1px rgba(255, 192, 212, 0.3), 0 0 3px;
  }
  45% {
    text-shadow: 2.231056963361899px 0 1px rgba(179, 188, 255, 0.5),
      -2.231056963361899px 0 1px rgba(255, 192, 212, 0.3), 0 0 3px;
  }
  50% {
    text-shadow: 0.08084290417898504px 0 1px rgba(179, 188, 255, 0.5),
      -0.08084290417898504px 0 1px rgba(255, 192, 212, 0.3), 0 0 3px;
  }
  55% {
    text-shadow: 2.3758461067427543px 0 1px rgba(179, 188, 255, 0.5),
      -2.3758461067427543px 0 1px rgba(255, 192, 212, 0.3), 0 0 3px;
  }
  60% {
    text-shadow: 2.202193051050636px 0 1px rgba(179, 188, 255, 0.5),
      -2.202193051050636px 0 1px rgba(255, 192, 212, 0.3), 0 0 3px;
  }
  65% {
    text-shadow: 2.8638780614874975px 0 1px rgba(179, 188, 255, 0.5),
      -2.8638780614874975px 0 1px rgba(255, 192, 212, 0.3), 0 0 3px;
  }
  70% {
    text-shadow: 0.48874025155497314px 0 1px rgba(179, 188, 255, 0.5),
      -0.48874025155497314px 0 1px rgba(255, 192, 212, 0.3), 0 0 3px;
  }
  75% {
    text-shadow: 1.8948491305757957px 0 1px rgba(179, 188, 255, 0.5),
      -1.8948491305757957px 0 1px rgba(255, 192, 212, 0.3), 0 0 3px;
  }
  80% {
    text-shadow: 0.0833037308038857px 0 1px rgba(179, 188, 255, 0.5),
      -0.0833037308038857px 0 1px rgba(255, 192, 212, 0.3), 0 0 3px;
  }
  85% {
    text-shadow: 0.09769827255241735px 0 1px rgba(179, 188, 255, 0.5),
      -0.09769827255241735px 0 1px rgba(255, 192, 212, 0.3), 0 0 3px;
  }
  90% {
    text-shadow: 3.443339761481782px 0 1px rgba(179, 188, 255, 0.5),
      -3.443339761481782px 0 1px rgba(255, 192, 212, 0.3), 0 0 3px;
  }
  95% {
    text-shadow: 2.1841838852799786px 0 1px rgba(179, 188, 255, 0.5),
      -2.1841838852799786px 0 1px rgba(255, 192, 212, 0.3), 0 0 3px;
  }
  100% {
    text-shadow: 2.6208764473832513px 0 1px rgba(179, 188, 255, 0.5),
      -2.6208764473832513px 0 1px rgba(255, 192, 212, 0.3), 0 0 3px;
  }
}

* {
  animation: textShadow 1.6s infinite;
}

.crt::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 5;
  pointer-events: none;
}
.crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.06),
      rgba(0, 255, 0, 0.02),
      rgba(0, 0, 255, 0.06)
    );
  z-index: 5;
  background-size: 100% 0.2rem, 1rem 100%;
  pointer-events: none;
}
.crt {
  animation: textShadow 1.6s infinite;
}
/* crt effect end */

/* scroll bar start */
::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-corner {
  border-top: 1px solid #000;
  border-left: 1px solid #000;
}

::-webkit-scrollbar-thumb {
  width: 14px;
  box-shadow: inset -1px -1px 0 #343463, inset 1px 1px 0 #cdcdfc;
  background-color: #aaaaab;
  background-repeat: no-repeat;
  background-position: center;
}

::-webkit-scrollbar-thumb:horizontal {
  width: 14px;
  box-shadow: inset -1px -1px 0 #343463, inset 1px 1px 0 #cdcdfc;
  background-color: #aaaaab;
  background-repeat: no-repeat;
  background-position: center;
}

::-webkit-scrollbar-track {
  background: radial-gradient(
        circle at 0.5px 0.5px,
        #787877 0.5px,
        transparent 0
      )
      0/4px 2px repeat,
    radial-gradient(circle at 2.5px 1.5px, #787877 0.5px, transparent 0) 0/4px
      2px repeat,
    #dedede;
  border-top: 1px solid #dedede;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid #dedede;
}

::-webkit-scrollbar-track:horizontal {
  background: radial-gradient(
        circle at 0.5px 0.5px,
        #787877 0.5px,
        transparent 0
      )
      0/4px 2px repeat,
    radial-gradient(circle at 2.5px 1.5px, #787877 0.5px, transparent 0) 0/4px
      2px repeat,
    #dedede;
  border-top: 1px solid black;
  border-left: 1px solid #dedede;
  border-right: 1px solid #dedede;
  border-bottom: 1px solid black;
}

::-webkit-scrollbar-button:vertical:increment {
  background-color: #dedede;
  background-repeat: no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-right: 1px solid black;
}

::-webkit-scrollbar-button:vertical:decrement {
  background-color: #dedede;
  background-repeat: no-repeat;
  background-position: center;
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-button:horizontal:decrement {
  background-color: #dedede;
  background-repeat: no-repeat;
  background-position: center;
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-button:horizontal:increment {
  background-color: #dedede;
  background-repeat: no-repeat;
  background-position: center;
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  width: 16px;
  height: 16px;
}

/* scrollbar end */