html {
  width: 100%;
  height: 100%;
  margin: 0;
}

body, #Grid {
  height: 100vh;
  width: 100vw;
  margin: 0;
  display: grid;
  grid-template-areas:
    "linkbar linkbar linkbar linkbar linkbar linkbar"
    "statistics statistics diddy diddy diddy profile"
    "statistics statistics diddy diddy diddy profile"
    "statistics statistics diddy diddy diddy profile"
    "upgrades upgrades upgrades upgrades upgrades upgrades"
    "upgrades upgrades upgrades upgrades upgrades upgrades";
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
}

body {
  background-color: darkblue;
  background: linear-gradient(130deg, rgb(26, 26, 108), #09103d, rgb(92, 0, 0));
  background-size: 200% 200%;
  -webkit-animation: Animation 5s ease infinite;
  -moz-animation: Animation 5s ease infinite;
  animation: Animation 5s ease infinite;
}


.Organization {
  border: solid 3px black;
  background-color: rgb(47, 47, 190);
  border-radius: 20px;
  margin: 8px;
}

#Didy {
  grid-area: diddy;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(130deg, rgb(47, 47, 190), darkblue, rgb(47, 47, 190));
  background-size: 200% 200%;
  -webkit-animation: Animation 5s ease infinite;
  -moz-animation: Animation 5s ease infinite;
  animation: Animation 5s ease infinite;
  text-align: center;
}

@-webkit-keyframes Animation {
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}
@-moz-keyframes Animation {
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}
@keyframes Animation { 
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}


#Upgrades {
  grid-area: upgrades;
}

#LinkBar {
  grid-area: linkbar;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-content: center;
  grid-gap: 5px;
  grid-template-areas:
  "settings settings linkcontainer linkcontainer linkcontainer version clicker";
}


#Statistics {
  grid-area: statistics;
  font-size: 80%;
}

#ProfileButtons {
  grid-area: profile;
}

#DiddyAnimCase {
  vertical-align: center;
  margin: 0 auto;
  width: 40%;
  height: 65%;
  border-radius: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#DiddyButton {
  vertical-align: anchor-center;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  border-radius: 30%;
  overflow: hidden;
  animation: ButtonAnimation 2s ease-in-out infinite;
  position: relative;
}

#isThatDiddy {
  width: 150%;
  height: 150%;
  transform: translate(-10%, -10%);
}

#settingsandmore {
  grid-area: settings;
  display: flex;
  justify-content: space-around;
}

#LinkContainer {
  grid-area: linkcontainer;
  display: flex;
  align-items: anchor-center;
  justify-content: space-around;
  background-color: darkblue;
  border-radius: 20px;
  height: 100%;
  background: linear-gradient(130deg, rgb(47, 47, 190), darkblue, rgb(47, 47, 190));
  background-size: 200% 200%;
  -webkit-animation: Animation 5s ease infinite;
  -moz-animation: Animation 5s ease infinite;
  animation: Animation 5s ease infinite;
  text-align: center;
  max-height: 100%;
}

#Version {
  grid-area: version;
}

#DiddyClicker {
  grid-area: clicker;
}

#Version, #DiddyClicker {
  text-align: center;
  font-size: 150%;
}

.Link {
  width: 18%;
  height: 100%;
  overflow: hidden;
  object-fit: cover;
  max-height: 100%;
  max-width: 18%;
}

.More, .Reset {
  border-radius: 20px;
  overflow: hidden;
  width: 25%;
  height: 100%;
}

#Reset {
  background-color: red;
  text-align: center;
  font-size: 130%;
  background: linear-gradient(130deg, red, maroon, red);
  background-size: 200% 200%;
  -webkit-animation: Animation 5s ease infinite;
  -moz-animation: Animation 5s ease infinite;
  animation: Animation 5s ease infinite;
}

.More {
  background-color: transparent;
  border: none;
}

#SettingsImg, #MoreImg {
  width: 100%;
  height: 100%;
}

.LinkButton {
  height: 100%;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  object-fit: cover;
  max-height: 100%;
  max-width: 100%;
  color: white;
  -webkit-text-stroke: 1px black;
  font-size: 150%;
  font-weight: bold;
}

#CreditsPage {
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRcQfwALjXmniv_PAvvVjxlDgPB741M3DmqIQ&s);
  background-size: 200% 110%;
  background-position: center;
}

