@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

* {
    font-family: 'VT323', monospace;
    user-select: none;
   
}

html {
    background-image: url("https://www.dexerto.com/cdn-cgi/image/width=3840,quality=75,format=auto/https://s3.us-east-1.amazonaws.com/dexerto-assets-production-cbbdf288/uploads/2020/08/17083013/chalet-fireplace-rework.png");
    background-size: cover;
    background-repeat: no-repeat;
}

#cookie {
    max-width: 200px;
    width: 100%;
    display: table;
    margin: 0 auto;
    transition: .3s ease;
    cursor: pointer;
}

#container {
    display: table;
    margin: 0 auto;
    margin-top: 5em;
}

#counter {
    font-size: 48px;
    color: aqua;
    font-weight: bold;
    text-align: center;
}

#cookie:hover {
    transform: scale(1.1);
}
#upgradeClickButton, #autoClickButton{
    float: left;
    width: 80%;
    margin-top: 20px;
    margin-left: 10%;
    padding: 2;
    margin: 2;
    font-size: 24px;
    border: none;
    color:white;
    background-color: rgba(0, 128, 90, 0%);
    cursor: pointer;
    transition: .2s ease;
    
}
#upgradeClickButton:hover{
    transform: scale (1.2)
}
#autoClickButton:hover{
    transform: scale (1.2)
}
#clickWrapper{
    background-color: rgba(0, 128, 90, 50%);
    text-align: center;
    padding: 2em;
    display: flex;
    border-width: 5px ;
    border-style: solid;
    border-radius: 20px;
    border-color: green;
    width: auto;
}
.buttonimg{
    max-width: 200px;
    width: 100%;
}
#autoWrapper{
    background-color: rgba(0, 128, 90, 50%);
    text-align: center;
    padding: 2em;
    display: flex;
    border-width: 5px ;
    border-style: solid;
    border-radius: 20px;
    border-color: green;
    width: auto;
}
#autoWrapper{
    margin-top: 2em;
}
#autoWrapper:hover {
    transform: scale(1.05);
}
#clickWrapper:hover {
    transform: scale(1.05);
}