* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: rgba(153, 184, 233, 0.3);
}
.php_ppal{
  width: 90%;
  margin: auto;
}

.fecha {
  width: 350px;
  font-size: 20px;
  padding: 20px;
  text-align: right;
  background-color: rgba(36, 223, 223, 0.278);
  border-radius: 30px 0 0 30px;
  margin-left: 900px;
  margin-top: 30px;
  border: solid 3px deeppink;
  box-shadow: 0 0 0 25 black;
}

.final_tema {
  display: flex;
  justify-content: space-between;
  background-color: coral;
  margin: 20px 0;
  padding: 5px 20px;
}

.frase {
  text-align: center;
  padding: 55px;
}

.frases {
  width: 60%;
  margin: 20px auto;
}

.img_frase {
  margin: auto;
  width: 100%;
}

.tit_4 {
  font-size: 30px;
  background-color: deeppink;
  text-align: center;
  padding: 10px 0;
  font-weight: bold;
  font-style: italic;
  animation-name: titulo;
  animation-duration: 4s;
  animation-delay: 2;
}
.grupo {
  text-align: center;
  font-size: 25px;
  background-color: cornflowerblue;
  padding: 10px;
  width: 50%;
  margin: auto;
  border-radius: 0 0 30px 30px;
  animation-name: grado;
  animation-duration: 2s;
  animation-delay: 3s;
  transition: 2s;
}

.grupo:hover {
  width: 100%;
  color: brown;
}

.container {
  margin-top: 20px;
  justify-content: center;
  margin-bottom: 30px;
  display: grid;
  grid-template:
    "c1 c1" auto
    "c2 c3" auto
    "c4 c5" auto
    "c6 c7" auto
    "c8 c9" auto
    "c10 c11" auto
    "c12 c13" auto/300px 500px;
}

.box_3:hover,
.box_5:hover,
.box_7:hover,
.box_9:hover,
.box_11:hover,
.box_13:hover {
  transform: rotate(10deg);
  transition: 1s;
  width: 600px;
}

.box {
  font-size: 25px;
  text-align: justify;
  padding: 15px;
  border-radius: 20px;
}

.box:hover {
  /* width: 600px; */
  background-color: bisque;
  border: solid 2px white;
  transform: rotate(360deg);
  /* transition: 1s; */
  font-size: 30px;
}

.box_1 {
  background-color: blueviolet;
  color: aliceblue;
  grid-area: c1;
  font-size: 30px;
  display: grid;
  align-items: center;
  justify-content: center;
}
.box_1:hover {
  color: blue;
}
.box_2 {
  background-color: rgb(43, 226, 89);
  grid-area: c2;
}
.box_3 {
  background-color: rgb(226, 189, 43);
  grid-area: c3;
}
.box_4 {
  background-color: rgb(165, 226, 43);
  grid-area: c4;
}
.box_5 {
  background-color: rgb(43, 226, 89);
  grid-area: c5;
}
.box_6 {
  background-color: rgb(226, 189, 43);
  grid-area: c6;
}
.box_7 {
  background-color: rgb(165, 226, 43);
  grid-area: c7;
}
.box_8 {
  background-color: rgb(43, 226, 89);
  grid-area: c8;
}
.box_9 {
  background-color: rgb(226, 189, 43);
  grid-area: c9;
}
.box_10 {
  background-color: rgb(165, 226, 43);
  grid-area: c10;
}
.box_11 {
  background-color: rgba(137, 43, 226, 0.535);
  grid-area: c11;
}
.box_12 {
  background-color: rgba(137, 43, 226, 0.421);
  grid-area: c12;
}
.box_13 {
  background-color: rgb(226, 189, 43);
  grid-area: c13;
}

.normas {
  width: 80%;
  background-color: blueviolet;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 10px 0;
}

.img_normas {
  width: 90%;
  margin: auto;
}

@keyframes grado {
  0% {
    background-color: blue;
    width: 50%;
  }
  50% {
    background-color: chartreuse;
  }
  100% {
    background-color: gold;
  }
}

@keyframes titulo {
  10% {
    width: 50%;
  }
  50% {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .container {
    margin-top: 20px;
    justify-content: center;
    margin-bottom: 30px;
    display: grid;
    grid-template:
      "c1 c1" auto
      "c2 c3" auto
      "c4 c5" auto
      "c6 c7" auto
      "c8 c9" auto
      "c10 c11" auto
      "c12 c13" auto/110px 300px;
  }

  .box {
    font-size: 15px;
    text-align: justify;
    padding: 10px;
    border-radius: 10px;
  }

  .box:hover {
    width:;
    background-color: bisque;
    border: solid 2px white;
    transform: rotate(0deg);
    /* transition: 1s; */
    /* font-size: 30px; */
  }

  .box_3:hover,
  .box_5:hover,
  .box_7:hover,
  .box_9:hover,
  .box_11:hover,
  .box_13:hover {
    /* transform: rotate(10deg); */
    /* transition: 1s; */
    width: 300px;
    height: auto;
  }
}