body {
    background-color: rgb(0, 0, 0);
    color: white;
    display: block;
}

body.light {
    background-color: white;
    color: black;
}

#pi-challenge-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: black; /* default color */
    background-image: url("images/Pi dimension.png");
    background-size: 100% 100%;
    background-position: center top;
    z-index: -1; /* behind all content */
    display: none;
}

#pi-challenge-bg.show {
    display: block;
}

#app {
    width: 100%;
    height: 100%;
}

.Alert {
    width: 350px;
    height: 160px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -175px;
    margin-top: -80px;
    background-color: rgb(63, 63, 63);
    display: flex;
    justify-content: center;
}

#alert-txt {
    position: absolute;
    top: 10;
}

#alert-desc {
    position: absolute;
    top: 35;
}

#alert-ok-button {
    position: absolute;
    right: 10;
    bottom: 10;
}

.Building-cost {
    background-color: rgba(227, 0, 0, 0.855);
    border: 2px solid maroon
}

.Building-cost:hover {
    background-color: rgba(185, 1, 1, 0.838);
}

.Building-buy {
    background-color: rgb(1, 218, 27);
    border: 2px solid rgb(0, 91, 11);
}

.Building-buy:hover {
    background-color: rgba(0, 189, 0, 0.9);
}

#Bld-1.hide {
    visibility: hidden;
}

#sub-tabs {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

#tabs {
    display: flex;
    width: 150px;
    position: absolute;
    flex-wrap: wrap;
    left: 0;
    top: 0;
}

#contenttabs {
    display: flex;
    width: 150px;
    position: absolute;
    flex-wrap: wrap;
    right: 0;
    top: 0;
}

#tab {
    width: 150px;
    height: 50px;
    background-color: rgba(43, 43, 43, 0.801);
    color: rgb(135, 135, 135);
    border: 1px solid rgb(78, 78, 78);
    display: flex;
    justify-content: center;
    align-items: center;
}

#sub-tab {
    width: 150px;
    height: 30px;
    padding: 5px;
    background-color: rgba(14, 203, 58, 0.801);
    border: 2px solid rgb(56, 116, 56);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

#maintab {
    width: 150px;
    height: 50px;
    background-color: rgba(43, 43, 43, 0.801);
    color: rgb(135, 135, 135);
    border: 1px solid rgb(78, 78, 78);
    display: flex;
    justify-content: center;
    align-items: center;
}

#upgradetab {
    width: 150px;
    height: 50px;
    background-color: rgba(43, 43, 43, 0.801);
    color: rgb(135, 135, 135);
    border: 1px solid rgb(78, 78, 78);
    display: flex;
    justify-content: center;
    align-items: center;
}

#upgradetab.available,
#layertab.available {
    border: 1px solid rgb(143, 26, 26);
}

#upgrade-available {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    top: 47;
    left: -3;
    background-color: rgb(22, 185, 22);
    display: none;
}

#upgrade-available.show {
    display: block;
}

#layertab {
    display: none;
}

#layertab.unlocked {
    display: block;
    width: 150px;
    height: 50px;
    background-color: rgba(9, 101, 30, 0.801);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

#lupgrade-available {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    top: 97;
    left: -3;
    background-color: rgb(206, 35, 12);
    display: none;
}

#lupgrade-available.show {
    display: block;
}

#btn-gain {
    width: 150px;
    border-radius: 0;
    background-color: black;
    border: 2px solid rgb(26, 26, 26);
}

#btn-gain:hover {
    background-color: rgb(20, 20, 20);
    border: 2px solid rgb(49, 49, 49);
}

.content {
    display: none;
}

.content.active {
    display: block;
} 

.sub-content {
    display: none;
    position: relative;
}

.sub-content.active {
    display: block;
    position: relative;
}

#s-text,
#v-text {
    font-weight: bold;
}

#Themes {
    position: absolute;
    width: 600px;
    height: 400px;
    top: 50%;
    left: 50%;
    margin-left: -300px;
    margin-top: -200px;
    background-color: rgba(152, 152, 152, 0.858);
}

.Themes {
    display: none;
}

.Themes.active {
    display: block;
}

#close-theme {
    position: absolute;
    top: 0;
    right: 0;
}

