@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

h1 {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;

}

p {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
}

:root {
    --HEIGHT: 700px;
    --WIDTH: 1000px;
    --MAPHEIGHT: 1500px;
    --MAPWIDTH: 1500px;
}

body {
    margin: 0;
    display: flex;
    overflow: hidden;
}

#game-container {
    height: var(--HEIGHT);
    width: var(--WIDTH);
    position: relative;
    margin: calc((100vh - var(--HEIGHT)) / 2) auto;
}

#shadow-box {
    z-index: 1;
    height: var(--HEIGHT);
    width: var(--WIDTH);
    position: relative;
    pointer-events: none;
    box-shadow: 0 4px 8px 0 #00000033, 0 6px 20px 0 #00000030;
}

.bg-cover {
    z-index: 1;
    position: absolute;
    background-color: white;
}

.bg-cover:nth-child(1) {
    top: 0;
    left: 0;
    width: calc((100vw - var(--WIDTH)) / 2);
    height: 100%;
}

.bg-cover:nth-child(2) {
    top: 0;
    width: 100%;
    height: calc((100vh - var(--HEIGHT)) / 2);
}

.bg-cover:nth-child(3) {
    top: 0;
    right: 0;
    height: 100%;
    width: calc((100vw - var(--WIDTH)) / 2);
}

.bg-cover:nth-child(4) {
    bottom: 0;
    width: 100%;
    height: calc((100vh - var(--HEIGHT)) / 2);
}

.black {
    background-color: black;
}

#menu-btn {
    position: absolute;
    top: 10px;
    left: 20px;
    width: 50px;
    height: 50px;
    background-color: #6085ab;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
}

#menu-btn p {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 15px;
}

#ktka-bar {
    position: absolute;
    top: 80px;
    left: 20px;
    width: 50px;
    height: calc(var(--HEIGHT) - 100px);
    background-color: #6085ab;
    border-radius: 20px;
    /* background-image: url(../images/ktkabar.jpeg);
    background-position-y: bottom;
    background-size: 30px 10px;
    background-repeat: no-repeat; */
}

#ktka-bar #fill {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 19px;
    border-radius: 20px;
    background-color: #284714;
}

#ktka-value {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 50px;
    height: 55px;
    background-color: #6085ab;
    border-radius: 20px;
    text-align: center;
    transition-duration: 200ms;
    visibility: hidden;
    overflow: hidden;
}

#ktka-bar-wrapper:hover #ktka-value, #ktka-bar-wrapper.active #ktka-value {
    visibility: visible;
    width: 193px;
}

#ktka-value p:first-child {
    position: absolute;
    top: 8px;
    right: 12px;
    margin: 0;
    font-size: 12px;
}

#ktka-value p:last-child {
    position: absolute;
    bottom: 5px;
    right: 80px;
    margin: 0;
    font-size: 15px;
}

#lvl-name {
    position: absolute;
    top: 0px;
    left: calc(var(--WIDTH) / 2 - 80px);
    width: 160px;
    height: 47px;
    background-color: #6085ab;
    border-radius: 0px 0px 25px 25px;
    text-align: center;
}

#lvl-name p {
    margin-top: 2px;
    font-size: 34px;
}

/* #money-wrapper {
    filter: blur(4px);
} */

#money-wrapper #money-value-box {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 80px;
    height: 50px;
    background-color: #6085ab;
    border-radius: 10px;
    text-align: center;
}

#money-wrapper #money-increment-box > p {
    margin-top: 15px;
}

#money-wrapper #money-increment-box {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 80px;
    height: 50px;
    background-color: #6085ab;
    border-radius: 10px;
    text-align: center;
    transition-duration: 120ms;
    visibility: hidden;
}

#money-wrapper:hover #money-increment-box, #money-wrapper.active #money-increment-box {
    visibility: visible;
    top: 40px;
}

.ui-element#stats {
    position: absolute;
    bottom: 0;
    left: calc(var(--WIDTH) / 2 - 300px);
    width: 600px;
    height: 50px;
    background-color: #6085ab;
    border-radius: 25px 25px 0 0;
    text-align: center;}

#map {
    position: absolute;
    height: var(--MAPHEIGHT);
    width: var(--MAPWIDTH);
    background-image: url(../images/background1.jpg);
    display: grid;
}

#map > div {
    /* border: 2px solid red; */
    pointer-events: none;
}

#map > div .building {
    pointer-events: auto;
}

.menu {
    visibility: hidden;
    position: absolute;
    top: 50px;
    left: 100px;
    width: 800px;
    z-index: 1;
    height: 600px;
    border-radius: 20px;
    background-color: #436b94
}

.menu .close {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    width: 20px;
    text-align: center;
    cursor: pointer;
}

.menu > h1 {
    position: absolute;
    top: 20px;
    left: 20px;
    margin: 0;
}

.blurred {
    filter: blur(4px);
    transition-duration: 100ms;
}

.menu #button-container {
    position: absolute;
    top: 90px;
    left: 10px;
    display: flex;
    flex-wrap: wrap;
}

.menu .button-box {
    border-radius: 25px;
    width: 220px;
    height: 150px;
    background: #73AD21;
    margin: 10px;
}

.menu .button-box > p {
    margin: 20px;
}

.menu .button-box:hover{
    background-color: #3e8e41;
    color: white;
}

.menu-container {
    margin-top: 100px;
    margin-left: 20px;
}

#menu-text {
    font-size: 40px;
    text-align: center;
}

#menu-header {
    font-size: 50px;
    padding-bottom: 10px;
}

#menu-icon {
    padding-top: 6px;
}

#matapopore-icon {
    padding-left: 100px;
}

.creditxt {
    position: absolute;
    height: 120px;
    top: 70px;
    left: 20px;
}

.upgrade-symbol {
    height: 120px;
	/* width: 175px; */
    position: absolute;
    pointer-events: none;
}

.upgradeable {
    cursor: pointer;
}

.house {
    height: 65px;
    /* width: 65px; */
}

.back {
    position: absolute;
    background: #73AD21;
    border-radius: 25px;
    width: 100px;
    text-align: right;
    margin-top: 20px ;
    left: 10px;
    padding-right: 10px;
    
}

.back p {
    margin: 0;

}

.back:hover {
    background-color: #3e8e41;
    color: white;
}

.cls-1 {
    stroke-miterlimit: 10;
    stroke-width: 1px;
}

.cls-1, .cls-2, .cls-3 {
    fill: #231f20;
    stroke: #231f20;
}

.cls-2 {
    stroke-miterlimit: 10;
}

.cls-3 {
    stroke-miterlimit: 10;
    stroke-width: 1px;
}

.back-arrow {
    position: absolute;
    top: 2px;
    left: 30px;
    height: 20px;
    width: 20px;
}

.settings-btn {
    background: #73AD21;
    border-radius: 25px;
    width: 100px;
    text-align: right;
    height: 200px;
    width: 200px;
    padding-right: 10px;
    margin: 10px;
}

.settings-btn:hover {
    background-color: #3e8e41;
    color: white;
}

.settings-btn p {
    margin: 0;
    font-size: 30px;
    text-align: center;
}

.back {
    position: absolute;

}

#backsettings{
    
    top: 550px;

}

#ntyet {
    opacity: 0.6;
    cursor: not-allowed;
  }