@font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(./font.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

body {
    font-family: 'Source Code Pro', monospace;
    margin: 20px;
    background-color: #d3d3d3;
}

.switcherMain {
    background-color: #353535;
    position: fixed;
    margin-top: 20px;
    margin-left: -290px;
    width: 300px;
    height: calc(auto + 20px);
    border-radius: 0px 10px 10px 0px;
    transition: all .25s;
    padding-top: 15px;
    padding-bottom: 20px;
    z-index: 3;
}

.switcherButton {
    font-family: 'Source Code Pro', monospace;
    padding: 10px;
    margin-top: 5px;
    border-radius: 0px 5px 5px 0px;
    width: 260px;
    height: auto;
    background-color: #353535;
    border: none;
    transition: all .25s;
    font-size: 20px;
    color: #ffffff;
}

.clickerMain {
    background-color: #353535;
    position: fixed;
    margin-top: -775px;
    margin-left: 45%;
    width: 700px;
    height: calc(auto + 20px);
    border-radius: 0px 0px 10px 10px;
    transition: all .25s;
    z-index: 3;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}

.menuText {
    text-align: center;
    color: #ffffff;
    margin-bottom: 0px;
    margin-top: 25px;
}

.clickerContent {
    border-radius: 10px;
    padding: 10px;
    height: 700px;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: #979797;
}

#classes {
    padding-left: 40px;
}

.img1080 {
    margin-top: 10px;
    border-radius: 10px;
    width: 810.75px;
    transition: transform .5s, box-shadow .5s;
    position: relative;
}

.imgPhone {
    margin-top: 10px;
    height: 1012px;
    border-radius: 10px;
    transition: transform .5s, box-shadow .5s;
    position: relative;
}

.img1K {
    margin-top: 10px;
    width: 505px;
    border-radius: 10px;
    transition: transform .5s, box-shadow .5s;
    position: relative;
}

.center {
    text-align: center;
}

#clickButton {
    font-family: 'Source Code Pro', monospace;
    width: 200px;
    height: 100px;
    border: none;
    border-radius: 20px;
    background-color: #571212;
    font-size: 40px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    transition: all .5s;
    color: #ffffff;
}

.clickerButton {
    font-family: 'Source Code Pro', monospace;
    font-size: 20px;
    border: none;
    border-radius: 10px;
    background-color: #571212;
    transition: all .25s;
    padding: 5px;
    color: #ffffff;
}

#closeClickerButton {
    position: absolute;
}

#purchasesSectorBorder {
    background-color: #353535;
    border-radius: 10px;
    height: auto;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 10px 10px 16px 0px rgba(0,0,0,0.2);
}

#purchascesClassSelect {
    border-radius: 10px 10px 0px 0px;
    background-color: #202020;
    padding: 10px;
    padding-bottom: 0px;
}

.purchasesClassSelButton {
    font-family: 'Source Code Pro', monospace;
    font-size: 15px;
    height: 40px;
    border-radius: 10px 10px 0px 0px;
    width: 93.75px;
    border: none;
    color: #ffffff;
    background-color: #202020;
    transition: all .25s;
}

#purchasesSector {
    background-color: #979797;
    border-radius: 0px 0px 10px 10px;
    height: 250px;
    padding: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.purchaseContainer {
    background-color: #979797;
    border-radius: 10px;
    width: 35%;
    padding: 5px;
    display: block;
    margin-left: 10%;
    box-shadow: inset 5px 5px 16px 0px rgb(0 0 0 / 20%);
    transition: all .25s;
    height: 60px;
    color: black;
    overflow-y: hidden;
    overflow-x: hidden;
}

#cursorButton {
    padding: 5px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}

#clickerPurchaseButton {
    padding: 5px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

*::-webkit-scrollbar {
  width: 1em;
  position: absolute;
}
 
*::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
 
*::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  border-radius: 10px;
  transition: all .5s;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: grey;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}