@import url("https://fonts.googleapis.com/css2?family=Grandstander:ital,wght@0,400;0,700;1,100&display=swap");

:root {
  --font-family: "Grandstander";
  --white: #ffffff;
  --white-transparent: #ffffff2a;
  --box-shadow: rgba(0, 0, 0, 0.3) 2px 1px 10px 1px;
  --green-darker: #0f5b01;
  --green-dark: #27ae60;
  --green-light: #2ecc71;
  --green-dark-transparent: #27ae5f6d;
  --yellow-darker: #df7a0e;
  --yellow-dark-transparent: #f39d1258;
  --yellow-dark: #f39c12;
  --yellow-light: #f1c40f;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-family);
  color: var(--white);
}

html {
  height: 100vh;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

body {
  background: url("../images/tropical.jpg");
  background-size: cover;
  background-position: center center;
}

#cheat {
  position: absolute;
  left: 135px;
  top: 10px;
}

.cheatFlex {
  display: flex;
  column-gap: 5px;
}

.cheatText {
  font-weight: bold;
  font-size: 8px;
}

.cheatButton {
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.greenMainTitle {
  display: block;
  width: 100vw;
  padding: 30px;
  margin-top: -50px;
  text-align: center;
  font-size: 45pt;
  color: var(--green-light);
  font-weight: bold;
}

.mainPageContainer {
  transform: scale(90%);
}

.betacontainer {
  overflow: hidden;
  position: fixed;
  bottom: 0;
  right: 0;
  height: 100px;
  width: 100px;
  z-index: 2;
}

.beta {
  background-color: red;
  transform: rotate(-45deg);
  width: 200px;
  height: 35px;
  display: flex;
  position: absolute;
  top: 50px;
  left: -30px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* GRID */
.mainGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 45vh 40vh;
  grid-gap: 2vw;
  margin-left: -40px;
  margin-right: -40px;
}

.mainClickerContainer {
  grid-column: 2;
  grid-row: 1;
}

.mainButtonsContainer {
  grid-column: 1;
  grid-row: 1/3;
}

.mainBuffsContainer {
  grid-column: 3;
  grid-row: 1/3;
}

.mainStatsContainer {
  grid-column: 2;
  grid-row: 2;
}

.infoContainer {
  display: none;
  grid-column: 1;
  grid-row: 1/3;
}

/* CLICKER */
.mainClickerContainer,
.mainBuffsContainer,
.mainButtonsContainer,
.mainStatsContainer {
  display: flex;
  justify-content: center;
}

.clickerContainer {
  background-color: var(--white-transparent);
  box-shadow: var(--box-shadow);
  width: 450px;
  height: 450px;
  border-radius: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 65px;
}

#clicker {
  width: 256px;
  height: 256px;
  --animate-duration: 0.2s;
  cursor: pointer;
  margin-bottom: 20px;
}

.normalCursor {
  width: 30px;
  height: 30px;
}

.smallCursor {
  width: 28px;
  height: 28px;
}

/* TIERS */
.mainButtonsContainer {
  justify-content: left;
}

.downArrow {
  font-size: 25pt;
  text-align: center;
}

.invisibleDot {
  color: #00000000;
}

.buffsContainer,
.buttonsContainer,
.statsContainer {
  width: 100%;
}

.buttonsContainer,
.buffsContainer {
  display: flex;
  column-gap: 30px;
  flex-direction: column;
  width: 98%;
}

.buttonGroup {
  display: flex;
  column-gap: 10px;
  align-items: center;
  vertical-align: middle;
  margin-bottom: 10px;
}

.buffButtonGroup {
  column-gap: initial;
}

.infoMobile {
  display: none;
}

.additionalButtons {
  order: 2;
  display: flex;
  align-items: center;
  column-gap: 15px;
}

.buyButton,
.buffButton,
.buy10Button {
  display: flex;
  background-color: var(--green-dark);
  padding: 15px 15px 15px 20px;
  border: none;
  border-radius: 15px;
  min-width: 375px;
  box-shadow: var(--box-shadow);
  cursor: pointer;
  column-gap: 20px;
  margin-left: 10px;
  margin-top: 10px;
  --animate-duration: 0.1s;
}

.buffButton {
  min-width: 380px;
}

.buy10Button {
  min-width: initial;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px 10px 15px 10px;
  height: 100px;
  width: 100px;
  font-size: 13pt;
  margin-left: 0px;
}

