@font-face {
    font-family: HotDogsFont;
    src: url(MochiyPopPOne-Regular.woff);
}
@keyframes ArrowAnimation{
    0%{ bottom: 1250%;}
    50%{ bottom: 1400%;}
    100%{ bottom: 1250%;}
}
@keyframes HideArrow{
    0%{ display: block; opacity: 1;}
    99%{ display: block; opacity: 0;}
    100%{ display: block; opacity: 0;}
}
@keyframes ShowArrow{
    1%{ display: block; opacity: 0;}
    100%{ display: block; opacity: 1;}
}
html, 
body {
    height: 100%;
    width: 100%;
    overflow: hidden; /* Hide scrollbars */
}
body{
    background-size: 100% 100%;
    background-color:  rgb(228, 198, 65);/*rgb(217, 157, 15);*/
    background-image: linear-gradient(to bottom right, rgb(231, 182, 20), rgb(207, 139, 11));
    background-repeat: no-repeat;
    height:100vh;
}

.MainClickSection{
    position: absolute;
    top:0px;
    left:0px;
    width: 25%;
    height: 100%;
}

.BoughtItemsSection{
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
    width: 69%;
    height: 100%;
    left: 31%;
    top: 0px;
    height: 100%;
}

.ShopSection{
    position: absolute;
    top:0px;
    right:0px;
    width: 28.5%;
    height: 100%;
}



.MainClickSection::after{
    content: "";
    position: inherit;
    background-image: url('Phillar.png');
    background-repeat: no-repeat;
    background-size: 80% 100%;
    width: 45%;
    height: 100%;
    right: -45%;
    top:0px;
    z-index: 10;
}
/*
.BoughtItemsSection::after{
    content: "";
    position: inherit;
    background-image: url('Phillar.png');
    background-repeat: no-repeat;
    background-size: 80% 100%;
    width: 40%;
    height: 100%;
    right: -40%;
    top:0px;
    z-index: 10;
}*/


.MainClickClass{
    position: relative;
    display: block;
    width: 74%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 27%;
    transition: transform 100ms;
    background: transparent;
}

.Counter{
    display: block;
    width: 100%;
    margin-top: 50%;
    font-size: 25px;
    font-family: Comic Sans MS, Comic Sans, cursive;
    text-align: center;
}

.PerSecond{
    margin-bottom: 10px;
    width: 100%;
    display: block;
    font-family: Comic Sans MS, Comic Sans, cursive;
    text-align: center;
}

.BoughtItemsBooths{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    position: inherit;
    padding: 5px;
    top: 1%;
    left: 5%;
    height: 20%;
    width: 94%;
    overflow-y: auto;
}
.BoughtItemsFries{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    flex-direction: row;
    position: inherit;
    padding: 5px;
    top: 23.8%;
    left: 5%;
    height: 20%;
    width: 94%;
    overflow-y: auto;
}
.BoughtItemsSauces{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    flex-direction: row;
    position: inherit;
    padding: 5px;
    top: 46.6%;
    left: 5%;
    height: 20%;
    width: 94%;
    overflow-y: auto;
}
.BoughtItemsPickles{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    flex-direction: row;
    position: inherit;
    padding: 5px;
    top: 69.2%;
    left: 5%;
    height: 20%;
    width: 94%;
    overflow-y: auto;
}
.BoughtItemsTomatos{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    flex-direction: row;
    position: inherit;
    padding: 5px;
    top: 91.5%;
    left: 5%;
    height: 20%;
    width: 94%;
    overflow-y: auto;
}
.BoughtItemsOnions{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    flex-direction: row;
    position: inherit;
    padding: 5px;
    top: 114%;
    left: 5%;
    height: 20%;
    width: 94%;
    overflow-y: auto;
}
.BoughtItemsDrinks{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    flex-direction: row;
    position: inherit;
    padding: 5px;
    top: 136.5%;
    left: 5%;
    height: 20%;
    width: 94%;
    overflow-y: auto;
}
.BoughtItemsGrills{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    flex-direction: row;
    position: inherit;
    padding: 5px;
    top: 156.5%;
    left: 5%;
    height: 20%;
    width: 94%;
    overflow-y: auto;
}
.BoughtItemsFoodTrucks{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    flex-direction: row;
    position: inherit;
    padding: 5px;
    top: 179%;
    left: 5%;
    height: 20%;
    width: 94%;
    overflow-y: auto;
}
.BoughtItemsRestaurants{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    flex-direction: row;
    position: inherit;
    padding: 5px;
    top: 201.5%;
    left: 5%;
    height: 20%;
    width: 94%;
    overflow-y: auto;
}

