html{
    background-color: black;
    width: 100%;
    height: 100%;
    margin: 0px;
}
body{
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0px;
    > canvas{
        margin: 0px;
    }
}
button{
    cursor: pointer;
}
.mainBtn{
    position: relative;
    border-radius: 1vh;
    font-size: 3vh;
    font-family: 'Agdasima';
    font-weight: bold;
    transition: all 0.3s ease;
}
.mainBtn::after {
    content: '';
    position: absolute;
    background: linear-gradient(180deg,rgba(66, 149, 61, 0) 0%, rgba(66, 149, 61, 0) 64%, rgba(0, 0, 0, 0.35) 65%);
    border-radius: 1vh;
    left: -1vh;
    bottom: -1vh;
    top: -1vh;
    right: -1vh;
}

#pauseUI{
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #00000091;
    > *{
        position: absolute;
    }
    #title{
        justify-self: center;
        color: white;
        font-size: 12vh;
        font-family: 'Agdasima';
        font-weight: bold;

        background: linear-gradient(to bottom, #ffffff, #ffffff, #989898, #00000000);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        
        /* For Firefox */
        background-clip: text;
        color: transparent;
    }
    #titleOutline{
        justify-self: center;
        color: transparent;
        font-size: 12vh;
        font-family: 'Agdasima';
        font-weight: bold;
        --shadowSize: 8px;
        text-shadow: 
        #000 0px 0px var(--shadowSize), 
        #000 0px 0px var(--shadowSize), 
        #000 0px 0px var(--shadowSize),
        #000 0px 0px var(--shadowSize),
        #000 0px 0px var(--shadowSize),
        #000 0px 0px var(--shadowSize);
    }
    .menu {
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
        flex-wrap: nowrap;
        position: absolute;
        background-color: #7c7c7c;
        border: solid 0.5vh white;
        justify-self: center;
        align-self: anchor-center;
        width: 30%;
        height: 70%;
        border-radius: 2vh;
        box-shadow: 0px 0px 10px white, inset 0px 0px 10px #434343;
        .pauseText{
            font-family: 'Agdasima';
            font-size: 5vh;
            font-weight: bold;
            color: white;
            text-align: center;
            display: block;
            line-height: 6vh;
        }
        .menuBtn{
            margin-top: auto;
            width: 80%;
            height: 7vh;
            margin-bottom: 3vh;
            border: solid 1vh #42953D;
            background-color: #58C752;
            color: #000000;
        }
        .menuBtn:hover{
            font-size: 4vh;
            border: solid 1vh #52bb4c;
            background-color: #66e65f;
        }
        .button2{
            border: solid 1vh #613d95;
            background-color: #7852c7;
        }
        .button2:hover{
            border: solid 1vh #8a57d4;
            background-color: #9466f4;
        }

    }
}

#levelUpBtn{
    position: absolute;
    top: calc(100vh - 15vh);
    width: 10vw;
    height: 7vh;
    border: solid 1vh #3d8f95;
    background-color: #52c7c7;
    color: #000000;
    margin-left: 1vw;
    margin-top: -1vw;
}
#levelUpBtn:hover{
    font-size: 4vh;
    border: solid 1vh #51bdc5;
    background-color: #5de7e7;
}
#upgradeBtn{
    position: absolute;
    top: calc(100vh - 7vh);
    width: 10vw;
    height: 7vh;
    border: solid 1vh #3d8f95;
    background-color: #52c7c7;
    color: #000000;
    margin-left: 1vw;
    margin-top: -1vw;
}
#upgradeBtn:hover{
    font-size: 4vh;
    border: solid 1vh #51bdc5;
    background-color: #5de7e7;
}

