@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}
body {
  height: 100vh;
  background: var(--background);
}
.start-screen h1,
.start-screen p{
   margin-top: 0;
  margin-bottom: .75rem;
}
.start-screen,
.score-container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.score-container{
  flex-direction: row;
  gap: 20px;
}
.start-screen,
.score-container{
  padding: 100px;
  display: block;
}
.score-container-wrapper{
  display: flex;
  gap: 20px;
}
button {
  border: none;
  outline: none;
  cursor: pointer;
}
#start-button{
  width: 100%;
}
#start-button,
#restart,
#challenge {
  padding: 5px 25px;
  background-color: var(--primary);        
  font-size: 1.5em;
  border: 2px solid var(--background);   
  color: var(--text);  
  transition: all 300ms ease-out;     
  cursor: pointer;     
  text-align: center;
  border-radius: 5px;
}
#challenge{
  color: #22262a;
}
.form-hed > div{
  flex: 1;
}
#score-result{
  position: relative;
  padding: 30px;
  border-radius: 30px;
  text-align: center;
  border: 2px solid var(--placeholder);
  }
.wrong-result{
  background-color: rgb(128, 0, 0);
}
.correct-result{
  background-color: rgb(128, 0, 0);
}
#restart,
#challenge {
  margin-top: 0.9em;
  width: auto;
}
#restart{
  background-color: rgba(33, 237, 197, 0)!important;
  transition: all 200ms;
}
#challenge{
  transition: all 300ms;
}
#challenge:hover{
  background-color: rgba(33, 237, 197, 1)!important;
  transform: translateY(-10px);
}
#display-container {
  background-color: var(--secondary);
  padding: 3.1em 1.8em;
  width: 80%;
  max-width: 37.5em;
  margin: 0 auto;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  border-radius: 0.6em;
  border: 1px solid black;
}
.p-4{
  background-color: var(--secondary);
  border: none;
}
.header {
  margin-bottom: 1.8em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.6em;
  border-bottom: 0.1em solid var(--placeholder);
}
.timer-div {
  background-color: #e1f5fe;
  width: 7.5em;
  border-radius: 1.8em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7em 1.8em;
  border: 1px solid black;
  display: none;
}
.question {
  margin-bottom: 1.25em;
  font-weight: 600;
  text-align: justify;
}
.option-div {
  font-size: 0.9em;
  width: 100%;
  padding: 1em;
  margin: 0.3em 0;
  text-align: left;
  outline: none;
  background: transparent;
  border: 1px solid var(--placeholder);
  border-radius: 0.3em;
}

.option-div:disabled {
  color: var(--text);
  cursor: not-allowed;
}
#next-button {
  border: 1px solid black;
  font-size: 1em;
  margin-top: 1.5em;
  font-weight: bold;
  background-color: var(--primary);
  color: #000;
  padding: 0.7em 1.8em;
  border-radius: 0.3em;
  float: right;
  box-shadow: rgba(33, 237, 197, 0) 0px 7px 29px 0px;
  transition: box-shadow 200ms ease;
}
#next-button:disabled{
  background-color: rgba(0, 0, 0, 0.1);
}
#responder-button{
  font-size: 1em;
  margin-top: 1.5em;
  font-weight: bold;
  background-color: var(--primary);
  color: #000;
  padding: 0.7em 1.8em;
  border-radius: 0.3em;
  float: left;
  box-shadow: rgba(33, 237, 197, 0) 0px 7px 29px 0px;
  transition: box-shadow 200ms ease;
}
#next-button:disabled{
  box-shadow: none!important;
  cursor: not-allowed;
}
#next-button:hover,
#responder-button:hover{
  box-shadow: rgba(33, 237, 197, .75) 0px 7px 29px 0px;
}
.hide {
  display: none;
}
.incorrect {
  background-color: var(--incorrect);
  color: var(--text)!important;
  border-color: #d32f2f!important;
}
#score-result img{
  animation: subindo 600ms infinite alternate ease;
}

@keyframes subindo {
  0%{ transform: translateY(0px);}
  100%{ transform: translateY(-15px);}
}

.correct {
  background-color: var(--correct);
  color: #000!important;
  border-color: #21EDC5!important;
}
#user-score {
  font-size: 1.5em;
  margin-top: 30px;
}
.marcado{
  border-color: black;
}
#restart{
  position: relative;
}
#restart::after{
  content: "";
  width: 0%;
  background-color: #000;
  height: 2px;
  position: absolute;
  bottom: 10px;
  left: 30%;  
  transition: width 300ms;
}
#restart:hover{
  transform: translateY(-10px);
}
#restart:hover#restart::after{
  width: 40%;
}

.wrong-answer svg{
  fill: #fff;
  width: 120px;
  height: auto;
  padding: 20%;
  animation: resultado 1700ms alternate infinite ease-in-out;
}

.correct-answer:hover, 
.wrong-answer:hover{
  top: -15px;
  padding: 15px;
  cursor: pointer;
}

