eww.scss

* {
    all: unset; //Unsets everything so you can style everything from scratch
}

$bg: #282828;
$lightbg: #232a2d;
$white: #FFF;
$red: #e57474;
$gray: #b3b9b8;
$green: #8ccf7e;
$spotify: #1DB954;
$orange: #FF9500;
$brown-envelop: #ffae52;
$pink: #FC0FC0;
$blue: #256EFF;
$bitbucket: #0052CC;
$pill: rgba(0, 0, 0, 0.5);

.bar {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-family: feather;
    font-family: Iosevka Nerd Font;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0);
    padding: 1px;
    margin: 5px 20px 1px 20px;
}

.workspaces-ct {
    background: $pill;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 16px;
}

.workspaces {
    margin: 1px;
}

.timers {
    background: $pill;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 16px;
}

.side-stuff {
    background: $pill;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 16px;
}

.inactive {
    color: $white;
    margin: 1px;
}

.active-red {
    color: red;
    font-size: 30px;
    margin: 1px 5px;
}

.active-orange {
    color: $orange;
    font-size: 30px;
    margin: 1px 5px;
}

.active-brown {
    color: $brown-envelop;
    font-size: 30px;
    margin: 1px 5px;
}

.active-green {
    color: $spotify;
    font-size: 30px;
    margin: 1px 5px;
}

.active-pink {
    color: $pink;
    font-size: 30px;
    margin: 1px 5px;
}

.active-blue {
    color: $blue;
    font-size: 30px;
    margin: 1px 5px;
}

.battery {
    color: red;
}

.power {
    color: red;
    font-size: 25px;
}

.reboot {
    color: $blue;
    font-size: 20px;
}

.exit {
    color: $orange;
    font-size: 20px;
}

.wakatime {
    border: 1px solid yellow;
    border-radius: 100px;
    margin: 5px;
    margin-left: 10px;
    padding: 2px 10px;
}

.flameshot {
    color: purple;
    font-size: 25px;
    margin: 0px 5px 0px 5px;
}

.bitbucket {
    color: $bitbucket;
    font-size: 25px;
}