.levelUp{
    width: 90%;
    background-color: black;
    margin: 5px;
    height: 4vh;
    border-radius: 2vh;
    display: flex;
    flex-direction: row;
    align-content: center;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    padding-left: 0.5vh;
    padding-right: 0.5vh;
    gap: 0.5vh;
    > .tab{
        width: 100%;
        height: calc(100% - 1vh);
        background-color: #7c7c7c;
        border-radius: 2vh;
    }
    .tab:has(+ .tab){
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    .tab + .tab {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }
    /* .tab + .tab:has(+ .tab) { } /* both */

}
.levelUpText{
    font-family: 'Agdasima';
    font-size: 3vh;
    color: white;
    margin-bottom: -0.6vh;
}
.incLevelUp{
    border: none;
    background-color: #4e4e4e !important;
    color: white;
    font-size: 3vh;
    text-align: center;
    padding: 0px;
    font-weight: bold;
    text-shadow: 0 0 0px white;
    transition: all 0.1s ease;
}
.incLevelUp:hover{
    text-shadow: 0 0 4px white;
}

.bar {
    position: absolute;
    background: linear-gradient(90deg, rgb(113 113 113) 0%, rgba(85, 85, 85, 1) 100%);
    font-size: 3vh;
    color: white;
    font-family: 'Agdasima';
    font-weight: bold;
    justify-self: center;
    width: 10vw;
    height: 4vh;
    text-align: center;
    border-radius: 2vh;
    > div:nth-child(1){
        position: relative;
        z-index: 1;
    }
    > div:nth-child(2){
        position: absolute;
        height: calc(100% - 1vh);
        top: 0.5vh;
        left: 0.5vh;
        border-radius: 2vh;
    }
}
#levelBar {
    top: calc(100vh - 9vh);
    > div:nth-child(2){
        background-color: #58C752;
        width: calc(100% - 1vh);
    }
}
#pointsBar {
    top: calc(100vh - 4.5vh);
    width: calc(100vw / 2);
    > div:nth-child(2){
        width: calc(100%);
        background: linear-gradient(to right, #614B02, #E7D04A);
        background-size: calc(100vw / 2 - 0.5vw) 100%;
        background-repeat: no-repeat;
        background-position: left center;
    }
}

