/* square button */
.square_button {
    /* self appearance */
    background-color: var(--elm);
    border: var(--ol) solid 3px;
    border-radius: 1rem;

    width: 4rem;
    height: 4rem;

    z-index: 2;

    /* svg positioning */
    display: flex;
    justify-content: center;
    align-items: center;
}

.hover_transparency {
    opacity: .5;
    transition: opacity .15s;
}
.hover_transparency:hover {
    opacity: 1;
}
/* end square button */


/* discord button */
a.discord {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

svg.discord {
    position: absolute;
    width: 3rem;
    fill: var(--text);
}
/* end discord button */


/* spellbook button */
.spellbook {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
}

.book_pages {
    position: absolute;
    width: 3.15rem;
    fill: var(--text);
}

.book_back {
    position: absolute;
    width: 3.65rem;
    fill: var(--ol);
}
/* end spellbook button */


/* edit characters button */
.edit_characters {
    position: fixed;
    bottom: 1rem;
    left: 6rem;
}

svg.edit_icon {
    width: 3.5rem;
    height: 3.5rem;
}

path.edit_icon {
    fill: var(--text);
    stroke: transparent;
}
/* end edit characters button */


/* scroll to top button */
div.scroll_to_top {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
}

svg.scroll_to_top {
    position: absolute;
    height: 4rem;
    fill: var(--text);
}
/* end scroll to top button */

/* small screen styles */
@media (min-height: 1280px) {
    /* transparency */
    .hover_transparency:hover {
        opacity: .5;
    }
    /* end transparency */

    /* square button */
    .square_button {
        border-width: 5px;
        border-radius: 1.5rem;

        width: 8rem;
        height: 8rem;
    }
    /* end square button */

    /* discord button */
    a.discord {
        top: 2rem;
        right: 2rem;
    }

    svg.discord {
        width: 6rem;
    }
    /* end discord button */

    /* spellbook button */
    .spellbook {
        left: 2rem;
        bottom: 2rem;
    }

    .book_back {
        width: 6.95rem;
    }

    .book_pages {
        width: 6rem;
    }
    /* end spellbook button */

    /* edit button */
    .edit_characters {
        bottom: 2rem;
        left: 12rem;
    }

    svg.edit_icon {
        width: 7rem;
        height: 7rem;
    }
    /* end edit button */

    /* scroll to top button */
    div.scroll_to_top {
        bottom: 2rem;
        right: 2rem;
    }

    svg.scroll_to_top {
        height: 8rem;
    }
    /* end scroll to top button */
}