@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap")
/*11.Uso de la propiedad @import para importar una fuente externa*/

* {
  margin: 0;
  padding: 0;
  box-sizing: 24px;
  text-decoration: none;
} /*Por qué el selector universal (*) mantiene el error*/


body{
  font-size: medium;
  font-style: initial;
  font-weight: bold;
}/*12.Uso de estilos de texto para cambiar la apariencia del texto*/

body {
  /*4.Uso de la propiedad banckground para agregar imagen de fondo*/
  font-family: "Oswald", sans-serif;
  background: #a4a4a456;
  background-image: url(Assets/characters/pexels-therato-1933239.jpg);
  background-repeat: no-repeat;
  background-size: cover; /*6.Se establece el tamaño de la imagen de fondo*/
  background-attachment: fixed; /*7.Bloquea la galeria en el fondo de la página web*/
  background-position: 50%; /*5.Establece la posición de la imagen en el fondo de la página*/
}

h1 {
  color: #0000ff;
  background-color: rgba(10, 10, 10, 0);
}

main h1 {
  text-align: center;
  margin: 100px;
  font-size: 40px;
}

main section {
  max-width: 1500px;
  margin: auto;
}

section article {
  display: inline-block;
  width: 300px;
  height: 500px;
  background-color: rgba(
    12,
    194,
    235,
    0.058
  ); /*3.Color transparente a la galeria disminuyendo la opacidad*/
  text-align: center;
  border: solid rgba(22, 79, 170, 0.084);
  border-radius: 40px;
  margin: 5px;
  transition: 0.2s;
  object-fit: cover; /*18.Uso de la propiedad object-fit para ajustar el tamaño de la imagen*/
}

img {
  transition: 0.5s;
  cursor: pointer;
}

section article:hover {
  background-color: rgba(20, 25, 20, 0.115);
  border: solid 1px rgba(20, 25, 20, 0.114);
  transition: 0.2s;
}

section article h2 {
  color: #0f12d1;
  transition: 0.5s;
  text-align: auto;
}

section article p {
  color: #0f12d1;
  transition: 0.5s;
  text-align: auto;
}

section article:hover h2 {
  color: #ffff00; /*1.Elemento HEX*/
  transition: 0.5s;
  text-align: center;
  margin: 20px;
}

section article h2 {
  margin: 20px;
}

section article:hover p {
  color: #ffff00; /*1.Elemento HEX*/
  transition: 0.5s;
  text-align: center;
  margin: 60px;
}

section article p {
  margin: 65px;
}

article img {
  height: 300px;
}

.image_1:hover img {
  filter: drop-shadow(10px 10px 10px rgb(48, 247, 25));
  object-fit: cover;
} /*2.Componente RGB uso de filter drop-shadow*/

.image_1:hover img{
  background: linear-gradient(
    0deg,
    rgba(55, 238, 238, 0.5) 0%,
    rgba(56, 218, 209, 0.5) 100%
  );
} /*8.Uso de la propiedad linear-gradient para crear un degradado en el fondo*/

.image_1 {
  margin: 1em;
  padding: 1em;
} /*14.Uso de las unidades em para establecer el tamaño de los elementos*/

.image_1 {
  margin: 5px;
  padding: 2rem;
  border-radius: 2em 0;
} /*15.Uso de las propiedades para redondear los bordes de los elementos*/

.image_2:hover img {
  filter: drop-shadow(10px 10px 10px rgb(45, 247, 203));
  object-fit: cover;
} /*2.Componente RGB*/

.image_2:hover img {
  background: radial-gradient(
    circle,
    rgba(228, 231, 32, 0.5) 0%,
    rgba(191, 235, 33, 0.5) 100%
  );
} /*9.Uso de la propiedad radial-gradient para crear un degradado en el fondo*/

.image_3:hover img {
  filter: drop-shadow(10px 10px 10px rgb(199, 20, 199));
  object-fit: cover;
} /*2.Componente RGB*/

.image_3:hover img{
  text-transform: lowercase;
  letter-spacing: normal;
  text-shadow: none;
} /*10.Usar estilos de texto para cambiar la apariencia del texto*/

.image_4:hover img {
  filter: drop-shadow(10px 10px 10px rgb(14, 14, 145));
  object-fit: cover;
} /*2.Componente RGB*/

.image_4 {
  padding: 0.5rem;
  margin: 0.5rem;
  border-radius: 10px;
}/*13.Uso de las unidades rem para establecer el tamaño de los elementos*/

.image_5:hover img {
  filter: drop-shadow(10px 10px 10px rgb(147, 156, 12));
  object-fit: cover;
} /*2.Componente RGB*/

.image_6:hover img {
  filter: drop-shadow(10px 10px 10px rgb(245, 252, 37));
}

.image_7:hover img {
  filter: drop-shadow(10px 10px 10px rgb(238, 55, 125));
}

.image_8:hover img {
  filter: drop-shadow(10px 10px 10px rgb(26, 212, 212));
}

.image_9:hover img {
  filter: drop-shadow(10px 10px 10px rgb(226, 223, 24));
}

.image_10:hover img {
  filter: drop-shadow(10px 10px 10px rgb(48, 199, 43));
}

.image_11:hover img {
  filter: drop-shadow(10px 10px 10px rgb(236, 67, 132));
}

