style.css

@keyframes realchroma{
  0%{background: red;}
  20%{background: rgb(255, 145, 0);}
  40%{background: rgb(251, 255, 0);}
  60%{background: rgb(21, 255, 0);}
  75%{background: rgb(0, 4, 255);}
  90%{background: rgb(75, 0, 161);}
  100%{background: red;}
}
@keyframes realdarkchroma{
  0%{background: rgb(138, 0, 0);}
  20%{background: rgb(117, 66, 0);}
  40%{background: rgb(129, 131, 0);}
  60%{background: rgb(11, 136, 0);}
  75%{background: rgb(0, 2, 122);}
  90%{background: rgb(40, 0, 85);}
  100%{background: rgb(109, 0, 0);}
}
@keyframes legendchroma{
  0%{background: rgb(197, 194, 0);}
  50%{background: rgb(255, 251, 0);}
  100%{background: rgb(197, 194, 0);}
}
@keyframes darklegendchroma{
  0%{background: rgb(128, 125, 0);}
  50%{background: rgb(197, 194, 0);}
  100%{background: rgb(128, 125, 0);}
}

body{
  text-align: center;
  font-family: creepy;
  font-weight: bold;
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5C6rzYTrVIyUPCV0LSNsb-t9aO78tFMqyEixNn6hhGQgiNGgLVW5aR4OFHVCarJHASmw:https://wallpapercave.com/wp/wp661789.png&usqp=CAU");
  background-repeat: no-repeat;
  background-size: cover;
}

@font-face{
  font-family: creepy;
  src: url(o.ttf)
}
#openhomepage{
  background-color: grey;
  border-radius: 20px;
  width: 150px;
  top: 65%;
  left: 88%;
  position: absolute;
  margin: 0;
  padding: 0;
}
#upgradebtn{
  font-size: 25px;
  font-family: Comic Sans MS;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
  border: 5px solid black;
  color: white;
  background: gray;
  margin: 0px;

}
#upgradebtn:hover{
  background-color: rgb(56, 56, 56);
  border-radius: 10px;
  margin: 0px;
}

#cookie{
  margin: 0px;
  padding: 0px;
  cursor: pointer;
border-radius: 192px;
}
#cookie:hover{
  margin: 0px;
  padding: 0px;
}
@keyframes chroma{
  0% {color: red;}
  20% {color: orange;}
  40% {color: rgb(7, 61, 0);}
  60% {color: green;}
  80% {color: blue;}
  100% {color: red;}
}
#grandmalol{
  font-size: 25px;
  font-family: Comic Sans MS;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
  border: 5px solid black;
  color: orange;
  background: gray;
  margin: 0px;
  opacity: 0;
}

#grandmalol:hover{
  background-color: rgb(56, 56, 56);
  border-radius: 10px;
  margin: 0px;
}
#grandmalol:active{
  background-color: black;
}


#chef{
  font-size: 25px;
  font-family: Comic Sans MS;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
  border: 5px solid black;
  color: rgb(0, 255, 55);
  background: gray;
  margin: 0px;
  opacity: 0;
}

#chef:hover{
  background-color: rgb(56, 56, 56);
  border-radius: 10px;
  margin: 0px;
}
#chef:active{
  background-color: black;
}


#factory{
  font-size: 25px;
  font-family: Comic Sans MS;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
  border: 5px solid black;
  color: blue;
  background: gray;
  margin: 0px;
  opacity: 0;
}
#cookies{
  font-family: Comic Sans MS;
}

#factory:hover{
  background-color: rgb(56, 56, 56);
  border-radius: 10px;
  margin: 0px;
}
#factory:active{
  background-color: black;
}

#showUpgrades{
  font-size: 35px;
  font-family: Comic Sans MS;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
  border: 5px solid black;
  animation-name: purplegradient;
  animation-duration: 3s;
  animation-iteration-count: 1000;
  background: gray;
  margin: 0px;
}

#showUpgrades:hover{
  background-color: rgb(56, 56, 56);
  border-radius: 10px;
  margin: 0px;
}

#showUpgrades:active{
  background-color: black;
}

@keyframes purplegradient{
  0% {color: purple;}
  50% {color: rgb(185, 0, 185);}
  100% {color: purple;}
}
#homebutton{
color: red;
}

