:root {
    --tabs-margin: 4vw;
    
    --tab-width: 10vw;
    --tabs-content-distance: 2rem;
    --tabs-content-border-color: rgba(53, 57, 59, 0.5);
    --tabs-content-border-height: 1px;
    --tabs-content-border-selected-color: rgb(166, 2, 33);
    --tabs-content-border-selected-height: 2px;
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
    margin: 0;
    overflow: hidden;
}

.tabs > .tab > .tab-radio {
    display: block;
    position: absolute;
    opacity: 0;
    
    cursor: pointer;
}

.tabs > .tab > label {
    display: block;
    position: relative;
    z-index: 1;
    
    width: var(--tab-width);
    text-align: center;
    
    cursor: pointer;
}
.tabs > .tab > .tab-radio:hover ~ label,
.tabs > .tab > .tab-radio:focus ~ label {
    padding-bottom: calc(var(--tabs-content-border-selected-height) - var(--tabs-content-border-height));
    border-bottom: var(--tabs-content-border-height) solid var(--tabs-content-border-selected-color);
}
.tabs > .tab > .tab-radio:checked ~ label {
    padding-bottom: 0;
    border-bottom: var(--tabs-content-border-selected-height) solid var(--tabs-content-border-selected-color);
}
.tabs > .tab > .tab-radio:checked ~ label > svg path {
    fill: var(--accent-color);
}

.tabs > .tab > .tab-content {
    display: none;
    position: absolute;
    left: 0;
    margin-left: var(--tabs-margin);
    margin-top: calc(-1 * var(--tabs-content-border-height));
    width: calc(100% - (2 * var(--tabs-margin)));
    height: 100%;
    z-index: 0;
    
    padding-top: var(--tabs-content-distance);
    
    border-top: var(--tabs-content-border-height) solid var(--tabs-content-border-color);
}
.tabs > .tab > .tab-radio:checked ~ .tab-content {
    display: block;
}

.content-container {
    height: 100%;
}