.btn-container{
    color: var(--teal-bright);
    display: flex;
    flex-wrap: wrap;
    font-size: clamp(13px, 1.4vw, 20px);
    align-content: space-evenly;
    height: 100%;
}

.b-btn{
    border-radius: 0;
    height: 6ex;
    flex-basis: 16ex;
    flex-grow: 1;
    cursor: pointer;
    transition: 900ms;
    vertical-align: top;
    position: relative;
    overflow: hidden;
    margin: 2ex;
    background: white;
    font-size: 100%;
}
.flex-empty{
    height: 0;
    flex-basis: 16ex;
    flex-grow: 1;
    border: none;
    margin: 0 2ex;
    font-size: 100%;
}
.btn_filled{
    background: var(--teal-bright);
    border: 1px solid var(--teal-bright);
    color: white;
}
.btn_outline{
    background: transparent;
    color: var(--teal-bright);
    border: 1px solid var(--teal-bright);
}
.btn_text{
    background: transparent;
    color: var(--teal-bright);
    border: 1px solid transparent;
}

.b01{
    background: #489;
    border: none;
}
.b01:hover{
    color: #000;
    text-shadow: 0 0 15px white;
}
.b02:hover{
    background: white;
    color: var(--teal-bright);
}
.b04:hover{
    transform: translate(-7px, 7px);
}
.b05:hover{
    transform: scale(1.15,1.15);
}
.b051:hover{
    transform: scale(0.9,0.9);
}
@keyframes b052{
    10%{transform: rotate(12deg)}
    30%{transform: rotate(-10deg)}
    45%{transform: rotate(5deg)}
    60%{transform: rotate(-5deg)}
    75%{transform: rotate(2deg)}
    90%{transform: rotate(-2deg)}
}
.b052:hover{
    animation: b052 2s 1 linear;
}
.b06:before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0%;
    background: var(--teal-bright);
    z-index: 2;
    transition: 900ms;
    z-index: -1;
}
.b06:hover:before{
    height: 100%;
}
.b06:hover{
    color: white;
}

.b061::before{
    content: "";
    position: absolute;
    left: -1%;
    top: 0;
    width: 102%;
    height: 0%;
    background: var(--teal-bright);
    z-index: 2;
    transition: 900ms;
    border-radius: 0 0 50% 50%;
    z-index: -1;
}
.b061:hover::before{
    height: 180%;
}
.b061:hover{
    color: white;
}
.b07:hover{
    border-radius: 30px;
}
.b071:hover{
    border-radius: 60% 30%;
}
.b072:hover{
    border-radius: 50% 10%;
}
.b08{
    border-color: transparent;
    outline: 1px solid var(--teal-bright);
}
.b08:hover{
    outline: 1px solid transparent;
    outline-offset: 15px;
    color: black;
}
.b09{
    outline: 1px solid transparent;
    transition: 400ms;
}
.b09:hover{
    outline-color: black;
    outline-offset: 10px;
    color: black;
}
.b10{
    outline: 0px solid var(--teal-bright);
    transition: all 1100ms, transform 500ms;
}
.b10:hover{
    outline: 1px solid transparent;
    outline-offset: 7px;
    transform: scale(1.2);
}
.b11{
    outline: 1px solid transparent;
    outline-offset: 15px;
}
.b11:hover{
    outline: 1px solid var(--teal-bright);
    outline-offset: 0;
}
.b12::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    transition: 900ms;
    border-bottom: 1px solid transparent;
}
.b12:hover::after{
    border-bottom: 1px solid var(--teal-bright);
}
.b13::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    transition: 900ms;
    border-bottom: 1px solid var(--teal-bright);
}
.b13:hover::after{
    left: 10%;
    width: 80%;
}
.b15::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transition: 900ms;
    border-bottom: 1px solid transparent;
}
.b15:hover::before{
    border-bottom: 1px solid var(--teal-bright);
    top: 0;
}
.b15::after{
    content: "";
    position: absolute;
    bottom: 50%;
    left: 0;
    width: 100%;
    transition: 900ms;
    border-bottom: 1px solid transparent;
}
.b15:hover::after{
    border-bottom: 1px solid var(--teal-bright);
    bottom: 0;
}
.b16::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 96%;
    width: 0;
    transition: 900ms;
    border-top: 1px solid var(--teal-bright);
    border-bottom: 1px solid var(--teal-bright);
}
.b16:hover::before{
    width: 100%;
}
.b17::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 96%;
    width: 0;
    transition: 400ms;
    border-top: 1px solid var(--teal-bright);
    border-bottom: 1px solid var(--teal-bright);
    z-index: -1;
}
.b17:hover::before{
    width: 100%;
}
.b17::after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 0;
    width: 100%;
    transition: 400ms;
    transition-delay: 400ms;
    background: var(--teal-bright);
    z-index: -1;
}
.b17:hover::after{
    height: 100%;
}
.b17:hover{
    color: white;
    transition-delay: 400ms;
}
@keyframes b18-1{
    from{
        bottom: calc(-100% + 1px);
        left: calc(100% - 1px);
    }
    25%{
        bottom: calc(100% - 1px);
        left: calc(100% - 1px);
    }
    50%{
        bottom: calc(100% - 1px);
        left: calc(-100% + 1px);
    }
    75%{
        bottom: calc(-100% + 1px);
        left: calc(-100% + 1px);
    }
    100%{
        bottom: calc(-100% + 1px);
        left: calc(100% - 1px);
    }
}
.b18::before{
    content: "";
    position: absolute;
    bottom: -100%;
    left: 100%;
    width: 100%;
    height: 100%;
    transition: 900ms;
    background: var(--teal-bright);
}
.b18:hover::before{
    animation: b18-1 4s infinite;
}