.checkbox{
    display: flex;
    font-family: 'Agdasima';
    color: white;
    font-size: 3vh;
    > div {
        pointer-events: none;
        display: flex;
        z-index: 1;
    }

    > div > div {
        pointer-events: none;
        content: '';
        width: 2.5vh;
        height: 2.5vh;
        margin: 0px;
        margin-right: 1vh;
        border-radius: 1vh;
        border: solid 0.5vh #0074b2;
        background-color: #00a6ff;
        font-family: sans-serif;
        font-size: 3vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    > div > div::after {
        content: 'X';
        color: transparent;
        position: absolute;
        background: linear-gradient(180deg, rgba(66, 149, 61, 0) 0%, rgba(66, 149, 61, 0) 64%, rgb(0 0 0 / 22%) 65%);
        border-radius: 1vh;
        width: 3.3vh;
        height: 3.3vh;
        font-family: monospace;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

    input:checked ~ div > div::after{
        text-shadow: 0 0 0px white;
    }
    input:not(:checked) ~ div > div::after{
        text-shadow: 0 0 20px transparent;
    }

    > input{
        appearance: none; /* Remove default styling */
        -webkit-appearance: none; /* For Safari */
        -moz-appearance: none; /* For Firefox */
        position: absolute;
        margin: 0px;
        width: 3.5vh;
        height: 3.5vh;
    }
}

#upgradeDiv{
    width: 100%;
    flex-grow: 1;
    > .upgrade{
        position: absolute;
        border: solid 0.5vh transparent;
        border-radius: 1vh;
        box-shadow: none;
        transition: all 0.3s;
        color: transparent;
    }
    > :not(.locked).upgrade:hover{
        border: solid 0.5vh #ffffff;
        border-radius: 1vh;
        box-shadow: 0px 0px 10px white, inset 0px 0px 10px #434343;
        color: transparent;
    }
    > .locked.upgrade:hover{
        border: solid 0.5vh #b3b3b3;
        border-radius: 1vh;
        box-shadow: 0px 0px 10px #b3b3b3, inset 0px 0px 10px #434343;
        color: rgb(185, 185, 185);
    }
    > .locked::after {
        content: "Required:\aLevel N";
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 2;
        border-radius: 0.5vh;
        background: url("lock.svg") center / 5vh 5vh no-repeat, rgba(0,0,0,0.4);
        
        font-family: 'Agdasima';
        font-size: 2vh;
        font-weight: bold;
        text-align: center;
    }

    --bodySize: 6vh;
    --size: 6vh;
    --outline: 0.5vh;
    --gunLen: 5vh;
    --gunWidth: 3.2vh;

    .body {
        z-index: 1;
        background-color: #00B2E1;
        width: var(--size);
        height: var(--size);
        border: solid var(--outline) #0085A8;
        border-radius: var(--size);
        position: absolute;
    }
    .gunFront1 {
        width: var(--gunLen);
        height: var(--gunWidth);
        background-color: #999999;
        border: solid var(--outline) #727272;
        border-radius: 0.5vh;
        position: absolute;
        transform: translate(calc(var(--size) - (var(--gunLen) / 1.8)), calc((var(--size) / 2) - (var(--gunWidth)/ 2)));
    }
    
    #upgrade0 {
        --w: calc(var(--size) + (var(--gunWidth) / 2) + (var(--outline) * 3));
        --h: calc(var(--size) + (var(--outline) * 2));
        width: var(--w);
        height: var(--h);

        left: calc(50% - (var(--w) / 2));
        top: calc(60%);
    }

    > #upgrade0{

        --size: 6vh;
        --outline: 0.5vh;
        --gunWidth: 3.2vh;
        --gunLen: 5vh;
        
        --w: calc(var(--size) + (var(--gunWidth) / 2) + (var(--outline) * 3));
        --h: calc(var(--size) + (var(--outline) * 2));
        width: var(--w);
        height: var(--h);

        left: calc(50% - (var(--w) / 2));
        top: calc(60%);

        >.body{
            z-index: 1;
            background-color: #00B2E1;
            width: var(--size);
            height: var(--size);
            border: solid var(--outline) #0085A8;
            border-radius: var(--size);
            position: absolute;
        }
        > .gun1{
            width: var(--gunLen);
            height: var(--gunWidth);
            background-color: #999999;
            border: solid var(--outline) #727272;
            border-radius: 0.5vh;
            position: absolute;
            transform: translate(calc(var(--size) - (var(--gunLen) / 1.8)), calc((var(--size) / 2) - (var(--gunWidth)/ 2)));
        }
    }
    > #upgrade1{

        --size: 6vh;
        --outline: 0.5vh;
        --gunWidth: 2.2vh;
        --gunLen: 5vh;
        
        --w: calc(var(--size) + (var(--gunWidth) / 2) + (var(--outline) * 4));
        --h: calc(var(--size) + (var(--outline) * 2));
        width: var(--w);
        height: var(--h);

        left: calc(35% - (var(--w) / 2));
        top: calc(40%);

        >.body{
            z-index: 1;
            background-color: #00B2E1;
            width: var(--size);
            height: var(--size);
            border: solid var(--outline) #0085A8;
            border-radius: var(--size);
            position: absolute;
        }
        > .gun1{
            width: var(--gunLen);
            height: var(--gunWidth);
            background-color: #999999;
            border: solid var(--outline) #727272;
            border-radius: 0.5vh;
            position: absolute;
            transform: translate(calc(var(--size) - (var(--gunLen) / 1.8)), calc((var(--size) / 4) - (var(--gunWidth)/ 2)));
        }
        > .gun2{
            width: var(--gunLen);
            height: var(--gunWidth);
            background-color: #999999;
            border: solid var(--outline) #727272;
            border-radius: 0.5vh;
            position: absolute;
            transform: translate(calc(var(--size) - (var(--gunLen) / 1.8)), calc((var(--size) / 1.3) - (var(--gunWidth)/ 2)));
        }
    }
    > #upgrade1::after { content: "Required:\aLevel 5"; }
    > #upgrade2{

        --size: 6vh;
        --outline: 0.5vh;
        --gunWidth: 5vh;
        --gunLen: 5vh;
        
        --w: calc(var(--size) + (var(--gunWidth) / 2) + (var(--outline) * 2));
        --h: calc(var(--size) + (var(--outline) * 2));
        width: var(--w);
        height: var(--h);

        left: calc(65% - (var(--w) / 2));
        top: calc(40%);

        >.body{
            z-index: 1;
            background-color: #00B2E1;
            width: var(--size);
            height: var(--size);
            border: solid var(--outline) #0085A8;
            border-radius: var(--size);
            position: absolute;
        }
        > .gun1{
            width: var(--gunLen);
            height: var(--gunWidth);
            background-color: #999999;
            border: solid var(--outline) #727272;
            border-radius: 0.5vh;
            position: absolute;
            transform: translate(calc(var(--size) - (var(--gunLen) / 1.8)), calc((var(--size) / 2) - (var(--gunWidth)/ 2)));
        }
    }
    > #upgrade2::after { content: "Required:\aLevel 5"; }
    > #upgrade3{

        --size: 6vh;
        --outline: 0.5vh;
        --gunWidth: 3.2vh;
        --gunLen: 10vh;
        
        --w: calc(var(--size) + (var(--gunLen) / 2) + (var(--outline) * 1));
        --h: calc(var(--size) + (var(--outline) * 2));
        width: var(--w);
        height: var(--h);

        left: calc(50% - (var(--w) / 2));
        top: calc(15%);

        >.body{
            z-index: 1;
            background-color: #00B2E1;
            width: var(--size);
            height: var(--size);
            border: solid var(--outline) #0085A8;
            border-radius: var(--size);
            position: absolute;
        }
        > .gun1{
            width: var(--gunLen);
            height: var(--gunWidth);
            background-color: #999999;
            border: solid var(--outline) #727272;
            border-radius: 0.5vh;
            position: absolute;
            transform: translate(calc(var(--size) - (var(--gunLen) / 1.8)), calc((var(--size) / 2) - (var(--gunWidth)/ 2)));
        }
    }
    > #upgrade3::after { content: "Required:\aLevel 10"; }
}