#ms-t {
    font-weight: bolder;
    font-size: 18px;
}

#ls-t {
    font-weight: bolder;
    font-size: 18px;
    color: rgb(8, 224, 84);
}

#Linear-statistics {
    display: none;
}

#Linear-statistics.unlocked {
    display: block;
}

#Equation {
    display: none;
}

#Equation.unlocked {
    display: block;
}

#Equation2 {
    display: none;
}

#Equation2.unlocked {
    display: block;
}

#mult-cost,
#mult-cost1,
#mult-cost2,
#mult-cost3 {
    width: 200px;
    height: 50px;
    font-size: 13px;
    background-color: rgb(54, 54, 54);
    border: 2px solid rgb(77, 77, 77);
}

#mult-cost:hover,
#mult-cost1:hover,
#mult-cost2:hover,
#mult-cost3:hover {
    background-color: rgb(59, 59, 59);
    border: 2px solid rgb(20, 20, 20);
}

#solved-equation {
    color: rgb(87, 87, 87);
    font-size: 14px;
    margin-top: -10px;
}

#up-t {
    font-size: 25px;
    font-weight: bolder;
    color: rgb(12, 187, 59); 
    margin-bottom: 15px;  
    text-shadow: 0 0 5px #04821f5b, 0 0 10px #05881d7c, 0 0 15px #068f2ca0, 0 0 20px #07993ade, 0 0 20px #00922e, 0 0 30px #08622a, 0 0 40px #06641d;
}

#note {
    color: rgb(187, 103, 103);
}

.Up-cost {
    width: 300px;
    height: 130px;
    background-color: rgba(128, 13, 13, 0.855);
    border: 2px solid rgb(129, 35, 35);
    font-size: 13px;
    color: rgb(204, 201, 201);
}

.Up-cost:hover {
    background-color: rgba(148, 14, 14, 0.855);
}

.Up-bought {
    width: 300px;
    height: 130px;
    background-color: rgb(6, 61, 78);
    border: 2px solid rgb(30, 135, 135);
    font-size: 13px;
}

.Up-bought:hover {
    background-color: rgba(5, 86, 85, 0.9);
}

.Up-buy {
    width: 300px;
    height: 130px;
    background-color: rgb(1, 218, 27);
    font-size: 13px;
}

.Up-buy:hover {
    background-color: rgba(0, 189, 0, 0.9);
}

#row1 {
    display: flex;
    justify-content: center;
    gap: 5px;
}

#row2 {
    display: none;
}

#row2.show {
    display: flex;
    justify-content: center;
    gap: 5px;
}

#row3 {
    display: none;
}

#row3.show {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 25px;
}

.Achv {
    width: 150px;
    height: 150px;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: rgba(227, 0, 0, 0.855);
    color: black;
    border: 2px solid black;
    padding: 2px;
}

.Achv.completed {
    background-color: rgb(1, 218, 27);
}

#achv-row2,
#achv-row3,
#achv-row4,
#achv-row5,
#achv-row6 {
    display: none;
}

#achv-row1,
#achv-row2.unlocked,
#achv-row3.unlocked,
#achv-row4.unlocked,
#achv-row5.unlocked,
#achv-row6.unlocked {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: 5px;
}

#softcap-tab {
    width: 100px;
    height: 25px;
    display: none;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    background-color: rgb(59, 59, 59);
}

#softcap-tab:hover {
    cursor: pointer;
    background-color: rgb(43, 43, 43);
}

#softcap-tab.show {
    display: flex;
}

#LEs,
#Ps {
    display: none;
}

#LEs.show,
#Ps.show {
    display: block;
}

#Save-notification {
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

#Save-notification.save {
    display: flex;
    justify-content: center;
    align-items: center;
}

#Building1,
#Building2,
#Building3 {
    width: 300px;
    height: auto;
    padding-bottom: 5px;
    font-size: 17px;
    background-color: rgba(68, 5, 5, 0.967);
    position: relative;
}

#ResetForLE {
    display: none;
}

#ResetForLE.unlocked {
    position: absolute;
    width: 250px;
    top: 30;
    left: 65%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(8, 224, 84);
    border: 3px solid rgb(4, 143, 25);
}

