@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.isac-upper {
  background-image: url(../imagem/fundo-tac.jpg);
  background-position: center;
  background-size: cover;
}

.header-tac {
  background-color: rgb(99, 5, 2);
  box-shadow: -4px 2px 10px black;
  height: 200px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: relative;
  z-index: 2;
}

.header-twilight {
  box-shadow: 4px 5px 10px black;
  background-color: rgb(184, 9, 184);

  height: 200px;
  display: flex;
  justify-content: center center;
  align-items: center;
  position: relative;
}



.p-holder {
  background-color: rgb(250, 0, 250);
}

.size {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.tac-holder,
.twilight-holder,
.menu-holder {
  width: 150px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.twilight {
  margin-left: 150px;
  margin-top: 150px;
  width: 120%;
  height: 90%;
}

.title-holder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.btn-danger {
  background-color: rgb(99, 5, 2);
  border: none;
  width: 150px;
  color: rgb(174, 173, 177);
}

.btn-danger:hover {
  background-color: rgb(161, 10, 5);
  border: none;
}

.title {
  font-size: 25px;
  color: rgb(238, 232, 232);
  text-align: center;
}

.tac {
  margin-right: 250px;
  margin-top: 180px;
  width: 120%;
  height: 90%;
}

.fundos {
  padding: 0;
  position: absolute;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: -1;
  height: 100.8%;
}

.fundo-tac {
  
  height: 156.5%;
}

.espaço {
  background-color: rgb(15, 12, 12);
  height: 110%;
}

.fundo-twilight {
  background-image: url('../imagem/imagem-fundo.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center auto;
  height: 156.5%;
}

.main-tac {
  box-shadow: -4px 5px 10px black;
  /* display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center; */
  text-align: center;
  background-color: rgb(99, 5, 2);
  
  z-index: 1;
}

.password-holder {
  margin-top: 100px;
  position: sticky;
  top: 0;
}

.oculto {
  display: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.letter-holder {
  position: relative;
  width: 100%;
  max-width: 500px;

  margin: 40px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Largura da barra de rolagem */
::-webkit-scrollbar {
  width: 8px;
}

/* Cor do fundo/trilho da barra */
::-webkit-scrollbar-track {
  background: rgb(159, 112, 173);
}

/* Cor do puxador (a parte que se move) */
::-webkit-scrollbar-thumb {
  background: rgb(110, 30, 93);
  border-radius: 10px;
  border: 1px solid rgb(8, 2, 14);
}

/* Cor do puxador ao passar o mouse */
::-webkit-scrollbar-thumb:hover {
  background: #e220b2;
}


.driving {
  width: 15%;
  transform: translate(94px, -25px);
}

.Sorriso {
  width: 15%;
  transform: translate(190px, -5px);
}

.pepsi {
  width: 15%;
  transform: translate(206px, -15px);
}

.Morrer {
  width: 15%;
  transform: translate(187px, -10px);
}

.letter {
  width: 100%;
  height: auto;
  display: block;
}

.EueVoce {
  width: 15%;
  transform: translate(30px, -20px);
}

.conteudo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 110px;
  padding-bottom: 150px;
  padding-left: 10px;
  box-sizing: border-box;



  overflow-y: auto;

}

.paragrafo-letter-1 {
  color: #160d0b;
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 23px;
  line-height: 28px;

  margin: 0;
  text-align: left;
}

.paragrafo-letter-2 {
  color: #160d0b;
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 22px;
  line-height: 38px;
  padding-top: 8px;
  margin: 0;
  text-align: left;
}

.password::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(0.9);
  /* Muda a cor do ícone */
}

.password::-webkit-scrollbar {
  background-color: rgb(20, 19, 34);

}

.password {
  background-color: rgb(102, 93, 182);
  border: 2px solid rgb(255, 7, 7);
  border-radius: 10px;
  color: blue;


}

.paragrafo {
  color: rgb(218, 214, 214);
  text-shadow: 2px 1.6px 12px rgb(243, 242, 242);

}

.main-twilight {
  box-shadow: 4px 5px 10px black;
  background-color: rgb(172, 19, 134);
  height: 100%;
  min-height: 138.2vh;
}

.comemoracao {

  height: 170px;
  background-color: rgb(187, 123, 187);
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: 40px;
  border-top-left-radius: 40px;
  border-bottom-right-radius: 8px;
  border-top-right-radius: 8px;

}

.parabens {
  box-shadow: 1px 1px 20px rgb(184, 9, 184);

  width: 84%;
  margin-left: 20px;
  border-radius: 10px;
}

.conteudoTwilight {
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.brinks {
  height: fit-content;
}