.BoughtItemsBreak{
    display: none;
    position: absolute;
    background-color: brown;
    right: 0px;
    width: 120%;
    height: 1.2%;
    left: 0px;  
}
.BoughtItemsBreak.row1{
    top: 22.3%;
}
.BoughtItemsBreak.row2{
    top: 45.1%;
}
.BoughtItemsBreak.row3{
    top: 67.8%;
}
.BoughtItemsBreak.row4{
    top: 90%;
}
.BoughtItemsBreak.row5{
    top: 112.7%;
}
.BoughtItemsBreak.row6{
    top: 135.2%;
}
.BoughtItemsBreak.row7{
    top: 155.2%;
}
.BoughtItemsBreak.row8{
    top: 177.5%;
}
.BoughtItemsBreak.row9{
    top: 200.2%;
}

.BoughtItemsBooths::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

.BoughtItemsFries::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}
.BoughtItemsSauces::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

.BoughtItemsPickles::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}
.BoughtItemsTomatos::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}
.BoughtItemsOnions::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}
.BoughtItemsDrinks::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}
.BoughtItemsGrills::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}
.BoughtItemsFoodTrucks::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}
.BoughtItemsRestaurants::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}
.BlockedBG{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 0;
    margin: none;
    padding: none;
    transition: all 0.5s;
}

.ShopSection > h1{
    position: absolute;
    font-family: HotDogsFont;
    font-size: auto;
    background-color: rgb(41, 187, 107);
    padding-top: 10px;
    width: 105%;
    top: -20px;
    left: -5%;
    text-align: center;
}

.BuyButton{
    position: inherit;
    box-sizing: border-box;
    font-family: HotDogsFont;
    font-weight: 400;
    font-size: auto;
    background-color: #04AA6D;
    color: azure;
    cursor: pointer;
    border: none;
    width: 30%;
    height: 60px;
    margin-top: 50px;
    text-align: center;
    border-radius: 0px 25px 25px 0px;
    transition: background-color 0.2s, transform 0.1s;
}

.BuyButton:before{
    content:"";
    box-sizing: border-box;
    background-size: 100% 60px;
    background-position-x: right;
    background-repeat: no-repeat;
    background-origin: content-box;
	width: 35%;
    min-width: 55px;
	height: 60px;
	position:inherit;
	display:block;  
	padding-top:1px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
	top:0px;
    right: 100%;
    background-color: #058f5c;
    border-radius: 25px 0px 0px 25px;
    transition: background-color 0.2s;
}

.BuyButtonStats{
    background-color: #058556;
    position: inherit;
    top:0px;
    right: 100%;
    height: 100%;
    transform: scaleY(0);
    width: 0px;
    font-size: 0px;
    box-sizing: border-box;
    border-radius: 20px 0px 0px 20px;
    z-index: -9;
    transition: all 0.5s ease;
}

.BuyButtonStatsHelper{
    background-color: #058f5c;
    position: inherit;
    float: right;
    right: 0px;
    top:0px;
    width: 0px;
    height: 100%;
    z-index: -10;
    transition: all 0.5s ease;
}

.BuyButtonInside{
    width: 70%;
    line-height: 1.7em;
}

.BuildingAmount{
    position: inherit;
    width: 30%;
    z-index: 1;
    right: 0px;
    top: 13%;
}

.BuildingAmount:before{
    content:"";
    box-sizing: border-box;
	width: 2px;
	height: 319%;
	position:inherit;
	display:block;  
	top: -110%;
    left: 0%;
    background-color: greenyellow;
    z-index: 21;
}

