.tabs {
    list-style: none;
    margin: 60px auto 0;
    width: 660px;
}

.tabs li {
    /* Makes a horizontal row */
    float: left;

    /* So the psueudo elements can be
           abs. positioned inside */
    position: relative;
}

.tabs a {
    /* Make them block level
         and only as wide as they need */
    float: left;
    padding: 10px 40px;
    text-decoration: none;

    /* Default colors */
    color: var(--main-color);
    background: #ddc385;

    /* Only round the top corners */
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.tabs .active {
    /* Highest, active tab is on top */
    z-index: 3;
}

.tabs .active a {
    /* Colors when tab is active */
    background: var(--main-color);
    color: black;
}

.tabs li:before,
.tabs li:after,
.tabs li a:before,
.tabs li a:after {
    /* All pseudo elements are 
         abs. positioned and on bottom */
    position: absolute;
    bottom: 0;
}

/* Only the first, last, and active
       tabs need pseudo elements at all */
.tabs li:last-child:after,
.tabs li:last-child a:after,
.tabs li:first-child:before,
.tabs li:first-child a:before,
.tabs .active:after,
.tabs .active:before,
.tabs .active a:after,
.tabs .active a:before {
    content: "";
}

.tabs .active:before,
.tabs .active:after {
    background: var(--main-color);

    /* Squares below circles */
    z-index: 1;
}

/* Squares */
.tabs li:before,
.tabs li:after {
    background: #ddc385;
    width: 10px;
    height: 10px;
}

.tabs li:before {
    left: -10px;
}

.tabs li:after {
    right: -10px;
}

/* Circles */
.tabs li a:after,
.tabs li a:before {
    width: 20px;
    height: 20px;
    /* Circles are circular */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: white;

    /* Circles over squares */
    z-index: 2;
}

.tabs .active a:after,
.tabs .active a:before {
    background: #ddc385;
}

/* First and last tabs have different
       outside color needs */
.tabs li:first-child.active a:before,
.tabs li:last-child.active a:after {
    background: white;
}

.tabs li a:before {
    left: -20px;
}

.tabs li a:after {
    right: -20px;
}

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: var(--main-color);
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

/* Style the close button */
.topright {
    float: right;
    cursor: pointer;
    font-size: 28px;
}

.topright:hover {
    color: red;
}