.form-hed{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 40px;
}

#info-challenge{
  padding: 30px;
  display: inline-block;
  width: 100%
}

.li-class{
  list-style-type: none;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

#score-result-container{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#result-class{
  width: 100%;
}

.table th, .table td{
  text-align: center;
}

#start-screen > div {
  width: 100%;
}

.wrong-answer{
  padding: -20px;
  position: absolute;
  right: -20px;
  top: -20px;
  transform: rotate(30deg);
  background: rgba(237, 33, 33, 0.7);
  box-shadow: 0 8px 32px 0 rgba(255, 10, 10, 0.7);
  backdrop-filter: blur( 4px );
  -webkit-backdrop-filter: blur( 4px );
  border-radius: 15px;
  animation: appear normal 500ms ease-in-out, resultado 2000ms alternate infinite ease-in-out 500ms;
  transition: top 300ms, padding 150ms ease-in-out;
}

.correct-answer{
  padding: -20px;
  position: absolute;
  right: -20px;
  top: -20px;
  transform: rotate(-30deg);
  background: rgba(33, 237, 197, .7);
  box-shadow: 0 8px 32px 0 rgba(10, 255, 202, 0.7);
  backdrop-filter: blur( 4px );
  -webkit-backdrop-filter: blur( 4px );
  border-radius: 15px;
  animation: appear normal 500ms ease-in-out, resultado 2000ms alternate infinite ease-in-out 500ms;
  transition: top 300ms ease-in-out, padding 150ms ease-in-out;
}

.correct-answer svg{
  color: #21EDC5;
  fill: #21EDC5;
  stroke: #21EDC5;
  height: 100px;
  width: auto;
  animation: resultado 1700ms alternate-reverse infinite ease-in-out;
}

.correct-answer path{
  fill: #ffffff;
  stroke: rgba( 255, 255, 255, 0.18 );
}

@keyframes resultado {
  0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg);}
  100%{ -webkit-transform: rotate(30deg); transform: rotate(30deg);}
}
@keyframes appear {
  0%{ -webkit-transform: scale(0%); transform: scale(0%);}
  100%{ -webkit-transform: scale(100%); transform: scale(100%);}
}
.dropdown-item.active {
  color: #22262a;
  background-color: var(--secondary);
}
.dropdown-item:active {
  background-color: red;
}
.btn-light{
  background-color: var(--background);
  color: var(--text);
  border-color: var(--placeholder);
}
.btn-light:hover{
  background-color: var(--secondary);
}
.dropdown-menu{
  background-color: var(--background);
}
.show>.btn-light.dropdown-toggle{
  background-color: var(--secondary);
}
.dropdown-item:hover{
  background-color: var(--secondary);
}
tr:hover{
  background-color: var(--background);
}
th svg{
  fill: var(--text);
}
th, tr, tbody, .table tbody+tbody, td{
  border-color: var(--background)!important;
}

.fixed-button-container {
  position: fixed;
  top: 70%;
  right: 10px;
  transform: translateY(-50%);
  z-index: 999; 
}

.fixed-button {
  display: block;
  background-color: #007bff;
  color: #fff;
  padding: 5px 7px;
  margin-bottom: 10px;
  text-align: center;
  text-decoration: none;
  border-radius: 25%;
}

.fixed-button:hover {
  cursor: pointer;
}

#botaofalar {
  background-color: #007bff; /* Cor de fundo padrão */
  margin-top: 7px;
}

#botaofalar.mudarCor {
  background-color: #ff9eda; /* Nova cor de fundo */
}

#modal-amigos{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

#modal-amigos #friends-container{
  border-radius: 15px;
  background-color: var(--background);
  z-index: 999;
}

#modal-amigos .friends-name, 
#modal-amigos .friends-username,
#desafios-list .friends-name, 
#desafios-list .friends-username{
  margin: 0;
}

#modal-amigos .friends-info-p{
  z-index: 11;
}

#start-button{
  color: #22262a;
}

#modal-amigos-backdrop{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .7);
  backdrop-filter: blur(10px);
  z-index: 1;
}

#info-challenge .svg-wrapper{
  width: 100px;
}

.accept{
  margin-right: 15px;
}

.decline:hover{
  fill: #d32f2f!important;
}

#info-challenge .svg-wrapper:hover svg{
  fill: var(--text);
}

.accept:hover{
  fill: var(--primary)!important;
}

#historico-list .friends-info{
  text-align: center;
  margin: 0;
}

#historico-list .friends-username{
  text-align: center;
  margin: 0;
  font-weight: 200;
}

#historico-list p{
  margin: 0;
}

.classificacao{
  width: 100%;
}

@media screen and (min-width: 481px) and (max-width: 768px) {
  .start-screen{
    padding: 50px;
  }
}

@media screen and (max-width: 480px) {
  .start-screen{
    padding: 20px;
  }
  .home-header{
    display: none;
  }
}