#HighSpeedProcessor{
  font-size: 25px;
  font-family: Comic Sans MS;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
  border: 5px solid black;
  color: rgb(59, 0, 73);
  background: gray;
  margin: 0px;
  opacity: 0;
}

#HighSpeedProcessor:hover{
  background-color: rgb(56, 56, 56);
  border-radius: 10px;
  margin: 0px;
}
#HighSpeedProcessor:active{
  background-color: black;
}
#CookieHacker{
  font-size: 25px;
  font-family: Comic Sans MS;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
  border: 5px solid black;
  color: rgb(255, 0, 0);
  background: gray;
  margin: 0px;
  opacity: 0;
}
#CookieHacker:hover{
  background-color: rgb(56, 56, 56);
  border-radius: 10px;
  margin: 0px;
}

#CookieHacker:active{
  background-color: black;
  cursor: pointer;
}

#robot{
  font-size: 25px;
  font-family: Comic Sans MS;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
  border: 5px solid black;
  color: rgb(255, 111, 219);
  background: gray;
  margin: 0px;
  opacity: 0;
}
#robot:hover{
  background-color: rgb(56, 56, 56);
  border-radius: 10px;
  margin: 0px;
}

#robot:active{
  background-color: black;
}
#robot2{
  font-size: 25px;
  font-family: Comic Sans MS;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
  border: 5px solid black;
  color: rgb(111, 197, 255);
  background: gray;
  margin: 0px;
  opacity: 0;
}
#robot2:hover{
  background-color: rgb(56, 56, 56);
  border-radius: 10px;
  margin: 0px;
}

#robot2:active{
  background-color: black;
}
#thanos{
  font-size: 25px;
  font-family: Comic Sans MS;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
  border: 5px solid black;
  color: rgb(53, 0, 0);
  background: gray;
  margin: 0px;
  opacity: 0;
}
#thanos:hover{
  background-color: rgb(56, 56, 56);
  border-radius: 10px;
  margin: 0px;
}
#thanos:active{
  background-color:black;
}
#thanks{
  background: green;
  color: black;
  border: 3px solid orange;
  text-decoration: none;
  border-radius: 10px;
  padding: 3px;
}

#thanks:hover{
  background: darkgreen;
}
#halloween{
  background: black;
  color: white;
  border: 3px solid orange;
  text-decoration: none;
  border-radius: 10px;
  padding: 3px;
}

#halloween:hover{
  background: rgb(100, 65, 0);
}
#christmas{
  background: rgb(255, 0, 0);
  color: black;
  border: 3px solid rgb(0, 255, 0);
  text-decoration: none;
  border-radius: 10px;
  padding: 3px;
}

#christmas:hover{
  background: rgb(100, 0, 0);
}
#bakery1{
  border-radius: 20px;
  animation-name: bakery;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-weight: bold;
  font-size: 18px;
  padding: 5px;
  border: 5px solid black;
}
@keyframes bakery{
  0% {background-color: rgb(0, 255, 0);}
  50%{background-color: rgb(0, 153, 0);}
  100%{background-color: rgb(0, 255, 0);}
}
#bakery{
  border-radius: 20px;
  background: orange;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-weight: bold;
  font-size: 18px;
  padding: 5px;
  border: 5px solid black;
}
#squids{
  color: blue;
}
#squids:visited{
  color:blue;
}
#squids:hover{
  color: blue;
}

#header{
    text-align: center;
    font-family: 'Comic Sans MS';
    font-weight: bold;
    color: white;
}

#backgroundArticle{
    position: absolute;
    top: 20px;
    left: 0px;
    background: rgb(53, 53, 53);
    border: 3px solid rgb(0, 0, 0);
    width: 20%;
    margin: 20px auto;
    border-radius: 10px;
    padding: 10px;
}

.buttons{
    text-align: center;
    background: rgb(107, 107, 107);
    border: solid 5px gray;
    font-family: 'Comic Sans MS';
    color: white;
    font-weight: bold;
    border-radius: 10px;
    padding: 6px;
}
.buttons:hover{
    background: rgb(70, 70, 70);
    cursor: pointer;
}

