@import url("https://fonts.googleapis.com/css2?family=Rubik&display=swap");

* {
  font-family: "Rubik", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.cont-admin {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
#admin-pass {
  width: 90%;
  font-size: 2vw;
  padding: 5px;
}
.saveButton {
  user-select: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 10%;
  height: 100%;
  font-size: 1.2vw;
  padding: 5px;
  border: black 3px solid;
  background-color: rgb(133, 209, 133);
}
.saveButton:hover {
  cursor: pointer;
  font-weight: 700;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: space-between; */
  height: 100%;
}
html {
  height: 100%;
  width: 100%;
}
.titulo-cont {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-around;
  align-items: center;
  height: 10vh;
}
.titulo-cont div {
  border: solid 2px black;
  border-bottom: none;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 2rem;
  user-select: none;
}
.titulo-cont div:hover {
  background-color: rgba(255, 159, 159, 0.705);
  cursor: pointer;
}
.titulo-noticias {
  background-color: rgb(255, 224, 195);
}
.titulo-mensajes {
  background-color: rgb(175, 243, 255);
}
.titulo-imagen {
  background-color: rgb(140, 245, 140);
}
.titulo-trivia {
  background-color: rgb(245, 140, 140);
}
.titulo-memes {
  background-color: darkkhaki;
}
.titulo-entrevista {
  background-color: rgb(201, 130, 201);
}
/* Noticias */
.noticias {
  display: flex; /* none */
  flex-direction: column;
  align-items: center;
  background-color: rgb(255, 224, 195);
  height: auto;
  width: 100%;
}
#titulo {
  width: 30rem;
  margin-bottom: 1rem;
}
.form-cont {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80%;
}
.form-cont input {
  margin-top: 1rem;
  height: 2.5rem;
  width: 40rem;
  font-size: 1.3rem;
  padding: 0.5rem;
}
textarea {
  resize: none;
  width: 40rem;
  font-size: 1.3rem;
  padding: 0.5rem;
  height: 12vw;
}
select {
  width: 20rem;
  height: 2.5rem;
  font-size: 1.3rem;
}
.titulo-select {
  font-size: 1.5rem;
  margin-top: 1rem;
}
.boton-send {
  margin-top: 2rem;
  border: 2px black outset;
  height: 3rem;
  width: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
  background-color: chartreuse;
  font-weight: 600;
}
.boton-send:hover {
  cursor: pointer;
  border: 3px black outset;
}
.cont-botones-noticia {
  display: flex;
  width: 20vw;
  justify-content: space-around;
}
#boton-editar {
  background-color: rgb(123, 123, 255);
}
#boton-eliminar {
  background-color: red;
}
.hiddenID {
  display: none;
}
.buscador-noticias {
  position: relative;
  width: auto;
  top: -40vw;
  left: -35vw;
  border: outset 0.5vw grey;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.137);
}
.buscador-noticias input {
  padding: 0.2vw;
  margin: 1vw;
  width: 15vw;
  font-size: 1.2vw;
}
#boton-buscar {
  background-color: rgb(123, 123, 255);
  margin-bottom: 0.5vw;
}

/* Mensajes */
.mensajes {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 90vh;
  background-color: rgb(175, 243, 255);
}
.contenedor-mensajes {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 80%;
  height: 100%;
  overflow-y: scroll;
}
.boton-recibir {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: black 3px outset;
  background-color: darksalmon;
  height: 50px;
  width: 15vw;
  user-select: none;
}
.boton-recibir:hover {
  font-weight: 700;
  cursor: pointer;
}
.mensaje {
  margin-top: 0.4rem;
  background-color: white;
  width: 99%;
  height: auto;
  display: flex;
  flex-direction: column;
  font-size: 1.2rem;
}
.mensaje p {
  margin-top: 1rem;
  padding: 0.6rem;
}
.mensaje-equis {
  font-size: 2rem;
  padding: 5px;
  width: 45px;
}
.mensaje-equis:hover {
  cursor: pointer;
  color: red;
}
.mensaje-id {
  display: none;
}
.mensaje-contenido {
  margin-top: 0;
}
.mensaje-nombre {
  border-top: 2px solid black;
  margin-top: 0;
}
.titulo-mensaje {
  border-top: 2px solid black;
}
.mensaje-email {
  border-top: 2px solid black;
}
.mensaje-fecha {
  border-top: 2px solid black;
}
.mensaje:nth-of-type(2n) {
  background-color: rgb(209, 209, 209);
}
.no-hay-mensajes {
  user-select: none;
  font-size: 2.2rem;
  text-align: center;
  width: 50vw;
  margin-top: 30vh;
}

.aviso-cont {
  position: fixed;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 15%;
  display: none; /* flex */
  opacity: 0%;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: auto;
  width: 20%;
  border: black 3px solid;
  border-radius: 10%;
  padding: 1rem;
  background-color: cornsilk;
  font-size: 1.2rem;
  transition: opacity 200ms;
}
.aviso-cont p {
  color: red;
  font-weight: 600;
}
#aviso-texto {
  margin-top: 10px;
  font-weight: 400;
  color: black;
}
#aviso-boton {
  border: 2px solid black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  width: 20%;
  background-color: rgb(133, 252, 252);
  transition: background-color 200ms;
}
#aviso-boton:hover {
  cursor: pointer;
  background-color: rgb(55, 230, 230);
}
#imagenes {
  margin: 0;
  width: 100%;
}
.input-links-cont {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow-y: scroll;
  height: 13vw;
}
.input-linkUno-cont {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.fontAw {
  font-size: 2.5rem;
}
.fontAw:hover {
  cursor: pointer;
}

/* Imagen del dia */
.imagen {
  background-color: rgb(140, 245, 140);
  display: none; /* flex */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.imagen textarea {
  margin-top: 2rem;
  height: 150px;
  width: 40vw;
}
.imagen img {
  width: 40vw;
}
.imagen input {
  margin-top: 2rem;
  width: 40vw;
  height: 2.5vw;
  font-size: 1.2vw;
  padding: 0.5vw;
}

/* Trivia */
.trivia {
  background-color: rgb(245, 140, 140);
  display: none; /* flex */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 90vh;
}
.trivia input {
  width: 50vw;
  height: 3vw;
  margin-top: 1vw;
  font-size: 1.4vw;
}

/* Memes */
.meme {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 90vh;
  width: 100vw;
  background-color: darkkhaki;
}
.meme img {
  width: 50%;
}
.meme input {
  width: 40%;
  font-size: 2vw;
  padding: 0.2vw;
}
/* Entrevista */
.entrevista {
  background-color: rgb(201, 130, 201);
  display: none; /* flex */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 90vh;
}
.entrevista input {
  width: 40%;
  font-size: 2rem;
  margin-bottom: 1rem;
}