:root{
    --preto:rgb(0, 0, 0);
    --cinza:rgb(47, 47, 47);
    --amarelo:rgb(246, 249, 48);
    --verde:rgb(210, 248, 152);
    --branco:rgb(252, 252, 252);
}

body{
  overflow-y: hidden;
}

.container-fluid{
  display: flex;
  justify-content: center;
  align-items: center;
  margin:auto;
}

main::-webkit-scrollbar {
  background-color: #3441f079;
  border-radius: 0px 10px 10px 0px;
  width: 10px;
}
main::-webkit-scrollbar-thumb {
  background-color: #a3b801; /* Cor da alça */
  border-radius: 5px; /* Arredonda as bordas da alça */
  border: 2px solid #c8ff00; /* Borda da alça (opcional) */
}

#left-nav{
    /*tamanho e cor*/
    width: 300px;
    height: 800px;
    background-color:rgb(189, 255, 46);
    float: left;  
    transition: 0.3s all;

    
}

#options{
  background-color:rgba(151, 177, 17, 0.836);
  width: 300px;
  height: 800px;
  padding-left: 10px;
}

#icone{
  width: 50px;
}

img{
  width: 25px;
}

svg{
  color: black;
}

main{
 
  background-image:linear-gradient(to bottom right,rgb(41, 149, 5),rgba(69, 198, 18, 0.737),rgb(61, 125, 8));
  width: 1230px;
  height: 800px;

  margin-top: -90px;
  margin: auto;
  overflow: scroll;
  overflow-x: hidden;
  box-shadow: 2px 2px 2px 5px rgba(8, 98, 242, 0.543);
}


#topic{
  background-image:linear-gradient(to right bottom,rgb(23, 17, 43),rgb(19,13,12));
  width: 950px;
  height: 200px;
  padding: 20px;

  margin: 20px;
  color: rgb(251, 255, 0);
  border-radius: 10px;
  box-shadow: 2px 2px 2px 5px rgba(59, 59, 205, 0.612);
  
  & #topic-title, #topic-prev{
    color: rgb(164, 164, 221);
    
  }
}

button{
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: rgb(0, 0, 0);
}

#create{
  display: flex;
  background-color: black;
}

/* From Uiverse.io by NlghtM4re */ 
.container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 150px;
}

.tree {
  position: relative;
  width: 50px;
  height: 50px;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(30deg);
  animation: treeAnimate 5s linear infinite;
}

@keyframes treeAnimate {
  0% {
    transform: rotateX(-20deg) rotateY(360deg);
  }

  100% {
    transform: rotateX(-20deg) rotateY(0deg);
  }
}

.tree div {
  position: absolute;
  top: -50px;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: translateY(calc(25px * var(--x))) translateZ(0px);
}

.tree div.branch span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #69c069, #77dd77);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  border-bottom: 5px solid #00000019;
  transform-origin: bottom;
  transform: rotateY(calc(90deg * var(--i))) rotateX(30deg) translateZ(28.5px);
}

.tree div.stem span {
  position: absolute;
  top: 110px;
 /* updated top value */
  left: calc(50% - 7.5px);
  width: 15px;
  height: 50%;
  background: linear-gradient(90deg, #bb4622, #df7214);
  border-bottom: 5px solid #00000019;
  transform-origin: bottom;
  transform: rotateY(calc(90deg * var(--i))) translateZ(7.5px);
}

.shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  filter: blur(20px);
  transform-style: preserve-3d;
  transform: rotateX(90deg) translateZ(-65px);
}

.loader {
  margin-top: 100px;
  margin-left:500px;
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper {
  width: fit-content;
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.catContainer {
  width: 100%;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.catbody {
  width: 80px;
}
.tail {
  position: absolute;
  width: 17px;
  top: 50%;
  animation: tail 0.5s ease-in infinite alternate-reverse;
  transform-origin: top;
}
@keyframes tail {
  0% {
    transform: rotateZ(60deg);
  }
  50% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-20deg);
  }
}
.wall {
  width: 300px;
}
.text {
  display: flex;
  flex-direction: column;
  width: 50px;
  position: absolute;
  margin: 0px 0px 100px 120px;
}
.zzz {
  color: black;
  font-weight: 700;
  font-size: 15px;
  animation: zzz 2s linear infinite;
}
.bigzzz {
  color: black;
  font-weight: 700;
  font-size: 25px;
  margin-left: 10px;
  animation: zzz 2.3s linear infinite;
}
@keyframes zzz {
  0% {
    color: transparent;
  }
  50% {
    color: black;
  }
  100% {
    color: transparent;
  }
}