.buttonsRed{
    text-align: center;
    background: rgb(150, 0, 0);
    border: solid 5px rgb(44, 0, 0);
    font-family: 'Comic Sans MS';
    color: white;
    font-weight: bold;
    border-radius: 10px;
    padding: 6px;
}
.buttonsRed:hover{
    background: rgb(87, 0, 0);
    cursor: pointer;
}
#dev{
  opacity: 0;
  pointer-events: none;
}

#devopen{
  font-size: 20px;
  font-family: Comic Sans MS;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
  border: 5px solid black;
  background: gray;
  margin: 0px;
  opacity: 0;
  color: aqua;
  pointer-events: none;
}
#devopen:hover{
  background-color: rgb(56, 56, 56);
  border-radius: 10px;
  margin: 0px;
  pointer-events: none;
}

#GoldCookie{
  position: absolute;
  top: 150px;
  left: 530px;
  opacity: 0;
}

.buttonsSpecial{
    text-align: center;
    background: rgb(255, 230, 0);
    border: solid 5px rgb(132, 134, 0);
    font-family: 'Comic Sans MS';
    color: rgb(0, 0, 0);
    font-weight: bold;
    border-radius: 10px;
    padding: 6px;
}
.buttonsSpecial:hover{
    background: rgb(94, 84, 0);
    cursor: pointer;
}

#saveBakery{
  text-align: center;
  background: rgb(0, 255, 0);
  border: solid 5px green;
  font-family: 'Comic Sans MS';
  color: rgb(0, 0, 0);
  font-weight: bold;
  border-radius: 10px;
  padding: 6px;
}
#saveBakery22{
  text-align: center;
  background: rgb(255, 166, 0);
  border: solid 5px rgb(128, 83, 0);
  font-family: 'Comic Sans MS';
  color: rgb(0, 0, 0);
  font-weight: bold;
  border-radius: 10px;
  padding: 6px;
}
#saveBakery:hover{
  background: rgb(12, 75, 0);
  cursor: pointer;
}
#saveBakery22:hover{
  background: rgb(75, 57, 0);
  cursor: pointer;
}

#cookiegiver{
  text-align: center;
  background: rgb(107, 107, 107);
  border: solid 5px gray;
  font-family: 'Comic Sans MS';
  color: white;
  font-weight: bold;
  border-radius: 10px;
  padding: 6px;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgb(46, 46, 46);
  opacity: 1; /* Firefox */
}

#giverText{
  color: white;
}
#mystery{
  font-size: 25px;
  font-family: Comic Sans MS;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
  border: 5px solid black;
  animation-name: realchroma;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  color: black;
  background: gray;
  margin: 0px;
  opacity: 0;
  pointer-events: none;
}
#mystery:active{
  background: rgb(0, 0, 0);
}
#mystery:hover{
  
  animation-name: realdarkchroma;
  animation-duration: 1.2s;
  animation-iteration-count: infinite;
}

#homepagex{
  color: red;
  pointer-events: all;
  cursor: pointer;
  opacity: 1;
  margin: 0;
  padding: 0;
}
#homepagex:hover{
  color: darkred;
}


#legendbtn{
  font-size: 25px;
  font-family: Comic Sans MS;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
  border: 5px solid black;
  animation-name: legendchroma;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  color: black;
  background: gray;
  margin: 0px;
  opacity: 0;
  pointer-events: none;
}
#legendbtn:hover{
  animation-name: darklegendchroma;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

#versionControl{
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  margin: 0;
  padding: 0;
}

#bitbtn{
  font-size: 25px;
  font-family: Comic Sans MS;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
  border: 5px solid black;
  background: red;
  color: black;
  margin: 0px;
  opacity: 0;
  pointer-events: none;
}
#bitbtn:hover{
  background: darkred;
}
#malwarebtn{
  font-size: 25px;
  font-family: Comic Sans MS;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
  border: 5px solid black;
  background: url(/assets/images/blue.gif);
  color: black;
  margin: 0px;
  opacity: 0;
  background-size: cover;
  pointer-events: none;
}
#laserbtn:hover{
  background: rgb(22, 22, 22);
}
#laserbtn{
  font-size: 25px;
  font-family: Comic Sans MS;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
  border: 5px solid black;
  background: url(/assets/images/coolcolors.gif);
  color: white;
  margin: 0px;
  opacity: 0;
  background-size: cover;
  pointer-events: none;
}
#malwarebtn:hover{
  background: rgb(9, 0, 139);
}
#savebtn{
  text-align: center;
  background: blue;
  border: solid 5px darkblue;
  font-family: 'Comic Sans MS';
  color: rgb(0, 0, 0);
  font-weight: bold;
  border-radius: 10px;
  padding: 6px;
}