#ResetForLE:hover {
    background-color: rgb(8, 195, 73);
}

#Linear-essence-gain-formula {
    display: none;
}

#Linear-essence-gain-formula.show {
    display: block;
}

.Lup-cost {
    width: 250px;
    height: 140px;
    font-size: 14px;
    font-weight: bold;
    background-color: rgba(128, 13, 13, 0.855);
}

.Lup-cost:hover {
    background-color: rgba(148, 14, 14, 0.855);
}

.Lup-bought {
    width: 250px;
    height: 140px;
    font-size: 14px;
    font-weight: bold;
    background-color: rgb(4, 46, 59);
    border: 2px solid rgb(5, 121, 121);
}

.Lup-bought:hover {
    background-color: rgba(5, 86, 85, 0.9);
    border: 2px solid rgb(4, 105, 105);
}

.Lup-buy {
    width: 250px;
    height: 140px;
    font-size: 14px;
    font-weight: bold;
    background-color: rgb(6, 155, 23);
    border: 2px solid rgb(59, 170, 59);
}

.Lup-buy:hover {
    background-color: rgba(7, 126, 7, 0.9);
}

#Lrow1 {
    display: flex;
    justify-content: center;
}

#Lrow2 {
    display: none
}

#Lrow2.unlocked {
    display: flex;
    justify-content: center;
}

#Lrow3 {
    display: none;
}

#Lrow3.unlocked {
    display: flex;
    justify-content: center;
}

#NBuyer,
#KBuyer {
    display: none;
}

#NBuyer.unlocked,
#KBuyer.unlocked {
    display: block;
}

.LEequation-cost {
    width: 150px;
    height: 150px;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    color: black;
    background-color: rgba(227, 0, 0, 0.855);
}

.LEequation-cost:hover {
    width: 150px;
    height: 150px;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    color: black;
    background-color: rgba(185, 1, 1, 0.838);
}

.LEequation-bought {
    width: 150px;
    height: 150px;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    color: black;
    background-color: rgb(1, 167, 218);
}

.LEequation-bought:hover {
    width: 150px;
    height: 150px;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    color: black;
    background-color: rgba(0, 142, 140, 0.9);
}

.LinearChallenges {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 7px;
}

#Chals-tab {
    display: none;
}

#Chals-tab.unlocked {
    width: 150px;
    height: 30px;
    padding: 5px;
    background-color: rgba(14, 203, 58, 0.801);
    border: 2px solid rgb(56, 116, 56);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

#Chal-grid {
    width: 1000px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px
}

.Challenge {
    width: 300px;
    height: 200px;
    font-size: 15px;
    font-weight: bolder;
    background-color: rgba(227, 0, 0, 0.855);
}

.Challenge:hover {
    background-color: rgba(185, 1, 1, 0.838);
}

.Challenge-running {
    width: 300px;
    height: 200px;
    font-size: 15px;
    font-weight: bolder;
    background-color: rgb(214, 169, 4);
}

.Challenge-running:hover {
    background-color: rgb(175, 138, 4);
}

.Challenge.beatable {
    background-color: rgb(30, 135, 135);
}

.Challenge.beatable:hover {
    background-color: rgba(0, 142, 140, 0.9);
}

.Challenge-completed {
    width: 300px;
    height: 200px;
    font-size: 15px;
    font-weight: bolder;
    background-color: rgb(1, 218, 27);
}

.Challenge-completed:hover {
    background-color: rgba(0, 189, 0, 0.9);
}

#Challenge5,
#Challenge6 {
    display: none;
}

#Challenge5.show,
#Challenge6.show {
    display: block;
}

#Guide {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

#Guide-grid {
    width: 900px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.Buildings-guide,
.Upgrades-guide,
.Equations-guide {
    padding-top: 10px;
}

.Linear-essence-guide,
.Linear-chals-guide,
.Polygons-guide,
.Tangent-guide {
    display: none;
}

.Linear-essence-guide.unlocked,
.Linear-chals-guide.unlocked,
.Polygons-guide.unlocked,
.Tangent-guide.unlocked {
    display: block;
    padding-top: 10px;
    color: rgb(8, 224, 84);
}

.Building-automation {
    display: none;
}

.Building-automation.unlocked {
    display: block;
}

