body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: 100vw;
    background-color: #fafdfc;
}

main {
    margin-top: 2vh;
    margin-bottom: 4vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.toggleModalBtn {
    color: #ffffff;
    background: #965152;
    border: none;
}

.toggleModalBtn:hover,
.toggleModalBtn:focus,
.toggleModalBtn:active,
.toggleModalBtn:visited {
    color: #ffffff;
    background: #c2696a;
    border: none;
}

#dice {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#rollBtn {
    background-image: url('./assets/images/d20-fill-no-lines.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 250px;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}

#rollNum {
    font-family: 'Texturina', serif;
    color: #ffffff;
    margin: 0 auto;
    font-size: 100px;
    width: 100%;
    padding: 24px;
    margin-bottom: 45px;
}

.card-header {
    width: 95vw;
}

.cardHeaderBtn {
    color: #333333;
    text-decoration: none !important;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

/* color code for spell classes and schools */
.abjuration {
    color: #7AA1BB;
}

.conjuration {
    color: #965152;
}

.transmutation {
    color: #063B7D;
}

.evocation {
    color: #EBD794;
}

.necromancy {
    color: #4B6D3E;
}

.divination {
    color: #E6858F;
}

.enchantment {
    color :#B58FAD;
}

.illusion {
    /* color: #FA905F; */
    /* color: #878587; */
    color :#C5CACC;
}

.abjurationBorder {
    border: 20px solid #7AA1BB;
}

.conjurationBorder {
    border: 20px solid #965152;
}

.transmutationBorder {
    border: 20px solid #063B7D;
}

.evocationBorder {
    border: 20px solid #EBD794;
}

.necromancyBorder {
    border: 20px solid #4B6D3E;
}

.divinationBorder {
    border: 20px solid #E6858F;
}

.enchantmentBorder {
    border: 20px solid #B58FAD;
}

.illusionBorder {
    /* border:  20px solid #FA905F; */
    /* border:  20px solid #878587; */
    border: 20px solid #C5CACC;
}


/* footer {
    position: relative;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: 10px;
} */

@media screen and (min-width: 768px) {
    main {
        margin-top: 4vh;
    }
    .spellsContainer,
    .cardHeaderBtn {
        width: 60%;
    }
    .card-body {
        padding: 30px;
    }
}

@media screen and (min-width: 992px) {
    .navbar {
        justify-content: space-between;
    }
    .spellsContainer,
    .cardHeaderBtn {
        width: 50%;
    }
}

@media screen and (min-width: 1200px) {
    .spellsContainer,
    .cardHeaderBtn {
        width: 30%;
    }
}