#MainMenu {
  background-image: url(https://media-cldnry.s-nbcnews.com/image/upload/t_fit-560w,f_auto,q_auto:best/rockcms/2023-12/231206-sean-diddy-combs-mn-1320-7919c9.jpg);
  background-size: 300% 180%;
  background-position: center;
}

#UpdateLog {
  background-image: url(https://cdn.abcotvs.com/dip/images/15571565_112124-diddy.jpg?w=1600);
  background-size: 200% 110%;
  background-position: center;
}

#ProfileButtons {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 10%;
}

.PBButtons {
  width: 90%;
  height: 70%;
  margin: auto auto 10px auto;
  border-radius: 20px;
  background-color: red;
  text-align: center;
  font-weight: bold;
  font-size: 180%;
  background: linear-gradient(130deg, red, maroon, red);
  background-size: 200% 200%;
  -webkit-animation: Animation 5s ease infinite;
  -moz-animation: Animation 5s ease infinite;
  animation: Animation 5s ease infinite;
}

#Statistics {
  text-align: center;
}

#TitleBar {
  color: gray;
}

#Upgrades {
  display: grid;
  padding: 10px;
  grid-gap: 8px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.UpgradeContent {
  background: linear-gradient(90deg, rgb(0, 0, 174), rgb(0, 0, 99), rgb(0, 0, 174));
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.TempTitle {
  font-size: 100%;
  font-weight: bold;
  width: 30%;
}

.UpgradeButtons {
  background: linear-gradient(130deg, red, maroon, red);
  background-size: 200% 200%;
  font-weight: bold;
  height: 90%;
  width: 30%;
  margin: 3px;
  font-size: 100%;
  border-radius: 20px;
  -webkit-animation: Animation 5s ease infinite;
  -moz-animation: Animation 5s ease infinite;
  animation: Animation 5s ease infinite;
}

@keyframes ButtonAnimation {
    0%{
      width: 100%;
      height: 100%;
    }
    50%{
      width: 90%;
      height: 90%;
    }
    100%{
      width: 100%;
      height: 100%;
    }
}

.SIGMA {
  color: gold;
  -webkit-text-stroke: 2px black;
  background: transparent;
  font-weight: bold;
  font-size: 300%;
  z-index: 9999;
  width: 30px;
  height: 30px;
  margin: 0 auto;
  text-align: center;
  pointer-events: none;
}

@keyframes IndicatorAnimation {
    0%{
      transform: translate(0%, 0%);
      opacity: 1;
    }
    100%{
      transform: translate(0%, -100%);
      opacity: 0;
    }
}

.InterfaceContainer {
  background: linear-gradient(270deg, rgb(255, 255, 255), rgb(128, 128, 177), rgb(255, 255, 255));
  opacity: 0.4;
  width: 100%;
  height: 100%;
  z-index: 5;
  position: absolute;
}

.Interface {
  background: linear-gradient(180deg, rgb(0, 0, 174), rgb(0, 0, 99), rgb(0, 0, 174));
  width: 50%;
  height: 60%;
  border-radius: 30px;
  place-self: center;
  border: 1px solid black;
  z-index: 6;
  opacity: 1;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.exitButton {
  background: linear-gradient(130deg, red, maroon, red);
  width: 8%;
  height: 12%;
  border-radius: 20px;
  place-self: start start;
  margin: 10px;
  z-index: 6;
  border: 1px solid black;
  font-weight: bold;
  font-size: 400%;
  text-align: center;
  position: absolute;
}

.interfaceInner {
  background: rgb(0, 0, 102);
  width: 90%;
  height: 60%;
  border-radius: 30px;
  place-self: center;
  border: 1px solid black;
  z-index: 8;
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: space-around;
  justify-content: center;
}

.confirm {
  height: 10%;
  width: 20%;
  border-radius: 30px;
  border: 1px solid black;
  z-index: 8;
  opacity: 1;
  font-weight: bold;
  background: linear-gradient(130deg, red, maroon, red);
  background-size: 200% 200%;
  -webkit-animation: Animation 5s ease infinite;
  -moz-animation: Animation 5s ease infinite;
  animation: Animation 5s ease infinite;
}

.content {
  font-weight: bold;
  font-size: 100%;
  text-align: center;
  z-index: 9;
}

#rebirthWarning {
  color: red;
}

#price {
  color: yellow;
}

#babyOilMultiplier {
  color: green;
}

#rebirthChange {
  color: red;
}

#CurrName {
  color: red;
}

#input {
  height: 10%;
  width: 40%;
  place-self: center;
  text-align: center;
  font-weight: bold;
  font-family: fantasy;
  border-radius: 10px;
}