@font-face {
    font-family: expressway;
    src: url("/Assets/fonts/expressway rg.otf");
}

.BlogGrid {
    display: grid;
}

.BlogPost {
    background-color: rgb(108, 44, 44);
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    box-shadow: -10px -10px 8px rgba(0, 0, 0, 0.631) inset,
    10px 10px 8px rgba(255, 255, 255, 0.515) inset;
    border-radius: 10px;
}

.BlogPost > .Title {
    display: flex;
    flex-flow: row;
    background: linear-gradient(0deg,rgba(122, 122, 122, 1) 0%, rgba(112, 56, 56, 1) 20%, rgba(48, 48, 48, 1) 48%, rgba(122, 122, 122, 1) 52%, rgba(99, 55, 55, 1) 100%);
    border-radius: 5px;
    border: 1px solid rgb(126, 126, 126);
    margin-top: 10px;
}
.BlogPost h1 {
    font-family: Talero;
    letter-spacing: 10px;
    font-size: 30px;
    color: rgb(255, 206, 221);
    paint-order: stroke fill;
    text-shadow: 0px 0px 3px rgb(255, 255, 255), 0px 5px 7px rgb(0, 0, 0);
    transform-origin: 0 0;
    transform: scale(0.75,1.0);
    margin-left: 10px;
    margin-bottom: 0px;
    margin-top: 0px;
}
.BlogPost h2 {
    line-height: 30px;
    font-size: 20px;
    color: rgb(255, 206, 221);
    paint-order: stroke fill;
    text-shadow: 0px 0px 3px rgb(255, 255, 255), 0px 5px 7px rgb(0, 0, 0);
    margin-bottom: 0px;
    margin-top: 0px;
}

.BlogPost > .Content {
    padding: 6px 6px 6px 6px;
    font-family: expressway;
    font-size: 15px;
    color: rgb(221, 206, 119);
    margin-left: 15px;
    margin-right: 15px;
    -webkit-text-stroke: 2px black;
    paint-order: stroke fill;
    background: linear-gradient(0deg,rgba(20, 0, 0, 1) 0%, rgba(79, 68, 68, 1) 100%);
    border-radius: 5px;
    border: 1px solid rgb(126, 126, 126);
}

.Break {
    display: block;
    background-color: white;
    box-shadow: 0px 0px 5px rgb(255, 130, 130) inset,
    0px 0px 5px rgb(255, 130, 130);
    height: 10px;
    width: 90%;
    margin: auto;
    border-radius: 4px;
    margin-top: 30px;
    margin-bottom: 30px;
}