.buttonContainer {
    height: 0%;
}

.circle {
    width: 30vh;
    height: 30vh;
    border-radius: 50%;
    position: fixed;
    cursor: pointer;
    background-color: magenta;
    box-shadow: 0 0 1vh rgb(0 0 0 / .090);
    border: none;
    transition: all 0.2s ease-in-out;
}

.growIn {
    animation: growIn .5s 1;
}

.expandCircle {
    /* width: 84vh; */
    /* height: 84vh; */
    /* transform: scale(2.8); */
    animation: expandCircle 1s 1;
}

.hoverBox {
    z-index: 200;
    width: 30vh;
    height: 30vh;
    position: fixed;
    display: block;
}

.hoverBox0 {
    top: 0vh;
    left: 0vh;
    border-bottom-right-radius: 10vh;
}
.hoverBox0:hover .button0 {
    transform: scale(2.8);
}

.hoverBox1 {
    top: 0vh;
    right: 0vh;
    border-bottom-left-radius: 10vh;
}
.hoverBox1:hover .button1 {
    transform: scale(2.8);
}

.hoverBox2 {
    bottom: 0vh;
    left: 0vh;
    border-top-right-radius: 10vh;
}
.hoverBox2:hover .button2 {
    transform: scale(2.8);
}

.hoverBox3 {
    bottom: 0vh;
    right: 0vh;
    border-top-left-radius: 10vh;
}
.hoverBox3:hover .button3 {
    transform: scale(2.8);
}

.button0 {
    top: -15vh;
    left: -15vh;
}

.button1 {
    top: -15vh;
    right: -15vh;
}

.button2 {
    bottom: -15vh;
    left: -15vh;
}

.button3 {
    bottom: -15vh;
    right: -15vh;
}

/* color mods */

.colorGreen {
    background-color: rgb(103, 183, 162);
}

.colorYellow {
    background-color: rgb(244, 186, 104);
}

.colorPurple {
    background-color: rgb(151, 108, 193);
}

.colorRed {
    background-color: rgb(232, 96, 103);
}

.colorWhite {
    background-color: rgb(253, 250, 245);
}

@keyframes growIn {
    0%{
        transform: scale(0);
    }
    30%{
        transform: scale(.0);
    }
    75%{
        transform: scale(.95);
    }
    100%{
        transform: scale(1);
    }
}

@keyframes expandCircle {
    0%{
        transform: scale(2.8);
    }
    100%{
        transform: scale(5.8);
        height: 60vw;
        width: 60vw;
    }
}