#savebtn:hover{
  background: rgb(0, 0, 95);
  cursor: pointer;
}

#codes{
  text-align: center;
}

#realmbtn{
  opacity: 0;
  pointer-events: none;
}
#questbtn{
  text-align: center;
  background: green;
  border: solid 5px darkgreen;
  font-family: 'Comic Sans MS';
  color: rgb(0, 0, 0);
  font-weight: bold;
  border-radius: 10px;
  padding: 6px;
}
#questbtn:hover{
  background: rgb(9, 299, 1);
  cursor: pointer;
}
#codeText{
  font-family: Comic Sans MS;
}
#upgrades{
  font-size: 14px;
}
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 10%;
  border: none;
  text-align: middle;
  outline: none;
  font-size: 15px;
  position: fixed;
  right: 0%;
  z-index: 2;
  border-radius: 10px;
}

.active, .collapsible:hover {
  background-color: ;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: black;
  width:31%;
  height: 500px;
  position: fixed;
  right: 0%;
color:white;
  overflow-y:auto;
   border-radius: 10px;
}
.collapsiblee {
  background: black;
  color: white;
  cursor: not-allowed;
  padding: 18px;
  width: 10%;
  border: none;
  text-align: middle;
  outline: none;
  font-size: 15px;
  position: fixed;
  left: 0%;
  z-index: 2;
  border-radius: 10px;
  opacity: 0.5;
}

.active, .collapsiblee:hover {
background:;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: black;
  width:31%;
  height: 500px;
  position: fixed;
  right: 0%;
color:white;
  overflow-y:auto;
   border-radius: 10px;
}
#easy{
  font-size: 45px;
  font-family: sans-serif;
  color: #00c04b;
}
#legendcookiecutterbtn:hover{
  background: rgb(22, 22, 22);
}
#legendcookiecutterbtn{
  font-size: 25px;
  font-family: Comic Sans MS;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
  border: 5px solid black;
  background: url("https://media.istockphoto.com/photos/light-from-avobe-picture-id180215690?k=20&m=180215690&s=612x612&w=0&h=1PdzM5tuwqDx-Aq2CrRJd-uUk4WLC4khv3Pkp6NpTUM=");
  color: white;
  margin: 0px;
  opacity: 0;
  background-size: cover;
  pointer-events: none;
}

#godtlaserbtn:hover{
  background: rgb(224, 255, 71);
}
#godtlaserbtn{
  font-size: 25px;
  font-family: Comic Sans MS;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
  border: 5px solid black;
  background: url(/assets/images/dang.gif);
  color: black;
  margin: 0px;
  opacity: 0;
  background-size: cover;
  pointer-events: none;
}











/* CSS */
.button-64 {
  color: darkblue;
  background: lightblue;
  border-radius: 10px;
  height: 40px;
  cursor: pointer;
}

button:{
  background: black;
  border: none;
}
#chat{
  opacity:1;
}
#dark{ text-align: center; background: rgb(0, 183, 255); border: solid 5px rgb(0, 88, 139); font-family: 'Comic Sans MS'; color: rgb(0, 0, 0); font-weight: bold; border-radius: 10px; padding: 6px; } #dark:hover{ cursor: pointer; background: rgb(0, 89, 190); }
#yellowtheme{
  border-radius: 10px;
  height: 40px;
  width: 100px;
  background: rgb(255, 247, 0);
   border-style: solid;
  border-color: red;
   border-width: 5px;
}
#resetbtn{
  background: red;
  border: 0;
  border-radius: 3px;
  padding: 2px;
  font-family: Comic Sans MS;
  width: 100px;
  transition: .2s background, .2s padding;
}
#resetbtn:hover{
  background:#d20404;
  padding: 3px;
  cursor: pointer;
}
#resetbtn:active{
  background: #ae0404;
  padding: 4px;
}