#Polygons-tab {
    width: 150px;
    height: 30px;
    padding: 5px;
    background-color: rgba(14, 203, 58, 0.801);
    border: 2px solid rgb(56, 116, 56);
    color: white;
    justify-content: center;
    align-items: center;
    display: none;
}

#Polygons-tab.show {
    display: flex;
}

#polygoncanvas {
    visibility: hidden;
}

#polygoncanvas.show {
    visibility: visible;
}

#polygon-info {
    position: absolute;
    left: 50%;
    top: 50%; 
    margin-left: -250px; 
    margin-top: 150px;
}

#polygon-info.hide {
    visibility: hidden;
}

#Polygon-amount {
    position: absolute;
    left: 50%;
    top: 50%; 
    margin-left: -135px; 
    margin-top: 445px;
    visibility: hidden;
}

#Polygon-amount.show {
    visibility: visible;
}

#Dimensions {
    width: 380px;
    position: absolute;
    right: 0;
    margin-right: 160px;
    top: 10;
    visibility: hidden;
}

#Dimensions.show {
    visibility: visible;
}

#Polygon-boosts {
    width: 390px;
    position: absolute;
    right: 0;
    margin-right: 160px;
    top: 200;
    visibility: hidden;
}

#Polygon-dimension {
    width: 260px;
    text-align: center;
    font-size: 18px;
}

#Polygon-boosts.show {
    visibility: visible;
}

#Polytope-boosts,
#Polytop-boost1,
#Polytop-boost2,
#Polytop-boost3 {
    display: none;
}

#Polytope-boosts.show,
#Polytop-boost1.show,
#Polytop-boost2.show,
#Polytop-boost3.show {
    display: block;
}

#Buyables {
    position: absolute;
    left: 0;
    margin-left: 200px;
    margin-top: 10px;
    display: none;
}

#Buyables.show {
    display: block;
}

.buyable {
    width: 260px;
    height: 170px;
    padding: 5px;
    font-size: 15px;
    font-weight: bolder;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-color: rgba(125, 125, 125, 0.855);
}

.buyable.available {
    background-color: rgb(61, 65, 117);
}

#Height,
#W-axis,
#V-axis {
    display: none;
}

#Height.show,
#W-axis.show,
#V-axis.show {
    display: block;
}

#Tangent-tab {
    width: 150px;
    height: 30px;
    padding: 5px;
    background-color: rgba(14, 203, 58, 0.801);
    border: 2px solid rgb(56, 116, 56);
    color: white;
    justify-content: center;
    align-items: center;
    display: none;
}

#Tangent-tab.show {
    display: flex;
}

#Power-of-pi {
    width: 300px;
    position: absolute;
    top: 10;
    left: 0;
    margin-left: 200px;
    text-align: center;
}

#Pi-power-boost,
#pip-boost {
    display: none;
}

#Pi-power-boost.show,
#pip-boost.show {
    display: block;
}

.pi-milestones {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 5px;
}

.pi-milestone1,
.pi-milestone2 {
    width: 200px;
    height: 80px;
    font-size: 12px;
    display: grid;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    background-image: linear-gradient(90deg, rgb(73, 73, 73), rgb(26, 26, 26));
    margin-bottom: 5px;
}

.pi-milestone-gotten {
    width: 200px;
    height: 80px;
    font-size: 12px;
    display: grid;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    background: linear-gradient(90deg, rgb(33, 56, 33)), rgb(26, 26, 26);
    margin-bottom: 5px;
}

#pic-name {
    font-size: 15px;
    font-weight: bold;
}

.pi-challenge {
    width: 300px;
    height: 120px;
    font-size: 13px;
    display: grid;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    background-image: linear-gradient(90deg, rgb(131, 131, 131), rgb(78, 110, 100));
    border: 2px solid rgb(59, 8, 8);
    box-shadow: 0 0 5px rgb(126, 3, 3);
    margin-top: 10px;
}

.pi-challenge:hover {
    background-image: linear-gradient(90deg, rgb(94, 94, 94), rgb(68, 114, 99));
    cursor: pointer;
    box-shadow: 0 0 5px rgb(170, 5, 5);
}

