/* #region VARS */
:root{
    --black: #313233;
    --white: #fff9e8;
    --pRed: #ff582e;
    --sRed: #dba58c;
    --pBlue: #1497e3;
    --sBlue: #6cc1cc;
    --pYellow: #e3ac14;
    --sYellow: #dfc786;
    --pGreen: #1ec769;
    --sGreen: #86ba9d;
}
/* #endregion */
html, body{
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    padding: 0;
    margin: 0;
}
main{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#seraph{
 width: 500px;
 height: 500px;
 position: relative;
}
.bgBlack{
    background: var(--black);
}
.bgWhite{
    background: var(--white);
}
.bgRed-p{
    background: var(--pRed);
}
.bgBlue-p{
    background: var(--pBlue);
}
.bgYellow-p{
    background: var(--pYellow);
}
.bgGreen-p{
    background: var(--pGreen);
}
.bgRed-s{
    background: var(--sRed);
}
.bgBlue-s{
    background: var(--sBlue);
}
.bgYellow-s{
    background: var(--sYellow);
}
.bgGreen-s{
    background: var(--sGreen);
}