body {
	--r1: 4px;
	--r2: calc(var(--r1) * 2);
	--r3: calc(var(--r1) * 3);
	--r4: calc(var(--r1) * 4);
	--r5: calc(var(--r1) * 5);
	--r6: calc(var(--r1) * 7);
	--r7: calc(var(--r1) * 10);
	--r8: calc(var(--r1) * 15);
	--r9: calc(var(--r1) * 25);
	--r10: calc(var(--r1) * 40);
	--r11: calc(var(--r1) * 60);
	--base-size: 9px;
	--scale-factor: 1.6180339887;
	--s1: calc(var(--base-size) * 1);
	--s2: calc(var(--s1) * var(--scale-factor));
	--s3: calc(var(--s2) * var(--scale-factor));
	--s4: calc(var(--s3) * var(--scale-factor));
	--s5: calc(var(--s4) * var(--scale-factor));
	--s6: calc(var(--s5) * var(--scale-factor));
	--s7: calc(var(--s6) * var(--scale-factor));
	--s8: calc(var(--s7) * var(--scale-factor));
}
body {
    --main-bg: #fff;
    --main-fg: #000;
    --header-bg: rgb(126, 13, 13);
    --circle-bg: #222;
}
body.dark {
    --main-bg: #000;
    --main-fg: #fff;
}
body {
    margin: 0 !important;
    background-color: var(--main-bg);
    color: var(--main-fg);
    font-family: 'Roboto Mono',sans-serif;
    overflow: hidden;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}
.header-div {
    right: 0;
    display: flex;
    width: 100vw;
    justify-content: space-between;
    align-items: center;
    background-color: var(--header-bg);
    height: 100px;
    position: relative;
}
.header-div::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: -3px;
    width: calc(100% + 6px);
    height: 15px;
    background: linear-gradient(90deg,#002bff);
    z-index: -1;
    filter: blur(10px);
}
.webLink {
    margin: 0 30px;
}
img#birdLogo {
    --size: 64px;
    height: var(--size);
    width: var(--size);
}
.points-div {
    display: flex;
    flex-direction: row;
    margin-right: -20px;
    color: #fff;
}
#pointsOut {
    margin-left: var(--r1);
}
.darkButton-div {
    --lHeight: 25px;
    --width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--lHeight);
    font-weight: 600;
    font-size: calc(var(--s2) * 1.1);
    margin-right: var(--r3);
    width: var(--width);
    cursor: pointer;
    letter-spacing: 1.7px;
    background-color: var(--main-bg);
    border: 3px solid var(--main-fg);
    border-radius: 25px;
    position: relative;
    transition: 0.4s ease;
}
#darkButtonCircle {
    --rad: var(--lHeight);
    position: absolute;
    background-color: var(--main-fg);
    border-radius: 100px;
    height: var(--rad);
    width: var(--rad);
    top: -1px;
    right: -1px;
    transition: 0.4s ease;
    border: 2px solid var(--main-fg);
}
body.dark #darkButtonCircle {
    transform: translateX(-95px);
}
#screenblocker {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: var(--s4);
    justify-content: center;
    align-items: center;
    background-color: var(--main-bg);
    color: var(--main-fg);
    z-index: 1000;
}
@media (max-height: 749px) {
    #screenblocker {
        display: flex;
    }
}
@media (max-width: 899px) {
    #screenblocker {
        display: flex;
    }
}
.main-div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 140px 0 0 0;
    width: 100%;
    height: 100%;
}
.main {
    height: 500px;
    width: calc(100% - calc(22vw - 44px));
    border-radius: 15px;
    display: grid;
    grid-template-areas:
    "left right";
    gap: 10px;
}
.left {
    grid-area: left;
    position: relative;
    width: calc(50vw - calc(calc(22vw - 44px) / 2));
}
.right {
    grid-area: right;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 15px;
    width: calc(50vw - calc(calc(22vw - 44px) / 2));
}
#circle::after {
    content: "";
    position: absolute;
    --rad: 250px;
    height: var(--rad);
    width: var(--rad);
    border-radius: 1000px;
    background-color: var(--circle-bg);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
    z-index: 1;
}
#circle {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.3), 0 12px 40px 0 rgba(0, 0, 0, 0.3);
    position: absolute;
    --rad: 260px;
    height: var(--rad);
    width: var(--rad);
    border-radius: 1000px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
    z-index: 0;
    background: linear-gradient(45deg,#FF0000, #FF7300, #FFFB00, #48FF00, #00FFD5, #002BFF, #FF00C8, #FF0000);
    background-size: 600%;
    animation: glowing 20s linear infinite;
    transition: opacity .3s ease-in-out;
}
#pps {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
    white-space: nowrap;
    color: #fff;
}
body.dark #circle {
    box-shadow: none;
}
@keyframes glowing {
    0% {background-position: 0 0;}
    50% {background-position: 400% 0;}
    100% {background-position: 0 0;}
}
.buyItemClass::after {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    background: linear-gradient(45deg,#FF0000, #FF7300, #FFFB00, #48FF00, #00FFD5, #002BFF, #FF00C8, #FF0000);
    background-size: 600%;
    animation: glowing 20s linear infinite;
    transition: opacity .3s ease-in-out;
    z-index: -1;
    border-radius: 15px;
}
.floatingElement {
    position: absolute;
    pointer-events: none;
    animation: floatUp 1s ease-out forwards;
    color: #fff;
    z-index: 4;
}
@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-71px);
    }
}
.buyItemClass {
    background-color: var(--circle-bg);
    height: 100%;
    border-radius: 15px;
    position: relative;
    cursor: pointer;
    color: #fff;
    font-family: 'Roboto',sans-serif;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.3), 0 12px 40px 0 rgba(0, 0, 0, 0.3);
}
body.dark .buyItemClass {
    box-shadow: none;
}
.buyItemTitle {
    font-size: var(--s3);
    font-weight: 500;
    letter-spacing: 3px;
    margin-top: var(--r1);
    text-align: center;
}
.buyItemPrice {
    margin: var(--r1) 0 0 var(--r2);
}
.buyItemProductionSpeed {
    text-align: center;
    margin: var(--r1) 0 0 0;
}
.buyItemOwned {
    display: flex;
    justify-self: flex-end;
    margin: -41px var(--r2) 0 0;
    text-align: right;
}
.buyItemClass.buyable {
    background-color: unset;
}