.displayPrice10 {
  display: flex;
}

.buttonPic {
  display: flex;
  align-self: center;
}

.textTitle {
  margin-bottom: 10px;
}

.buttonText {
  display: flex;
  flex-direction: column;
  text-align: left;
  font-size: 17pt;
  width: 100%;
  vertical-align: bottom;
}

.buttonSubtext {
  font-size: 15pt;
}

.ownedNumberOnButton {
  position: absolute;
  right: 0px;
  bottom: 0px;
  font-size: 20pt;
  color: rgba(255, 255, 255, 0.392);
}

/* BUFFS */
.mainBuffsContainer {
  justify-content: right;
}

.buffButton {
  background-color: var(--yellow-dark);
}

.buyButton:hover,
.buy10Button:hover {
  background-color: var(--yellow-dark);
}

.buffButton:hover {
  background-color: var(--yellow-darker);
}

.greyed:hover {
  background-color: var(--green-dark-transparent);
}

.greyedBuff {
  background-color: var(--yellow-dark-transparent);
  color: var(--white-transparent);
  cursor: initial;
}

.greyedBuff:hover {
  background-color: var(--yellow-dark-transparent);
}

/* .lastBuff {
  order: 99;
} */

/* INFO PANEL */
.greenTitle,
.yellowTitle {
  font-size: 45pt;
  color: var(--green-light);
  font-weight: bold;
}

.yellowTitle {
  color: #ffe36e;
}

.welcomeText h2 {
  font-size: 20pt;
  margin-bottom: 2vh;
}

.tuto h2,
.lexique h2,
.warning h2 {
  font-size: 20pt;
  margin-bottom: 2vh;
  margin-top: 5vh;
}

.welcomeText p,
.tuto p,
.lexique p,
.warning p {
  font-size: 16pt;
  text-align: justify;
}

.statsContainer h1,
.buffsContainer h1,
.buttonsContainer h1 {
  margin-bottom: 20px;
  margin-left: 10px;
}

.buffsContainer h1 {
  text-align: right;
}

/* CHANGELOG PANEL */
#changelogText h2,
#roadmapText h2 {
  margin-bottom: 15px;
  margin-top: 30px;
}

#changelogText p {
  margin-bottom: 10px;
  margin-top: 15px;
}

#changelogText li {
  margin-left: 20px;
}

/* STATS */
.nbClicks p,
#nothing p,
#nothingTiers p {
  font-size: 16pt;
  text-align: justify;
  margin-left: 10px;
}

.statsClicksNumber {
  margin-bottom: 10px;
}

.mainStatsContainer {
  z-index: -20;
}

/* SOUNDS */
.hiddenFrame {
  height: 1px;
  width: 1px;
  opacity: 0;
}

.videoButton {
  position: absolute;
  top: 10px;
  left: 60px;
  cursor: pointer;
  display: flex;
  column-gap: 5px;
  height: 40px;
  max-width: 65px;
}

.soundText {
  font-weight: bold;
  font-size: 14px;
}

/* FOOTER */
footer {
  display: none;
}

.footerText {
  text-align: center;
  padding: 30px;
  font-size: 16pt;
}

/* TIERS AND BUFFS */
.unavailable {
  display: none;
}

.greyed {
  background-color: var(--green-dark-transparent);
  color: var(--white-transparent);
  cursor: not-allowed;
}

.stats {
  display: none;
}

.buffs,
.tiers {
  height: 100%;
  overflow-y: scroll;
  scrollbar-width: none;
}

.buffs {
  display: flex;
  justify-content: right;
}

.buffs::-webkit-scrollbar,
.tiers::-webkit-scrollbar {
  display: none;
}

/* BANNERS */
.banner1 {
  width: 100vw;
  height: 100px;
  background: url("/assets/images/banners/lamas.png");
  background-size: cover;
  position: absolute;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
}

.banner1 h1 {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 50pt;
  animation: blinkingText 2s infinite;
}

@keyframes blinkingText {
  0% {
    color: yellow;
  }
  25% {
    color: rgb(0, 255, 8);
  }
  50% {
    color: #00e5ff;
  }
  75% {
    color: #ea00ff;
  }
  100% {
    color: rgb(255, 153, 0);
  }
}

