html {
    color: rgb(255, 239, 215);
    background: rgb(15, 0, 33);
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: 100%;
    font-family: Arial, Helvetica, sans-serif;
}

header {
    height: 15vh;
    background-color: black;
    border-radius: 4px;
    border-style: double;
    border-color: rgb(3, 72, 91);
}

.bannertitle {
    text-align: center;
    font-size: 20px;
    padding: 30px;
}

button {
    text-align: center;
    height: 15vh;
    margin-right: 40vw;
    margin-left: 40vw;
}

.grid {
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
    flex-direction: row;
    justify-content: center;
    height: 250px;
    width: 100%;
}

.image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 150px;
    max-height: 230px;
    padding-left: 50px;
    padding-right: 50px;
}

.potion {
    max-width: 80%;
    max-height: 80%;
}

.text {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 15px;
}

footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    text-align: center;
}