.booth > .BuyButtonInside{
    font-size: 90%;
}

.booth.BuyButton:before{
    background-image:url(HotDogBooth.png);
}

.Fries.BuyButton:before{
    background-image:url(Fries.png);
}

.BuyButton:hover{
    background-color: #058f5c;
}

.BuyButton:hover > .BuyButtonStats{
    width: 100px;
    height: 100%;
    font-size: 10px;
    right: 135%;
    transform:scaleY(1);
    transition: all 0.5s 1s;
}

.BuyButton:hover > .BuyButtonStats > .BuyButtonStatsHelper{
    width: 20px;
    height: 100%;
    right: -20px;
}

.BuyButton:active{
    transform: translate(0%, 5%);
}

#MainClick:hover{
    transform: scale(1.05, 1.05);
}

#MainClick:active{
    transform: scale(1, 1);
}

#rcorners1 {
    border-radius: 25px;
    background: #cbcfc6e5;
  }



/*/////////////////////////////////////////////////////////////////////////////////////////////////////*/

.ShopSectionImproved{
  position: absolute;
  background-color: rgb(236, 211, 65);
  width: 100%;
  height: 30%;
  bottom: 0px;
  left: 0px;
  z-index: 11;
  transform: translateY(100%);
  transition: all 0.2s;
}

.ShopSectionImproved::before{
    content: "";
    display: block;
    background-color:#DB6F04;
    width: 100%;
    height: 5%;
    top: 0px;
    z-index: 12;
}
.ShopSectionImproved::after{
    content: "";
    display: block;
    position: inherit;
    background-color: black;
    width: 100%;
    right: 0px;
    height: 3px;
    top: 5%;
    z-index: 12;
}

.ShopSectionImproved > .Pause{
    background-color: #DB6F04;
    display: block;
    position: inherit;
    width: 1%;
    height: 100%;
    left: 20%;
}

.ShopSectionImproved > .Upgrades{
    display: flex;
    position: inherit;
    background-color: rgb(117, 62, 26);
    justify-content: start;
    align-items: flex-start;
    flex-direction: column;
    width: 20%;
    height: 85%;
    bottom: 0px;
    margin: none;
    padding: none;
    overflow-y: auto;
    overflow-x: hidden;
}
.Upgrades > .UpgradesRow{
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: flex-start;
    justify-content: baseline;
    width: 100%;
    height: 18%;
    min-height: 18%;
    border: solid black;
    border-width: 2px 0px 2px 0px;
    background: none;
    box-sizing: border-box;
    padding: none;
    margin: none;
    gap: 10px;
}