.banner2 {
  width: 100vw;
  height: 80px;
  background: url("/assets/images/banners/vaches.png");
  background-size: cover;
  position: absolute;
  top: 0;
  z-index: -100;
  display: flex;
}

.banner2 h1 {
  font-family: "Times New Roman", Times, serif;
  font-size: 50pt;
  color: rgb(255, 0, 212);
}

.banner2left {
  width: 45vw;
  margin-left: 5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.banner2right {
  width: 50vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.banner2right p {
  color: rgb(255, 0, 30);
  font-size: 20pt;
  background-color: #00e5ff44;
}

.banner3 {
  background: url("/assets/images/banners/window.png");
  background-size: cover;
  position: absolute;
  bottom: 20vh;
  left: 35%;
  height:240px;
  width: 384px;
  z-index: 1;
  display: flex;
}

.banner3 h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30pt;
  position: absolute;
  top: 25%;
  left: 25%;
  color: rgb(0, 0, 0);
}

@media screen and (max-width: 1310px) {
  .banner1 h1, .banner2 h1 {
    font-size: 40pt;
  }
}

@media screen and (max-width: 1050px) {
  .banner1 h1, .banner2 h1 {
    font-size: 30pt;
  }
}

@media screen and (max-width: 600px) {
  .banner2right p {
    font-size: 15pt;
  }

  .banner1 h1, .banner2 h1 {
    font-size: 20pt;
  }
}

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

}

/* MEDIA QUERIES */
@media screen and (max-width: 1200px) {
  html {
    height: auto;
  }

  .mainGrid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 500px 450px;
  }

  .mainClickerContainer {
    grid-column: 1;
    grid-row: 1;
  }

  .mainBuffsContainer {
    grid-column: 2;
    grid-row: 1;
  }

  .mainButtonsContainer {
    grid-column: 1;
    grid-row: 2;
  }

  .mainStatsContainer {
    grid-column: 2;
    grid-row: 2;
  }

  .infoContainer {
    display: none;
  }
}

@media screen and (max-width: 992px) {
  .buttonsContainer h1,
  .buffsContainer h1 {
    text-align: center;
  }

  .buttonGroup {
    justify-content: center;
  }

  .buffs {
    display: flex;
    justify-content: center;
  }
}

@media screen and (max-width: 970px) {
  .mainPageContainer {
    min-height: 100vh;
    transform: initial;
  }

  .mainGrid {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(4);
    margin-left: initial;
    margin-right: initial;
    grid-template-rows: auto 400px 400px 400px;
  }

  .mainClickerContainer {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 50px;
    margin-top: 30px;
  }

  .mainButtonsContainer {
    grid-column: 1;
    grid-row: 2;
    justify-content: center;
  }

  .mainBuffsContainer {
    grid-column: 1;
    grid-row: 3;
    justify-content: center;
  }

  .mainStatsContainer {
    grid-column: 1;
    grid-row: 4;
  }

  .buttonGroup {
    row-gap: 20px;
    align-items: center;
  }

  .infoMobile {
    display: block;
  }

  .greenMainTitle {
    margin-top: initial;
  }

  .buyButton {
    width: 60%;
  }

  .buffsContainer {
    min-width: 90%;
  }

  .stats {
    display: none;
  }

  .videoButton {
    display: none;
  }
}

@media screen and (max-width: 576px) {
  footer {
    display: block;
    background-color: var(--green-dark);
    height: 100px;
    display: flex;
    justify-content: center;
  }

  .mainGrid {
    grid-template-rows: auto auto auto auto;
  }

  .clickerContainer {
    width: 300px;
    height: 300px;
    border-radius: 250px;
    padding-top: 35px;
  }

  #clicker {
    width: 154px;
    height: 154px;
  }

  .additionalButtons {
    flex-direction: column;
    justify-content: center;
  }

  .buyButton,
  .buffButton {
    padding: 15px 15px 15px 20px;
    font-size: 17pt;
    border-radius: 15px;
    min-width: 300px;
    width: 80%;
    max-width: 90%;
    column-gap: 20px;
  }

  .buy10Button {
    min-width: 115px;
    width: 100%;
    height: 100%;
  }

  .footerText {
    font-size: 14pt;
  }

  .buffs,
  .tiers {
    height: initial;
    overflow-y: initial;
  }

  .downArrow {
    display: none;
  }
}

.unavailable {
  display: none;
}