*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin          : 0;
    font-family     : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size       : 16px;
    font-weight     : 400;
    line-height     : 1.5;
    color           : #212529;
    text-align      : left;
    background-color: #fff;
}

.container {
    max-width    : 600px;
    margin-left  : auto;
    margin-right : auto;
    padding-left : 15px;
    padding-right: 15px;
}

.tabs {
    display       : flex;
    flex-direction: column;
}

.tabs__links {
    display         : flex;
    width           : 100%;
    overflow-x      : auto;
    overflow-y      : hidden;
    margin-left     : auto;
    margin-right    : auto;
    margin-bottom   : 10px;
    order           : 0;
    white-space     : nowrap;
    background-color: #fff;
    border          : 1px solid #e3f2fd;
    box-shadow      : 0 2px 4px 0 #e3f2fd;
}

.tabs__links>a {
    display        : inline-block;
    text-decoration: none;
    padding        : 6px 10px;
    text-align     : center;
    color          : #1976d2;
}

.tabs__links>a:hover {
    background-color: rgba(227, 242, 253, 0.3);
}

.tabs>#content-1:target~.tabs__links>a[href="#content-1"],
.tabs>#content-2:target~.tabs__links>a[href="#content-2"],
.tabs>#content-3:target~.tabs__links>a[href="#content-3"] {
    background-color: #bbdefb;
    cursor          : default;
}

.tabs>textarea:not(.tabs__links) {
    display: none;
    order  : 1;
}

.tabs>textarea:target {
    display: block;
}

.tabs__links>a.active{
    background-color: lightblue;
}