:root {
    --clr-dark: #2C2C2C;
    --clr-light: #F7374F;
    --clr-slate: #5225468d;
    --clr-primary: #88304E;
    --clr-link: #7638b0;
    --int-width: 350; 
}
body {
background: hsla(0, 33%, 2%, 1);

background: linear-gradient(0deg, hsla(0, 33%, 2%, 1) 0%, hsla(0, 46%, 18%, 1) 50%, hsla(0, 33%, 2%, 1) 100%);

background: -moz-linear-gradient(0deg, hsla(0, 33%, 2%, 1) 0%, hsla(0, 46%, 18%, 1) 50%, hsla(0, 33%, 2%, 1) 100%);

background: -webkit-linear-gradient(0deg, hsla(0, 33%, 2%, 1) 0%, hsla(0, 46%, 18%, 1) 50%, hsla(0, 33%, 2%, 1) 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#080404", endColorstr="#431919", GradientType=1 );
}

.title {
    align-self: center;
    display: flex;
    text-align: center;
    align-items: center;
    font-size: 30px;
    justify-content: center;
    width: 50%;
    min-width: 400px;
    height: 300px;
    border: 10px solid var(--clr-light);
    padding: auto;
    border-radius: 10px;
}
.post{
    display: grid;
    align-items: center;
    justify-content: center;
    border: solid var(--clr-primary);
    border-radius: 10px;
    min-width: 400px;
    margin: 4px;

}

.header{
    display: flex;
    text-align: center;
    justify-content: center;
    font-size: 25px;
    text-shadow: #88304E;
    min-width: var(--int-width) - (6 * 2);
    border: 6px solid var(--clr-primary);
}
.text {
    display: flex;
    text-align: left;
    min-width: var(--int-width) - (6 * 2);
    height: auto;
    border: 6px solid var(--clr-primary);
    word-wrap: break-word;
    white-space: normal;
    }
.image {
    display: flex;
    min-width: var(--int-width);
    height: auto;
    border: 6px solid var(--clr-primary);
}

.centerall {
    display: grid;
    place-items: center;
    height: auto;
    /*border: 4px solid var(--clr-slate);*/
}

.secret {
    align-self:normal;
    display: flex;
    font-size: 10px;
}

* {
/*background-color: var(--clr-dark);*/
color: #caccc1
}

.button {
    align-self: center;
    margin: 4px;
    padding: auto;
}