/*places ellements in the body in the center of the body and some other stuff*/
html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
    margin: 0%;
}

h1 {
    font-size: small;
}

/*alows you to place two half elements next to each other*/
.contentRowBox {
    display: flex;
    flex-direction: row-reverse;
    width: small;
    padding-inline: 2%;
    background-color: transparent;
}

/*its a text box but now half the size alows you to put in text*/
.textBoxHalf {
    /*decorationFiller doesnt work without flex*/
    display: flex;
    flex-direction: column;

    color: gainsboro;
    word-wrap: break-word;
    width: 50%;
    padding-inline: 2%;
    background-color: transparent;
}

/*decorationFiller fills the remaining space of a parent element*/
.decorationFiller {
width: 100%;
height: auto;
image-rendering: pixelated;
flex: 1;
}