.UpgradeLogo{
    display: block;
    box-sizing: border-box;
    width: 12%;
    height: 100%;
    border: solid black;
    border-width: 0px 2px 0px 0px;
    margin: none;
    padding: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.UpgradeItem{
    display: block;
    box-sizing: border-box;
    width: 12%;
    height: 100%;
    border: solid black;
    border-width: 0px;
    transition: all 0.1s;
}
.UpgradeItem:hover{
    background-color: rgba(0, 0, 0, 0.281);
}
.UpgradeItem.x2{
    background-image: url(x2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.UpgradeItem.x4{
    background-image: url(x4.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.UpgradeDescription{
    position: relative;
    display: block;
    height: 30px;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 200%;
    right: 0px;
    top: -30px;
    z-index: -1;
    border: 1px solid transparent;
    color: transparent;
    text-align: center;
    font-size: 0.8vw;
    font-family: HotDogsFont;
    border-radius: 10px;
    padding-right: 1px;
    padding-left: 1px;
    background-color: transparent;
    cursor: default;
    transition: all 0.15s;
}
.UpgradeDescription:hover{
    display: none;
}
#UpgradeCost:hover{
    display: none;
}
.UpgradeDescriptionCost{
    position: relative;
    display: block;
    height: 30px;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 200%;
    right: 0px;
    top: -30px;
    z-index: -1;
    border: 1px solid transparent;
    color: transparent;
    text-align: center;
    font-size: 0.8vw;
    font-family: HotDogsFont;
    border-radius: 10px;
    padding-right: 1px;
    padding-left: 1px;
    background-color: transparent;
    cursor: default;
    transition: all 0.15s;
}
.UpgradeDescription.toRight{
    top:0px !important;    
    left: 105% !important;
}
.UpgradeDescriptionCost.toRight{
    top:0px !important;    
    left: 105% !important;
}
#UpgradeCost{
    display: block;
    transition: all 0.25s !important;
    height: 55%;
    text-align: baseline;
}
#UpgradeCost.center{
    left: -100%;
}
.UpgradeItem:hover #UpgradeCost{
    background-color: rgb(225, 232, 238);
    color: black;
    border-color: black;
    z-index: 1001;
}

.title{
    background-color: #DB6F04;
    width: 20%;
    height: 10%;
    top: 5%;
    text-align: center;
    font-size: 0.9vw;
    font-family: HotDogsFont;
    box-sizing: border-box;
    padding-top: 0.1em;
    display: block;
    position: inherit;
}

.title::before{
    content: "";
    top: 0px;
    background-color: black;
    width: 100%;
    height: 3px;
    display: block;
    position: inherit;
}
.title::after{
    content: "";
    bottom: 0px;
    background-color: black;
    width: 100%;
    height: 3px;
    display: block;
    position: inherit;
}
.Pause::after{
    content: "";
    background-color: black;
    height: 100%;
    width: 3px;
    left:0px;
    display: block;
    position: inherit;
}
.Pause::before{
    content: "";
    background-color: black;
    height: 100%;
    width: 3px;
    right:0px;
    display: block;
    position: inherit;
}
.ShopSectionImproved > .Items{
    background-color: rgb(117, 62, 26);
    width: 79%;
    height: 95%;
    display: block;
    right: 0px;
    position: inherit;
}

.OpenShop{
    background-color: #DB6F04;
    background-image: url(OpenShopButton.png);
    background-size: 60px 20px;
    display: block;
    position: inherit;
    border-radius: 10px 10px 0px 0px;
    cursor: pointer;
    top: -25px;
    right: 20px;
    height: 25px;
    width: 60px;
}
#ShopArrow{
    position: relative;
    display: none;
    opacity: 0;
    bottom: 1250%;
    width: 136px;
    height: 225px;
    right: 100%;
    background-image: url(ArrowDown.png);
    animation-name: ArrowAnimation;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.item{
    display: block;
    position: inherit;
    box-sizing: content-box;
    width: 20%;
    height: 48.5%;
    background-color: rgb(117, 62, 26);
    border:2px solid black;
}
.item1{
    top:0px;
    left: 0px;
}
.item2{
    bottom:0px;
    left: 0px;
}
.item3{
    top:0px;
    left: 20%;
}
.item4{
    bottom:0px;
    left: 20%;  
}
.item5{
    top:0px;
    left: 40%;
}
.item6{
    bottom:0px;
    left: 40%;
}
.item7{
    top:0px;
    left: 60%;
}
.item8{
    bottom:0px;
    left: 60%;
}
.item9{
    top:0px;
    left: 80%;
}
.item10{
    bottom:0px;
    left: 80%;
}

.item > .itemImage{
    display: block;
    position: inherit;
    box-sizing: content-box;
    top: 5%;
    left: 2%;
    width: 27%;
    height: 70%;
    border: 1px solid brown;
    border-radius: 2px 2px 0px 0px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.2);
}
.item > .itemsAmount{
    display: flex;
    position: absolute;
    box-sizing: content-box;
    height: 25px;
    top: 75%;
    left: 2%;
    width: 27%;
    border: 1px solid brown;
    font-family: HotDogsFont;
    justify-content: center;
    color: rgb(229, 236, 241);
    text-shadow: 0.7px 0.7px 3px rgb(0, 0, 0);
    -webkit-text-stroke: 0.6px rgb(0, 0, 0);
    border-radius: 0px 0px 2px 2px;
    background-color: rgba(0, 0, 0, 0.2);
}
.item > .itemCost{
    display: block;
    position: inherit;
    box-sizing: content-box;
    background-image: linear-gradient(rgb(255, 187, 0), rgb(197, 112, 0));/*linear-gradient(rgb(20, 235, 0), rgb(21, 182, 0));;*/
    top:5%;
    right:10%;
    width: 50%;
    height: 40%;
    border: 1px solid brown;
    border-radius: 2px;
    font-family: HotDogsFont;
    text-align: center;
    transition: all 70ms;
}
.item > .itemCost > button{
    height: 100%;
    width: 100%;
    margin: none;
    left:0px;
    top:0px;
    color: rgba(0, 0, 0, 0);
    background: none;
    border: none;
    position: absolute;
    z-index: 100;
    cursor: pointer;
}
.item > .itemCost > div > p{
    color:rgb(255, 255, 255);
    top:-10px;
    left:37%;
    font-size: 0.9vw;
    margin: 0px;
    margin-top: 2px;
    -webkit-text-stroke: 0.4px rgb(0, 0, 0);
    text-shadow: 0.7px 0.7px 3px rgb(0, 0, 0);
}
.item > .itemCost > p#itemCostNumber{
    color:rgb(242, 255, 61);
    font-size: 0.8vw;
    margin: 0px;
    margin-top:5px;
    text-shadow: 0px 0px 3px rgb(0, 0, 0);
}
.item > .itemCost:hover{
    transform: scale(102%, 102%);
}
.item > .itemCost:active{
    transform: scale(98%, 98%);
}
.item > .itemPersec{
    display: block;
    position: inherit;
    box-sizing: content-box;
    background-color: #ac5b10;
    bottom: 8%;
    right:10%;
    width: 50%;
    height: 40%;
    border: 1px solid brown;
    border-radius: 2px;
    text-align: center;
    font-family: HotDogsFont;
}
.item > .itemPersec > div > p{
    color:rgb(255, 255, 255);
    top:-10px;
    left:37%;
    font-size: 0.6vw;
    margin: none;
    -webkit-text-stroke: 0.4px rgb(0, 0, 0);
    text-shadow: 0.7px 0.7px 3px rgb(0, 0, 0);
}
.item > .itemUpgrades{
    display: flex;
    justify-content: center;
    position: inherit;
    box-sizing: content-box;
    top: 5%;
    left: 30%;
    width: 90px;
    height: 85%;
    border: 1px solid brown;
    border-radius: 2px;
}