#Tangent {
    width: 500px;
    position: absolute;
    top: 10;
    left: 50%;
    margin-left: -250px;
    text-align: center;
}

#Equation-of-Tangent {
    width: 300px;
    position: absolute;
    top: 10;
    right: 0;
    margin-right: 200px;
    text-align: center;
}

#Tangent-upgrades {
    width: 500px;
    margin-top: 5px;
}

#Tus {
    display: flex;
    justify-content: center;
    gap: 2px;
}

.Tup {
    width: 250px;
    height: 100px;
    background-color: rgb(2, 27, 34);
    border: 2px solid rgb(28, 92, 92);
    font-size: 13px;
    padding: 5px;
    display: grid;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
}

.Tup:hover {
    background-color: rgb(8, 42, 58);
    border: 2px solid rgb(51, 114, 114);
    cursor: pointer;
}

.Tup.bought {
    width: 250px;
    height: 100px;
    background-color: rgb(10, 107, 62);
    border: 2px solid rgb(10, 88, 36);
    font-size: 13px;
    padding: 5px;
    display: grid;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
}

#Circle-arcs {
    width: 500px;
    text-align: center;
    display: none;
}

#Circle-arcs.show {
    display: block;
}

#Circle-arcs-formula,
#Circle-arcs-tf {
    display: none;
}

#Circle-arcs-formula.show,
#Circle-arcs-tf.show {
    display: block;
}

#CA {
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
}

#alpha-buyer,
#radius-buyer {
    width: 220px;
    height: auto;
    font-size: 14px;
    margin: 3px;
    background-color: rgb(7, 78, 5);
    border: 2px solid rgb(29, 117, 29);
}

#alpha-buyer:hover,
#radius-buyer:hover {
    background-color: rgb(11, 110, 8);
    border: 2px solid rgb(53, 151, 53);
}

#EoT-c-btn,
#EoT-x-btn {
    width: 200px;
    height: 40px;
    font-size: 14px;
    background-color: rgb(87, 4, 87);
    border: 2px solid rgb(138, 14, 138);
} 

#EoT-x-buyer {
    display: none;
}

#EoT-x-buyer.show {
    display: block;
}

#EoT-c-btn:hover,
#EoT-x-btn:hover {
    background-color: rgb(71, 3, 71);
    border: 2px solid rgb(104, 31, 104);
}

#EoT-boost {
    font-size: 13px;
}

#Non-pi-dimension-main,
#pi-dimension-main.show,
#pi-dimension-upgrades.show {
    display: block;
}

#Non-pi-dimension-main.hide,
#Non-pi-dimension-upgrades.hide,
#pi-dimension-main,
#pi-dimension-upgrades {
    display: none;
}

.Inventors {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-left: 200px;
    margin-right: 200px;
}

#Inventor1 {
    width: 350px;
    padding: 5px;
    position: relative;
    background-color: rgb(88, 88, 36);
    border: 2px solid yellow;
    margin: 0;
}

#Inventor2 {
    width: 350px;
    padding: 5px;
    position: relative;
    background-color: rgb(134, 112, 13);
    border: 2px solid orange;
    margin: 0;
}

#Inventor3 {
    width: 350px;
    padding: 5px;
    position: relative;
    background-color: rgb(32, 32, 32);
    border: 2px solid rgb(49, 49, 49);
    display: grid;
    justify-content: center;
    align-content: center;
    margin: 0;
}

#Inventor4 {
    width: 350px;
    height: 150px;
    padding: 5px;
    position: relative;
    background-color: rgb(138, 0, 0);
    border: 2px solid rgb(255, 51, 51);
    display: grid;
    justify-content: center;
    align-content: center;
    margin: 0;
}

#Inventor5 {
    width: 350px;
    padding: 5px;
    position: relative;
    background-color: rgb(160, 160, 160);
    border: 2px solid rgb(121, 121, 121);
    display: grid;
    justify-content: center;
    align-content: center;
    margin: 0;
}

.Inventor-cost {
    width: 250px;
    background-color: yellowgreen;
    border: 2px solid rgb(10, 61, 10);
}

.Papirus-maker-cost {
    width: 250px;
    background-color: rgb(95, 147, 216);
    border: 2px solid rgb(29, 43, 92);
}

