@font-face {
    font-family: pikmin;
    src: url(font/pikmin.ttf);
}
@keyframes shake {
    0% {transform: translate(0px, 0px);}
    20% {transform: translate(-2px, 2px);}
    40% {transform: translate(2px, -2px);}
    60% {transform: translate(-2px, 1px);}
    80% {transform: translate(2px, 2px);}
    100% {transform: translate(0px, 0px);}
}
audio { display: none;}
.shaking {
    animation: shake 0.1s infinite
}
#title {
    font-size:50px;
    display:inline-block;
    font-family:pikmin;
    border:5px solid white;
    padding:5px;
    margin-bottom:20px;
    background-color:rgb(124, 231, 121);
    border-radius:4px;
}
body {
    user-select: none;
    text-align:center;
    background-color: rgb(154, 243, 158);
    color:white;
}
#clickablemin {
    transition: ease 50ms;
    background-image: url('images/greyonion.png');
    background-size: cover;
    border:none;
    height:250px;
    width:250px;
    background-color:transparent;
}
#clickablemin:active {
    transform: scale(1.2);
}
#clickablemin:hover {
    cursor:pointer;
}
.johndiv {
    height:200px;
}
#buyboxes {
    display:inline-block;
    align-items:center;
}
#coolnumber {
    border:5px solid white;
    display:inline-block;
    margin:auto;
    border-radius:8px;
    background-color:rgb(105, 224, 101);
    padding:10px;
    padding-top:6px;
    padding-bottom:6px;
    font-size:40px;
    font-family:pikmin;
    transition: transform ease 150ms;
}
#lesscoolnumber {
    border:5px solid white;
    display:block;
    margin:20px auto;
    border-radius:8px;
    background-color:rgb(105, 224, 101);
    padding:10px;
    width:300px;
    padding-top:6px;
    padding-bottom:6px;
    font-size:20px;
    font-family:pikmin;
    transition: transform ease 150ms;
}
#togglemute {
    width:100px;
    position:fixed;
    top:0;
    right:0;
    margin:10px;
    height:100px;
    background-image: url('images/mute.png');
    border:none;
    background-color: transparent;

}
.jeffdiv {
    width:20px;
}
.boxtext {
    font-family: pikmin;
}
.itemcontainer {
    border:2px solid black;
    display:flex;
    margin-top: 8px;
    align-items: center;
    padding:4px;
    background-color:white;
    width:300px;
}
.itemcontainer:hover {
    cursor:pointer;
}
.rpimg {
    width:20px;
    height:auto;
    padding-right:5px;
}
.textarea {
    display:flex;
    flex-direction: column;
}
#rpamount {
    color: grey;
    font-size:25px;
    text-align:left;
}
.rpcosttext {
    color:red;
    font-family:pikmin;
}
#bpamount {
    color: grey;
    font-size:25px;
    text-align:left;
}
.bpcosttext {
    color:red;
    font-family:pikmin;
}
#ypamount {
    color: grey;
    font-size:25px;
    text-align:left;
}
.ypcosttext {
    color:red;
    font-family:pikmin;
}
#upgradetitle {
    font-family:pikmin;
    font-size:20px;
    width:200px;
    border:2px solid black;
    background-color:rgb(58, 59, 70)
}
#upgradebigbox {
    margin-top:8px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    padding:8px;
    width:500px;
    margin:8px auto;
    border:2px solid black;
    background-color:rgb(103, 104, 116);
}
#upgradesmallbox {
    margin-top:5px;
    width:446px;
    height:453px;
    display:inline-flex;
    background-color: rgb(58, 59, 70);
    border:2px solid black;

}
.cooldiv {
    flex-basis: 100%;
}
#redupgrades {
    margin-left:5px;
    background-color:rgb(95, 31, 31)
}
#blueupgrades {
    background-color:rgb(31, 41, 95)
}
#yellowupgrades {
    background-color:rgb(95, 89, 31)
}
#genericupgrades {
    background-color:rgb(18, 99, 22)
}
#clickupgrades {
    background-color:rgb(105, 73, 24)
}
.upgrademenu {
    margin-top:4px;
    width:80px;
    display:block;
    justify-content: center;
    height:440px;
    margin-left:4px;
    border:2px solid black;
}
.u {
    border:2px solid black;
    width:50px;
    font-family:pikmin;
    margin: 4px auto;
    text-align:center;
    line-height: 22px;
    height:50px;
    transition: transform ease 150ms;
}
.u:hover {
    transform: scale(1.1)
}
.ru:hover {
    background-color:rgb(146, 49, 49)
}
.bu:hover {
    background-color:rgb(50, 65, 148)
}
.yu:hover {
    background-color:rgb(133, 124, 45)
}
.gu:hover {
    background-color:rgb(27, 134, 32)
}
.cu:hover {
    background-color:rgb(148, 104, 38)
}
.pokoimg {
    margin-top:20px;
}
.cursorimg {
    margin-top:18px;
}
.u:hover {
    cursor:pointer;
}
.uic {
    width:56px;
}
.upgradetext {
    font-family:pikmin;
    font-size:14px;
}
#cui {
    margin-left:-3px;
}
#gui {
    margin-left:-3px;
}
#sidebar {
    position: fixed;
    top: 0;
    background-color:rgb(105, 224, 101);
    left: 0;
    border-right: 4px solid white;
    height: 100vw;
    width:50px;
}
#statstitle {
    transform: rotate(270deg);
    font-family: pikmin;
    font-size: 30px;
    border:4px solid white;
    background-color:rgb(105, 224, 101);
    padding:10px;
    width:260px;
    text-align:center;
    border-radius:4px;
    margin-top:22vw;
    margin-left:-93px;
    transition: transform ease 150ms;

}
#statstitle:hover {
    background-color:rgb(85, 197, 81);
    transform:rotate(270deg) scale(1.1);
}
#statsbox {
    display:none;
    font-family:pikmin;
    font-size:25px;
    text-align:left;
    margin-top:-300px;
    margin-left:-70px;
}