:root {
    --bg-color: rgb(24, 100, 170);
    --secondary-color: rgb(139, 199, 255);
    --teritary-color: rgb(58, 142, 221);
    --border-color: rgb(4, 34, 61);
    --light-border-color: rgb(0, 46, 87);
    --highlight-color: rgb(182, 221, 255);
}

body {
    background-image: url("https://i.postimg.cc/LXhCSP0B/watertilebluer.png");
	font-family: "Zen Kurenaido", "Quantico", "sans-serif", "arial";
}

ul {
    list-style-type: none;
    display: inline-block;
    margin: 0px;
    padding: 0px;
    background: transparent;
}

.tabs li.active-tab {
    background: linear-gradient(var(--secondary-color), var(--teritary-color));
}

.tab-bar {
    text-align: left;
    place-self: center;
    margin: 0px;
    margin-top: 250px;
    padding: 0px;
    background: linear-gradient(var(--bg-color), var(--light-border-color));
    width: 800px;
    border: 2px solid var(--border-color);
    overflow: hidden;
}

.tabs, .controls {
    font-size: 0px;
}

.tabs {
    text-align: right;
}

.controls {
    float: right;
}

.tabs li, .controls li {
    display: inline-block;
    margin: 0px;
    padding: 0px 5px 2px 9px;
    background: linear-gradient(var(--teritary-color), var(--bg-color));
    font-size: 16px;
    border: 2px solid var(--border-color);
    border-width: 0px 2px 0px 0px;
    transform: skewX(25deg);
}

.controls li:last-child {
    border-right-width: 0px;
    margin-right: -5px;
    padding-right: 10px;
}

.controls li:first-child {
    border-left-width: 2px;
}

.tabs li:first-child {
    margin-left: -6px;
    padding-left: 10px;
}

.tabs li a, .controls li span {
    display: inline-block;
    transform: skewX(-25deg);
    text-decoration: none;
    font-weight: 5px;
    color: var(--border-color)
}

.main-content {
    margin: 0px;
    padding: 10px;
    background: white;
    width: 780px;
    place-self: center;
    border: 2px solid var(--border-color);
    border-top-width: 0px;
}