:root {
  --lavender-blush: #f1e4e8ff;
  --platinum: #e2dcdeff;
  --thistle: #ceb1beff;
  --old-rose: #b97375ff;
  --raisin-black: #2d2d34ff;
}

body {
  width: 100hw; /**altura de pantalla*/
  height: 100vh; /*ancho de pantalla*/
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--platinum);
  background-color: var(--lavender-blush);
  font-size: 18px;
}

h1 {
  color: var(--raisin-black);
  font-size: 35px;
}

table {
  background-color: var(--old-rose);
  width: 70%;
  height: 50%;
  border-radius: 25px;
  padding: 15px;
  border-style: solid;
  border-color: var(--thistle);
  text-align: center;
  margin: 15px;
}

th {
  width: 100px;
  text-align: center;
  color: var(--raisin-black);
  background-color: var(--thistle);
  padding: 15px, 10px, 15px, 10px;
  border-style: groove;
}

td {
  text-align: left;
  border-style: ridge;
  border-color: var(--thistle);
  padding: 15px;
}

p {
  font-size: 36px;
  padding: 15px;
}

.alerta {
  background-color: var(--raisin-black);
  color: var(--thistle);
  font-style: italic;
  font-weight: 900;
}

/* Realiza un evento al pasar el 
    puntero sobre el campo */

.alerta:hover {
  background-color: var(--lavender-blush);
  color: var(--raisin-black);
}

.columna1 {
  width: 15%;
  background-color: var(--platinum);
  color: var(--raisin-black);
}

.columna2 {
  width: 35%;
}

/*a nivel de clase se le da a cada uno muchas veces 
a nivel de id, identificador para cualquier elemento*/

#revision {
  background-color: var(--thistle);
}

#clave {
  background-color: var(--raisin-black);
  color: var(--old-rose);
}

.fila {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 50%;
  background-color: var(--raisin-black);
  gap: 15px;
}

.caja {
  width: 80px;
  height: 80px;
  margin: 15px;
  text-align: center;
  color: var(--old-rose);
  background-color: var(--lavender-blush);
  border-radius: 35px 25px 25px 35px;
}

.caja:hover {
  background-color: var(--old-rose);
  color: var(--raisin-black);
  border-style: solid;
  border-color: var(--thistle);
  border-radius: 15px 45px 25px 35px;
}

.color1 {
  color: aqua;
  background-color: #A06CD5;
}

.color2 {
  color: black;
  background-color: #6247AA;
}

.color3 {
  color: yellowgreen;
  background-color: #062726;
}

.color4 {
  color: black;
  background-color: #E2CFEA;
}

form {
  background-color: var(--old-rose);
  flex-direction: column;
  display: flex;
  color: black;
  background-color: darkorchid;
  border-style: solid;
  border-radius: 15px;
  padding: 15px;
  margin: 15px;
}