.Water-worker-cost {
    width: 250px;
    background-color: rgb(2, 2, 49);
    border: 2px solid rgb(21, 21, 87);
    color: white;
}

.Line-maker-cost {
    width: 250px;
    background-color: rgb(8, 8, 8);
    border: 2px solid rgb(37, 37, 37);
    color: white;
}

.Miners-cost {
    width: 250px;
    background-color: rgb(124, 33, 33);
    border: 2px solid brown;
}

.Shape-maker {
    width: 250px;
    background-color: rgb(121, 255, 121);
    border: 2px solid rgb(50, 255, 50);
}

.Mathematical-instruments-maker {
    width: 250px;
    background-color: rgb(8, 8, 8);
    border: 2px solid rgb(37, 37, 37);
    color: white;
}

.Metal-maker {
    width: 250px;
    background-color: silver;
    border: 2px solid white;
}

#tmp-t {
    font-size: 25px;
    color: rgb(57, 192, 192);
    font-weight: bolder;
    margin-bottom: 15px;
    text-shadow: 0 0 5px rgb(66, 253, 253), 0 0 10px rgb(38, 255, 255), 0 0 15px rgb(19, 255, 255), 0 0 15px rgb(8, 255, 255),
     0 0 20px rgb(1, 226, 226);
}

#tmp-row1 {
    display: flex;
    justify-content: center;
    gap: 5px;
}

#tmp-row2 {
    display: none;
    justify-content: center;
    gap: 5px;
}

#tmp-row2.show {
    display: flex;
}

.Tmp-cost {
    width: 300px;
    height: 130px;
    font-size: 13px;
    background-color: rgba(226, 40, 8, 0.925);
    border: 2px solid rgb(167, 20, 9);
    margin-bottom: 10px;
}

.Tmp-cost.buy {
    width: 300px;
    height: 130px;
    font-size: 13px;
    background-color: rgb(78, 78, 252);
    border: 2px solid blue;
    margin-bottom: 10px;
}

.Tmp-cost.bought {
    width: 300px;
    height: 130px;
    font-size: 13px;
    background-color: rgb(16, 165, 211);
    border: 2px solid rgb(0, 255, 191);
    margin-bottom: 10px;
}

#circle-sub-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

#circle-sub-tab {
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(134, 134, 61);
    border: 2px solid rgb(127, 163, 55);
}

#circle-sub-tab:hover,
#plate-sub-tab {
    cursor: pointer;
}

#plato-sub-tab {
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(134, 134, 61);
    border: 2px solid rgb(127, 163, 55);
    display: none;
}

#plato-sub-tab.show {
    display: block;
}

#inventorequationtab {
    width: 200px;
    display: none;
    justify-content: center;
    align-items: center;
    height: 50px;
    background-color: rgb(20, 196, 137);
    border: 2px solid rgb(26, 150, 150);
}

#inventorequationtab.show {
    display: flex;
}

.values-of-the-circle {
    width: 350px;
    height: 100px;
    display: grid;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
}

#IE-boost,
#IE-equation {
    margin-left: 200px;
    margin-right: 200px;
}

#IE-upgrades {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.IE-cost {
    width: 300px;
    height: 130px;
    font-size: 13px;
    display: grid;
    justify-content: center;
    align-content: center;
    background-color: rgb(209, 77, 24);
    position: relative;
    border-radius: 5px;
}

.IE-cost:hover {
    cursor: pointer;
    background-color: rgb(172, 69, 0);
}

#inner-IE-styles {
    width: 230px;
    height: 90px;
    z-index: -1;
    background-color: rgb(197, 72, 23);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -115px;
    margin-top: -45px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgb(194, 66, 15);
}

#IE-name,
#IE-desc,
#IE-cost1,
#IE-cost2,
#IE-cost3 {
    z-index: 0;
}

#alpha-amount,
#radius-amount {
    width: auto;
    height: 50px;
    display: flex;
    justify-content: center;
}

#angle-amount,
#tradius-amount {
    margin-top: 14px;
}

#guide-tabs {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
}

#guide-sub-tab {
    width: 100px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    background-color: rgb(59, 59, 59);
}

#guide-sub-tab:hover {
    cursor: pointer;
    background-color: rgb(43, 43, 43);
}