:root{
  --r1: 132, 112, 54;
  --r2: 22, 63, 41;
  --r3: 26, 137, 76;
  	--accent:rgba(var(--r3),1);
	--t0: rgba(20,20,20,0.1);
	--t1: rgba(20,20,20,0.2);
	--t2: rgba(20,20,20,0.4);
  --bg: #222;
  --body: #fff;
	--bgimg:url(https://i.postimg.cc/mDJ9vR1L/pinstripe-light.png);
  --headerfont: helvetica neue;
  --bodyfont: palatino;
  --smallfont: palatino;
	--minwidth: 1100px;
  --maxwidth: 2000px;
}

[data-theme=light]{
  --accent:rgba(var(--r1),0.8);
	--t0: rgba(255,255,255,0.1);
	--t1: rgba(255,255,255,0.2);
	--t2: rgba(255,255,255,0.4);
  	--bg: #fff;
  --body: #333;
	--bgimg:url(https://i.postimg.cc/9099VSyG/pinstripe-dark.png);
}

/* top bar */

#top{width:100%; height:90px; position:fixed; z-index:100; top:0; left:0; background:var(--t0); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:space-between; padding:0 20px; white-space:nowrap;}
#top right{display:flex; height:70px; align-items:center; padding-right:75px;}
#top right a{width:40px; height:40px; margin:0 13px; border-radius:50%; background:var(--t2); display:flex; align-items:center; justify-content:center; font-size:18px;}

#top left{display:flex; align-items:center; height:70px;}
#top left username{font:lighter 30px var(--headerfont); letter-spacing:10px; text-transform:uppercase; background:linear-gradient(to right, var(--body), var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
#top left x{font:500 10px var(--smallfont); color:#fff; letter-spacing:2px; text-transform:uppercase; margin:0 13px;}

.theme-switch-wrapper{width:40px; height:40px; margin:0; border-radius:50%; background:var(--t1); display:flex; align-items:center; justify-content:center;}
.theme-switch input {display:none;}
.theme-switch {display: inline-block; height: 14px; position: relative; width: 22px;}
.slider {background-color: var(--t2); bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s;	border-radius:6px;}
.slider:before {background:rgba(var(--r2),0.9); bottom: 2px; content: ""; height: 10px; left: 2px; position: absolute; transition: .4s; width: 10px; border-radius: 50%;}
input:checked + .slider:before {transform: translateX(8px);}

#body {
  background: #3D5A68;
  min-height: 150vh;
  font-family: helvetica, arial;
  font-size:10px;
  line-height:18px;
  text-transform: lowercase;
  letter-spacing: 2px;
  background-image: linear-gradient(to top right, rgba(var(--r1),0.6) 0%, rgba(var(--r2), 0.6) 50%, rgba(var(--r3),0.8) 100%), var(--bgimg);
  background-color:var(--bg); 
  background-attachment:fixed, fixed; 
  background-repeat: no-repeat, repeat; 
  color:var(--body);
  margin-bottom:50px;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 768px) {
  #body {
    padding: 1px;
  }
}
@media only screen and (max-width: 767px) {
  #body {
    padding: 1px;
  }
}
#body, #body * {
  transition: all 0.25s;
}
#body .out-wrap {
  position: relative;
  padding: 30px;
  box-shadow: 0 6px 10px -2px rgba(0, 0, 0, 0.25);
  width: 600px;
  margin-top:200px;
  margin-bottom:0px;
  margin-left: auto;
  margin-right: auto;
  background: rgba(255, 255, 255, .1);
  font-size:8px;
  letter-spacing:2px;
  text-transform: uppercase;
  font-family:helvetica, arial;
}

#body .out-wrap #tabs {
  border-bottom: 0;
  margin: 0 -50px 20px;
  background: #303030;
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  flex-wrap: nowrap !important;
}
#body .out-wrap #tabs::-webkit-scrollbar {
  display: none;
}
#body .out-wrap #tabs li {
  width: auto;
  white-space: nowrap;
  flex: 1;
}
#body .out-wrap #tabs li a {
  border: 0;
  border-radius: 0;
  cursor: pointer;
  margin: 0;
  color: #fff;
  text-transform: uppercase;
}
#body .out-wrap #tabs li a:hover {
  background: #ddd;
  color: #fff;
}
#body .out-wrap #tabs li.active a {
  background: #fff;
  color: #3D5A68;
}
#body .out-wrap .tab-content {
  overflow: hidden !important;
}

#body .progress-column {
  float: left;
  width: 50%;
}

/* Clear floats after the columns */
#body .progress-row:after {
  content: "";
  display: table;
  clear: both;
}

.boop {
  font-size:10px;
  letter-spacing:4px;
  border-bottom: 1px solid white;
  text-transform:lowercase;
  font-family:palatino;
  padding: 1px 22px 5px 25px;
}


/* general styling */

* {box-sizing:border-box; -webkit-box-decoration-break: clone;}
img{object-fit:cover}
b{color:var(--accent)}

.hover{transition:0.3s;}
.hover:hover{box-shadow:0 0 25px var(--t1);}