@font-face {
    font-family: Brunson;
    src: url(../../Assets/fonts/Brunson.ttf);
}
@font-face {
    font-family: Elephant;
    src: url(../../Assets/fonts/Elephant.ttf);
}

body {
  background-image: linear-gradient(rgb(255, 230, 0), rgb(255, 123, 0));
  background-repeat: no-repeat;
  background-size: contain;
  
  margin: 0px 0px 0px 0px;
  height: 100%;
  min-height: 100%;
}

#BlogContent {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    flex-flow: column;
    width: 1000px;
    margin-top: 100px;
}

#BlogPost {
    position: relative;
    z-index: 99;
}

#BlogPost img {
    display: block;
    width: 1000px;
}

#BlogTitle {
    position: absolute;
    font-size: 50px;
    font-family: Brunson;
    color: white;
    -webkit-text-stroke: 13px rgb(32, 32, 32);
    paint-order: stroke fill;
    transform: perspective(300px) translate3d(100px, 0, 0) rotate3d(0, 1, 0, 20deg);
    text-wrap: stable;
    width: 600px;
    top: -25px;
}
#PostTitle {
    position: absolute;
    font-size: 50px;
    font-family: Brunson;
    color: white;
    -webkit-text-stroke: 13px rgb(32, 32, 32);
    paint-order: stroke fill;
    transform: perspective(300px) translate3d(100px, 0, 0) rotate3d(0, 1, 0, 20deg);
    text-wrap: stable;
    width: 600px;
    top: 50px;
    left: 100px;
}
#PostContent {
    width: 900px;
    background-color: rgba(0, 0, 0, 0.486);
    background-image: url(../../Assets/UrBling/HalfTone.webp);
    background-size: 200px;
    background-clip: padding-box;
    border: 75px solid transparent;
    border-image: url(../../Assets/UrBling/HalfToneGradient.webp) 39.3% round;
    border-image-width: 75px;
    margin: auto;
    margin-top: 150px;
}
#PostContent p{
    font-size: 23px;
    font-family: Elephant;
    color: white;
    -webkit-text-stroke: 6px rgb(51, 51, 51);
    paint-order: stroke fill;
    text-shadow: -5px 10px 5px rgb(255, 209, 111);
    letter-spacing: 5px;
}
#BlogDesc {
    position: absolute;
    font-size: 20px;
    font-family: Brunson;
    color: white;
    -webkit-text-stroke: 13px rgb(32, 32, 32);
    paint-order: stroke fill;
    transform: perspective(200px) translate3d(200px, -100px, 0) rotate3d(0, 1, 0, -10deg);
    text-wrap: stable;
    width: 400px;
    left: 350px;
    top: 130px;
}

#city {
    display: block;
    position: absolute;
    width: 40%;
    bottom: -2vh;
    right: 0px;
    left: 0px;
    margin-inline: auto;
    z-index: -1;
}

#bg {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgb(255, 230, 0), rgb(255, 123, 0));
    z-index: -2;
    padding: 1vh;
}
#border {
  position: absolute;
  top: 0px;
  border: 10px solid transparent;
  border-image: url(../../Assets/UrBling/SplatterBorder.png) 30% repeat;
  border-image-width: 40vh;
  width: 100%;
  height: 100%;
  min-height: 100%;
}