#sidebar {
    outline: 3px solid purple;
}
.sidebar {
    height: 100vh;
    width: 200px;
    position: fixed;
    left: 0;
    top: 0;
    overflow-y: auto;
    background-color: #000000;
    padding-top: 20px;
}

.sidebar-right {
    height: 100vh;
    width: 200px;
    position: fixed;
    right: 0;
    top: 0;
    overflow-y: auto;
    background-color: #000000;
    padding-top: 20px;
}

.sidebar-right button {
    display: block;
    width: 100%;
    padding: 15px;
    color: rgb(174, 0, 255);
    background: none;
    border: none;
    text-align: right;
    cursor: pointer;
}

.sidebar button {
    display: block;
    width: 100%;
    padding: 15px;
    color: rgb(174, 0, 255);
    background: none;
    border: none;
    text-align: center;
    cursor: pointer;
}
.sidebar button:hover {
    background-color: #575757;
}
.sidebar::-webkit-scrollbar {
    display: none;  
}
.sidebar-right::-webkit-scrollbar {
    display: none;  
}

#colorChange {
    position: fixed;
    top: 20px;
    right: 220px;
}

body {
    color: rgb(0, 0, 0);
    font-family: 'Saira Stencil', cursive;
}


@keyframes shake {
    0%   { transform: translate(0px, 0px); }
    25%  { transform: translate(1px, -1px); }
    50%  { transform: translate(-1px, 1px); }
    75%  { transform: translate(1px, 1px); }
    100% { transform: translate(0px, 0px); }
}

/* apply to all text elements */
p:hover,span:hover,h1:hover,h2:hover,h3:hover,button:hover {
    animation: shake 0.2s infinite;
}

#clickUpgrade {
    animation: none;
}
#clickButton:active {
    animation: none;
    transform: scale(0.9)
}