#about {
    /*flexbox layout for About elements*/
    display: flex;
    flex-direction: row;
}

#about img {
    width: 30%;
    height: auto;
    margin: auto 2%;
}

#about div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-top: 5%;
    padding-bottom: 5%;
}

/*border flame animation for spell box*/
.fire {
    animation: burn 1.5s linear infinite alternate;
    color: crimson;
    font-weight: bold;
    line-height: 30px;
    border-radius: 10px;
    padding: 5px;
}

@keyframes burn {
    from { box-shadow: -.1em 0 .3em #fefcc9, .1em -.1em .3em #feec85, -.2em -.2em .4em #ffae34, .2em -.3em .3em #ec760c, -.2em -.4em .4em #cd4606, .1em -.5em .7em #973716, .1em -.7em .7em #451b0e; }
    45%  { box-shadow: .1em -.2em .5em #fefcc9, .15em 0 .4em #feec85, -.1em -.25em .5em #ffae34, .15em -.45em .5em #ec760c, -.1em -.5em .6em #cd4606, 0 -.8em .6em #973716, .2em -1em .8em #451b0e; }
    70%  { box-shadow: -.1em 0 .3em #fefcc9, .1em -.1em .3em #feec85, -.2em -.2em .6em #ffae34, .2em -.3em .4em #ec760c, -.2em -.4em .7em #cd4606, .1em -.5em .7em #973716, .1em -.7em .9em #451b0e; }
    to   { box-shadow: -.1em -.2em .6em #fefcc9, -.15em 0 .6em #feec85, .1em -.25em .6em #ffae34, -.15em -.45em .5em #ec760c, .1em -.5em .6em #cd4606, 0 -.8em .6em #973716, -.2em -1em .8em #451b0e; }
}