.tabs {
    position: absolute;
    top: -3.3rem;
    left: 5%;
    height: 3rem;
    width: 22.4rem;
    padding-left: 23px; 
    overflow: hidden;

    font-family: Darumadrop One;
    font-size: 22px;

}
.tab-panel {
    display: none;
}
.tab-panel.active{
    display:block;
}
.tab-button {
    position: relative;
    z-index: 1;
}
.tab-button.active {
    z-index: 2;
}
.tab-button::before,
.tab-button::after {
    content: "";
    position: absolute;
    bottom: -8px;
    width: 15px;
    height: 15px;
    background: transparent;
}
.tab-button[data-tab="me"]::before {
    left: -23px;
    border-bottom-right-radius: 15px;
    box-shadow: 5px 5px 0 5px #7e3327;
}
.tab-button[data-tab="me"]::after {
    right:-23px;
    border-bottom-left-radius: 15px;
    box-shadow: -5px 5px 0 5px #7e3327;

}
.tab-button[data-tab="website"]::before {
    left: -23px;
    border-bottom-right-radius: 15px;
    box-shadow: 5px 5px 0 5px #3b161c;
}
.tab-button[data-tab="website"]::after {
    right:-23px;
    border-bottom-left-radius: 15px;
    box-shadow: -5px 5px 0 5px #3b161c;

}
.tab-button[data-tab="me"] {
    background-color: #7e3327;
    color: #d999b7;

    border: 8px solid #7e3327;
    border-radius: 10px 10px 0 0 ;
}
.tab-button[data-tab="website"] {
    background-color: #3b161c;
    color: #9ba238;

    margin-left: 2px; /*for responsive make this margin smaller so they overlap on iphone e.g*/

    border: 8px solid #3b161c;
    border-radius: 10px 10px 0 0 ;
};