.item > .itemImage > .itemDescription{
    position: absolute;
    display: block;
    box-sizing: content-box;
    width: 290%;
    height: auto;
    right: -100%;
    bottom: 105%;
    background-color: rgb(230, 230, 230);
    border: none;
    border-radius: 20px;
    z-index: 500;
    transition: all 0.2s;
    align-content: center;
    justify-content: center;
    text-align: center;
    font-family: HotDogsFont;
    font-size: 0px;
    padding: none;
    cursor: default;
}
.item1 > .itemImage{
    background-image: url(HotDogBooth.png);
}
.item2 > .itemImage{
    background-image: url(Fries.png);
}
.item3 > .itemImage{
    background-image: url(Sauces.png);
}
.item4 > .itemImage{
    background-image: url(Pickles.png);
}
.item5 > .itemImage{
    background-image: url(Tomatos.png);
}
.item6 > .itemImage{
    background-image: url(Onions.png);
}
.item7 > .itemImage{
    background-image: url(Drinks.png);
}
.item8 > .itemImage{
    background-image: url(Grill.png);
}
.item9 > .itemImage{
    background-image: url(FoodTruck.png);
}
.item10 > .itemImage{
    background-image: url(Restaurant.png);
}

#CookieFilesTOS{
    display: none;
    opacity: 0;
    position: absolute;
    box-sizing: border-box;
    bottom: 20px;
    left: 20px;
    width: auto;
    min-width: 600px;
    height: auto;
    min-height: 70px;
    background-color: rgb(240, 232, 222);
    border-radius: 20px;
    border: 2px solid rgb(46, 44, 44);
    z-index: 10000;
    font-family: HotDogsFont;
    text-align: center;
    padding-top: 0.2%;
    transition: all 1s;
}
#CookieFilesTOS > p{
    margin: 0px;
}
#CookieFilesButton{
    position: absolute;
    top:60%;
    left: 45%;
    width: auto;
    height: auto;
    min-width: 10%;
    min-height: 0.9vw;
    font-family: HotDogsFont;
    border: none;
    background-color: #3a80d1;
    border-radius: 20px;
    transition: all 0.2s;
}