.image_12:hover img {
  filter: drop-shadow(10px 10px 10px rgb(22, 190, 196));
}

.image_13:hover img {
  filter: drop-shadow(10px 10px 10px rgb(203, 219, 54));
}

.image_14:hover img {
  filter: drop-shadow(10px 10px 10px rgb(184, 19, 121));
}

.image_15:hover img {
  filter: drop-shadow(10px 10px 10px rgb(235, 235, 24));
}

.image_16:hover img {
  filter: drop-shadow(10px 10px 10px rgb(25, 221, 25));
}

.image_17:hover img {
  filter: drop-shadow(10px 10px 10px rgb(15, 15, 219));
}

.image_18:hover img {
  filter: drop-shadow(10px 10px 10px rgb(230, 36, 204));
}

.image_19:hover img {
  filter: drop-shadow(10px 10px 10px rgb(211, 214, 42));
}

.image_20:hover img {
  filter: drop-shadow(10px 10px 10px rgb(72, 184, 20));
}

.image_21:hover img {
  filter: drop-shadow(10px 10px 10px rgb(194, 240, 31));
}

.image_22:hover img {
  filter: drop-shadow(10px 10px 10px yellow);
}

.image_23:hover img {
  filter: drop-shadow(10px 10px 10px rgb(160, 230, 48));
}

.image_24:hover img {
  filter: drop-shadow(10px 10px 10px rgb(45, 214, 178));
}

.image_25:hover img {
  filter: drop-shadow(10px 10px 10px rgb(46, 143, 235));
}

.image_26:hover img {
  filter: drop-shadow(10px 10px 10px rgb(8, 148, 8));
}

.image_27:hover img {
  filter: drop-shadow(10px 10px 10px rgb(12, 12, 204));
}

.image_28:hover img {
  filter: drop-shadow(10px 10px 10px rgb(26, 199, 230));
}

.image_29:hover img {
  filter: drop-shadow(10px 10px 10px rgb(204, 204, 18));
}

.image_30:hover img {
  filter: drop-shadow(10px 10px 10px rgb(231, 30, 107));
}

.image_31:hover img {
  filter: drop-shadow(10px 10px 10px rgb(201, 64, 171));
}

.image_32:hover img {
  filter: drop-shadow(10px 10px 10px rgb(224, 224, 14));
}

.image_33:hover img {
  filter: drop-shadow(10px 10px 10px rgb(13, 211, 13));
}

.image_34:hover img {
  filter: drop-shadow(10px 10px 10px rgb(218, 238, 38));
}

.image_35:hover img {
  filter: drop-shadow(10px 10px 10px rgb(26, 26, 184));
}

.image_36:hover img {
  filter: drop-shadow(10px 10px 10px rgb(60, 235, 226));
}

.image_37:hover img {
  filter: drop-shadow(10px 10px 10px rgb(219, 219, 13));
}

.image_38:hover img {
  filter: drop-shadow(10px 10px 10px rgb(91, 235, 34));
}

.image_39:hover img {
  filter: drop-shadow(10px 10px 10px rgb(95, 243, 95));
}

.image_40:hover img {
  filter: drop-shadow(10px 10px 10px rgb(253, 41, 189));
}

.image_41:hover img {
  filter: drop-shadow(10px 10px 10px rgb(176, 30, 212));
}

.image_42:hover img {
  filter: drop-shadow(10px 10px 10px rgb(129, 129, 21));
}

.image_43:hover img {
  filter: drop-shadow(10px 10px 10px rgb(221, 221, 23));
}

.image_44:hover img {
  filter: drop-shadow(10px 10px 10px rgb(112, 240, 53));
}

.image_45:hover img {
  filter: drop-shadow(10px 10px 10px rgb(13, 168, 13));
}

.image_46:hover img {
  filter: drop-shadow(10px 10px 10px rgb(20, 20, 161));
}

.image_47:hover img {
  filter: drop-shadow(10px 10px 10px rgb(190, 190, 14));
}

.image_48:hover img {
  filter: drop-shadow(10px 10px 10px rgb(28, 226, 240));
}

.image_49:hover img {
  filter: drop-shadow(10px 10px 10px rgb(11, 153, 179));
}

.image_50:hover img {
  filter: drop-shadow(10px 10px 10px rgb(245, 245, 31));
}

.image_51:hover img {
  filter: drop-shadow(10px 10px 10px rgb(210, 223, 38));
}

.image_52:hover img {
  filter: drop-shadow(10px 10px 10px rgb(30, 211, 196));
}

.image_53:hover img {
  filter: drop-shadow(10px 10px 10px rgb(12, 173, 12));
}

.image_54:hover img {
  filter: drop-shadow(10px 10px 10px rgb(171, 236, 50));
}

.image_55:hover img {
  filter: drop-shadow(10px 10px 10px rgb(206, 206, 28));
}

.Fuerza {
  font-weight: bold;
  font-size: 25px;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 1;
} /*12.Uso de estilos de texto para cambiar la apariencia del texto*/

.galeria {
  height: 100vh;
  width: 100vw;
} /*16.Uso de las unidades vh y vw para establecer el tamaño de los elementos*/

.image_2 {
  max-width: max-content;
  height: auto;
}/*17. Uso de la propiedad max-width para establecer el tamaño máximo de los elementos*/