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

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

#monke {
    width: 50vw !important;
    height: auto !important;
}

body {
    font-family: 'Poppins', sans-serif;
    color: white !important;
    background: rgb(255,24,133);
    background: linear-gradient(148deg, rgba(255,24,133,1) 0%, rgba(254,255,0,1) 100%);
    margin: 0;
    overflow: hidden;
}

.clicker_lb {
    background: rgb(35,35,35);
    color: white;
    border-radius: 4px;
    width: 35vw;
    margin-top: 8px;
    margin-bottom: 8px;
}

input, button {
    margin-top: 5px !important;
    margin-bottom: 5px!important;
    border: none;
    background-color: white;
    height: 34.6px;
    width: 20vw;
    border-radius: 2px;
    box-shadow: 0 0 2px 0 rgb(85,85,85);
}

@media only screen and (max-width: 768px) {
    input, button {
        width: 70vw;
    }
}

*:focus {
    outline: none;
}

h1, h3 {
    text-shadow: 0 0 5px rgb(125,125,125);
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 90%;
}

.centercanvas {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 90vw;
    height: 90vh;
}
.vertical-center {
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

input[type=button] {
    font-family: 'Poppins', sans-serif;
}

input[type=submit] {
    font-family: 'Poppins', sans-serif;
}

a, a:hover, a:active, a:visited { color: white; }

a:hover {
    color: white;
    text-decoration: underline white 2px;
}

.navbar {
    width: 100%;
    height: 6vh;
    background: rgb(45,45,45);
    display: flex;
}

.navbar > form {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar > form > input {
    background: none !important;
    box-shadow: none !important;
    height: 100%;
    width: 10vw;
    color: white;
    margin: none;
    transition: color 0.25s;
}

.navbar > form > input:hover {
    color: rgb(199,199,199);
}

.header {
    width: 100%;
    height: 300px;
    background: white;
    box-shadow: 0 0 4px 0 rgb(35,35,35);
    background-image: linear-gradient(45deg, #fad0c4 0%, #ffd1ff 100%);
}

.rotate { 
animation: rotat 5s linear infinite;
}

@keyframes rotat {
    to  {transform: rotate3d(1, 1, 1, 2turn) rotate3d(1, -1, 1, 2turn);}
}

#round {
opacity:0.2;
transition: 0.5s;
}

#round:hover {
transform:rotate(90deg);
}

.tooltipp {
  position: relative;
  display: inline-block;
}

.tooltipp .tooltipptext {
  opacity: 0;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 130%;
  left: 140%;
  margin-left: -60px;
}

.tooltipp .tooltipptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 15%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.tooltipp:hover .tooltipptext {
    transition: opacity  0s linear 1.5s;
    opacity: 1;

}

.owo {
    top: 50%;
    font-size: 1.3em;
    color:black;
    opacity: 0.2
}

.owo:hover {
    transition: opacity 0.5s;
    opacity: 1;
}
.active {
    color: white;
}

@media only screen and (max-width: 768px) {

#monke {
    width: 100vw !important;
    height: auto !important;
}

h1 {
    font-size: 6vw;
}

.navbar form {
    width: fit-content;
}

.navbar form input {
    width:100%
}

}