#CookieFilesButton:hover{
    transform: scale(105%, 105%);
}

#Settings{
    position: absolute;
    top: 5px;
    left: 5px;
    min-width: 25px;
    min-height: 25px;
    background-image: url(settings.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 10001;
    border-radius: 50%;
    transition: all 0.2s;
}
#Settings:hover{
    transform: rotate(0.1turn) scale(105%);
}
#Settings:hover > #SettingsMenu{
    display: flex;
    flex-direction: column;
    transform: rotate(-0.1turn) translate(0%, 0%);
}
#SettingsMenu{
    position: absolute;
    display: none;
    top: 0px;
    left: 80%;
    width: auto;
    min-width: 100px;
    height: fit-content;
    min-height: 10px;
    background-color: #f7f0ea;
    border-radius: 0px 10px 10px 10px;
    transform: rotate(-0.25turn) translate(50%, 0%);
}
#SettingsMenu:after{
    content: "";
    position: absolute;
    left: 0px;
    bottom: 100%;
    width: 30%;
    height: 20px;
}

.SettingsButton{
    border: none;
    width: 100%;
    background-color: transparent;
    min-height: 40px;
    height: auto;
    font-size: 11px;
    font-family: HotDogsFont;
    transition: all 0.2s;
    text-align: center;
}

.SettingsButton:hover{
    background-color: rgba(0, 0, 0, 0.1);
}
.SettingsButton:active{
    background-color: rgba(0, 0, 0, 0.2);
}
#ResetGameButton{
    border-radius: 0px 00px 10px 10px;
}
#StatsButton{
    border-radius: 0px 10px 0px 0px;
}

.NotificationMenu{
    display: none;
    position: absolute;
    opacity: 0;
    top:0px;
    left:0px;
    z-index: 123456;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    justify-content: center;
    align-items: center;
    transition: all 1s;
}

#ResetGameWindow{
    width: 400px;
    height: 200px;
    border-radius: 20px;
    border: 8px solid black;
    background-color: rgb(148, 99, 34);
    font-family: HotDogsFont;
    text-align: center;
}
#StatsWindow{
    position: relative;
    width: 45%;
    height: 45%;
    border-radius: 20px;
    border: 8px solid black;
    background-color: rgb(148, 99, 34);
    font-size:calc(7px + 0.5vw);
    font-family: HotDogsFont;
    text-align: center;
}
#StatsClose{
    position: absolute;
    display: block;
    box-sizing: content-box;
    width: 3%;
    height: 5%; /* height = width */
    min-width: 18px;
    min-height: 18px;
    text-align: center;
    font-size:calc(4px + 0.5vw);
    font-family: HotDogsFont;
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    top: 2%;
    right: 2%;
    border-radius: 50%;
    background: rgb(168, 111, 36);
    border: 2px solid black;
    transition: all 0.2s;
}
.ResetMenuButton{
    width: 100px;
    height: 30px;
    margin-top: 10px;
    background: rgb(168, 111, 36);
    border: 3px solid rgb(0, 0, 0);
    border-radius: 20px;
    font-family: HotDogsFont;
    transition: all 0.1s;
}

.ResetMenuButton:hover{
    background: rgb(134, 89, 31);;
}
.ResetMenuButton:active{
    background: rgb(102, 68, 23);;
}
#StatsClose:hover{
    background: rgb(131, 87, 30);
}
#ResetYes{
    margin-right: 20px;
}