@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  height: 100vh;
  width: 100vw;
  transition: all 0.8s ease;
  overflow-x: hidden;
  background: #feedbf;
}

/* Icone referente a aba da página */
.icone_tela {
  width: 100%;
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icone_tela .imagem i {
  font-size: 2rem;
}

/* Conteudo */
.conteudo {
  width: 100%;
  height: 90%;
  padding: 1rem;
}
/* Área de busca */
.conteudo .area_pesquisa {
  width: 100%;
  height: 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.conteudo .area_pesquisa .buscar {
  width: 55rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #412973;
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 50%), 0 6px 20px 0 rgb(0 0 0 / 19%);
  padding: 0 20px;
  margin: 1rem;
  gap: 10px;
}
.conteudo .area_pesquisa .buscar i {
  font-size: 2rem;
  color: #fff;
}
.conteudo .area_pesquisa .buscar input {
  width: 80%;
  height: 3rem;
  border: none;
  background: transparent;
  outline: none;
  color: #fff;
  font-size: 1.2rem;
}
.conteudo .area_pesquisa .buscar input::placeholder {
  color: #fff;
}
/* Salas */
.conteudo .area_salas {
  width: 100%;
  height: 70rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.conteudo .area_salas ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* Card salas */
.conteudo .area_salas ul li {
  width: 55rem;
  height: 6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #412973;
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 50%), 0 6px 20px 0 rgb(0 0 0 / 19%);
  padding: 0 20px;
  margin: 1rem;
}

.conteudo .area_salas ul li a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
}
.conteudo .area_salas ul li a .prof-materia h3 {
  font-size: 1.8rem;
  color: #fff;
  padding: 0 0 0.5rem 0;
}
.conteudo .area_salas ul li a .prof-materia span {
  font-size: 1rem;
  color: #fff;
}

.conteudo .area_salas ul li a .img-trofeu {
  align-items: center;
  display: flex;
  gap: 10px;
}
.conteudo .area_salas ul li a .img-trofeu img {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  border-radius: 50%;
}
.conteudo .area_salas ul li a .img-trofeu i {
  font-size: 3rem;
}

/* Hover */
.conteudo .area_salas ul li:hover {
  transform: scale(1.02);
  cursor: pointer;
  transition: all 0.4s easy-in-out;
}

/* Responsivos */
@media screen and (max-width: 1000px){
    .conteudo .area_pesquisa .buscar {
        width: 50rem;
      }
      .conteudo .area_salas ul li {
        width: 50rem;
      }
}
@media screen and (max-width: 950px){
    .conteudo .area_pesquisa .buscar {
        width: 45rem;
      }
      .conteudo .area_salas ul li {
        width: 45rem;
      }
}
@media screen and (max-width: 850px){
    .conteudo .area_pesquisa .buscar {
        width: 40rem;
      }
      .conteudo .area_salas ul li {
        width: 40rem;
      }
}
@media screen and (max-width: 760px){
    .conteudo .area_pesquisa .buscar {
        width: 35rem;
      }
      .conteudo .area_salas ul li {
        width: 35rem;
      }
}
@media screen and (max-width: 670px){
    .conteudo .area_pesquisa .buscar {
        width: 30em;
      }
      .conteudo .area_salas ul li {
        width: 30rem;
      }
}
@media screen and (max-width: 600px){
    .conteudo .area_pesquisa .buscar {
        width: 25em;
      }
      .conteudo .area_salas ul li {
        width: 25rem;
      }
      .conteudo .area_salas ul li a .prof-materia h3 {
        font-size: 1.5rem;
      }
      .conteudo .area_salas ul li a .prof-materia span {
        font-size: 1rem;
      }
      .conteudo .area_salas ul li a .img-trofeu img {
        width: 3rem;
        height: 3rem;
      }
      .conteudo .area_salas ul li a .img-trofeu i {
        font-size: 2.5rem;
      }
}
@media screen and (max-width: 530px){
    .conteudo .area_pesquisa .buscar {
        width: 20em;
      }
      .conteudo .area_salas ul li {
        width: 20rem;
      }
      .conteudo .area_pesquisa .buscar i {
        font-size: 1.3rem;
      }
      .conteudo .area_pesquisa .buscar input {
        font-size: 1rem;
      }
      .conteudo .area_salas ul li a .prof-materia h3 {
        font-size: 1.1rem;
      }
      .conteudo .area_salas ul li a .prof-materia span {
        font-size: 0.8rem;
      }
      .conteudo .area_salas ul li a .img-trofeu img {
        width: 2rem;
        height: 2rem;
      }
      .conteudo .area_salas ul li a .img-trofeu i {
        font-size: 2rem;
      }
}
@media screen and (max-width: 450px){
    .conteudo .area_pesquisa .buscar {
        width: 15em;
      }
      .conteudo .area_salas ul li {
        width: 15rem;
      }
      .conteudo .area_pesquisa .buscar i {
        font-size: 1rem;
      }
      .conteudo .area_salas ul li a .prof-materia h3 {
        font-size: 1rem;
      }
      .conteudo .area_salas ul li a .prof-materia span {
        font-size: 0.7rem;
      }
      .conteudo .area_salas ul li a .img-trofeu img {
        width: 1.5rem;
        height: 1.5rem;
      }
      .conteudo .area_salas ul li a .img-trofeu i {
        font-size: 1.5rem;
      }
      
}
@media screen and (max-width: 360px){
    .conteudo .area_pesquisa .buscar {
        width: 10em;
      }
      .conteudo .area_salas ul li {
        width: 10rem;
      }
      .conteudo .area_salas ul li a .prof-materia{
        width: 100%;
      }
      .conteudo .area_salas ul li a .prof-materia h3 {
        font-size: 1rem;
      }
      .conteudo .area_salas ul li a .prof-materia span {
        font-size: 0.8rem;
      }
      .conteudo .area_salas ul li a .img-trofeu {
        display: none;
      }
}
@media screen and (max-width: 300px){
      .conteudo .area_salas ul li a .prof-materia h3 {
        font-size: 0.8rem;
      }
      .conteudo .area_salas ul li a .prof-materia span {
        font-size: 0.5rem;
      }

}