* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
}

header {
  width: 100vw;
  
  text-align: center;
}
header div {
  margin: 0 auto;
  margin-top: 4.8rem;
}
header div .Title {
height: 45px;

}
header div .Subtitle {
margin-top: 5px;
} 
.Title span {
  font-size: 4.5rem;
}
.Title {
  
  font-family: 'Crimson Text', serif;
  font-size: 3rem;
}
.Subtitle {
  font-size: 1.8rem;
  font-family: 'Crimson Text', serif;
}
main {
width: 100vw;    
text-align: center;
}

.grid-container {
  display: grid;
  justify-content: center;
  grid-template-rows: repeat(5,45px);
  grid-template-columns: repeat(41,12px);
  grid-row-gap: 20px;
  grid-column-gap: 2px;
  grid-template-areas:
  "area1 . . . . . area2 area2 area2 area2 area2 area2 area2 area2 area2 area2 . . . . . . . . . area3 area3 area3 area3 area3 area3 area3 area3 area3 area3 . . . . . area4"
  "area5 . area6 area6 area6 area6 area6 area6 area6 area6 area6 area6 . area7 area7 area7 area7 area7 area7 area7 area7 area7 area7 area7 area7 area7 area7 area7 . area8 area8 area8 area8 area8 area8 area8 area8 area8 area8 . area9"
  "area10 area11 area11 area11 area11 area11 area11 area11 area11 area11 area11 . . area7 area7 area7 area7 area7 area7 area7 area7 area7 area7 area7 area7 area7 area7 area7 . . area12 area12 area12 area12 area12 area12 area12 area12 area12 area12 area13"
  "area14 . area15 area15 area15 area15 area15 area15 area15 area15 area15 area15 . area7 area7 area7 area7 area7 area7 area7 area7 area7 area7 area7 area7 area7 area7 area7 . area16 area16 area16 area16 area16 area16 area16 area16 area16 area16 . area17"
  "area18 . . . . . area19 area19 area19 area19 area19 area19 area19 area19 area19 area19 . . . . . . . . . area20 area20 area20 area20 area20 area20 area20 area20 area20 area20 . . . . . area21";
  margin-top: 20px;
}
.GridItem {
  text-align: center;
  
  cursor: pointer;
  
  font-family: 'Roboto', sans-serif;
}
.GridItem :nth-child(1) {
  font-size: 16px;
  color: #36c;
  font-weight: 600;
  
}
.GridItem :nth-child(2) {
  font-size: 13px;
  margin-top: 5px;
}
.GridItem:hover {
  background-color: #D5D8DF;
}
.GridItem :nth-child(1):hover {
  text-decoration: underline;
}
.grid-item1 {
  
  grid-area: area1;
  
}

.grid-item2 {
  
  grid-area: area2;
}

.grid-item3 {
  
  grid-area: area3;
}
.grid-item4 {
  
  grid-area: area4;
}
.grid-item5 {
 
  grid-area: area5;
}
.grid-item6 {
 
  grid-area: area6;
}
.grid-item7 {
 
  grid-area: area7;
 
  height: 205px;
  margin-top: -15px;
}
.grid-item7 img {
  width: 100%;
  height: 100%;
}
.grid-item8 {
 
  grid-area: area8;
}
.grid-item9 {
 
  grid-area: area9;
}
.grid-item10 {
 
  grid-area: area10;
}

.grid-item11 {
 
  grid-area: area11;
}
.grid-item12 {
 
  grid-area: area12;
}
.grid-item13 {
 
  grid-area: area13;
}
.grid-item14 {
 
  grid-area: area14;
}

.grid-item15 {
 
  grid-area: area15;
}
.grid-item16 {
 
  grid-area: area16;
}

.grid-item17 {
  
  grid-area: area17;
}
.grid-item18 {
 
  grid-area: area18;
}

.grid-item19 {
 
  grid-area: area19;
}
.grid-item20 {
 
  grid-area: area20;
}
.grid-item21 {
 
  grid-area: area21;
}

.main-list-container {
  margin-top: 2.5rem;
}


.main-list-container {
  width: 45rem;
  height: 4.4rem;
  
  display: flex;
  margin: 0 auto;
  margin-top: 2.7rem;
  justify-content: center;
  align-items: center;
  border: #B8B8B9 1px solid;
}

.search {
  width: 5.4rem;
  height: 4.4rem;
  background-color: #4535E4;
  cursor: pointer;

}

.search img {

  width: 65%;
  height: 65%;
  margin-top: 0.5rem;
  
}

.main-list-container input {
  width: 36rem;
  height: 4rem;
  border: none;
  outline: none;
  padding-left: 1rem;
}
.main-list-container select {
  width: 4.5rem;
  padding-left: 6px;
  border: none;
}
.SecInput {
  display: flex;
  width: 100vw;
  justify-content: center;
}

.line1 {
  width: 5.8rem;
  height: 0.8rem;
  border-top: #D4D4D6 1px solid;
  display: inline;
  margin-top: 5rem;
}
.Second-list-container {
  width: 30rem;
  height: 3.6rem;
  display: flex;
  margin: 0 auto;
  margin-top: 3.2rem;
  
  border: #B8B8B9 1px solid;

  margin-left: 1.8rem;
  margin-right: 1.8rem;
}

.line2 {
  width: 5.8rem;
  height: 0.8rem;
  border-top: #D4D4D6 1px solid;
  display: inline;
  margin-top: 5rem;
}


.Second-list-container .Message-lang {
  
  width: 88%;
  height: 3.6rem;
  border: none;
  outline: none;
  
  display: flex;
  align-items: center;
  
}
.Second-list-container .Message-lang p {
  font-size: 14px;
  color: #4535E4;
  font-weight: 600;
  
  font-family: 'Roboto', sans-serif;
  height: 3.6rem;
  margin-top: 1.8rem;

  display: inline;  
}

.Letters {
  display: inline;
  margin: 0 auto;
  font-size: 16px;
  color: #4535E4;
  font-weight: 600;
  
  font-family: 'Roboto', sans-serif;
}

.Second-list-container select {

width: 12%;
padding-left: 6px;
border: none;

}

.FooterUp {

width: 100vw;
margin-top: 3rem;
}

.legends {
width: 98%;
margin: 0 auto;

border-top: #D4D4D6 1px solid;
border-bottom: #D4D4D6 1px solid;

display: grid;

grid-template-columns: 1.33% repeat(3,32%);
grid-template-rows: repeat(6,auto);
justify-content: center;

}

.legend-up {

text-align: center;
grid-column-start: 2; 
grid-column-end: 5; 
grid-row-start: 1;

margin-bottom: 3.2rem;

}

.c0 {
  margin-bottom: 3.2rem;
}

.legend-up img {

width: 42px;
height: 42px;
margin: 0 auto;
margin-top: 1.8rem;
margin-bottom: 1.8rem;  
}

.Par-Lup p {

font-size: 13.5px;
justify-content: center;
font-family: 'Roboto', sans-serif;
}

.Par-Lup p a {
text-decoration: none;
}

.item {

display: flex;
align-items: center;
}
.item:hover {
  background-color: #D5D8DF;
  cursor: pointer;
}

.item :nth-child(1) {
width: 30%;

}
.item :nth-child(1) img {
width: 4.2rem;
height: 4.2rem;

}
.Utility {
width: 70%;
height: auto;
margin-top: 1.2rem;
margin-bottom: 1.2rem;
}
.item .Utility :nth-child(1) {
font-size: 14px;
width: 100%;
text-align: left;

margin: auto 0;
color: #7B7BEA;
font-family: 'Roboto', sans-serif;
margin-bottom: 5px;
}
.item .Utility :nth-child(2) {
font-size: 13.4px;
text-align: left;
font-family: 'Roboto', sans-serif;
}

.c5 {
  margin-top: 2rem;
  margin-bottom: 5rem;
}
.legend-down {


grid-column-start: 2; 
grid-column-end: 5; 
grid-row-start: 6;
background-color: #F0F0F5;

margin-top: 2rem;
margin-bottom: 5rem;

}
.legend-down .LegDn-title {
margin-top: 0.7rem;
justify-content: center;
display: flex;
}
.legend-down .LegDn-title .LogWiki {

width: 2.5rem;
height: 2.5rem;
background-color: white;
margin-right: 0.4rem;

border-top: #DADADD 0.8px solid;
border-left: #DADADD 0.8px solid;
border-right: #DADADD 0.8px solid;
border-bottom: #DADADD 2px solid;

}
.legend-down .LegDn-title .LogWiki img {
width: 85%;
height: 65%;
margin-top: 3.5px;
}
.legend-down .LegDn-title .LegDnParr1 {

color: #191995;
font-weight: bold;
font-size: 14px;
margin-left: 0.4rem;
cursor: pointer;

font-family: 'Roboto', sans-serif;
margin-top: 5px;

}
.LegDnParr1:hover {
  text-decoration: underline;
}

.LegDnParr2 {
font-size: 14px;
margin-top: 2.5rem;
font-family: 'Roboto', sans-serif;
justify-content: center;
}
.PlayStore {
margin-top: 1.4rem;
margin-bottom: 0.5rem;
}
.PlayStore :nth-child(1) {
width: 12.4rem;
height: 3.8rem;
cursor: pointer;
}
.PlayStore :nth-child(2) {
width: 11rem;
height: 3.8rem;
cursor: pointer;
}

footer {
width: 100vw;
text-align: center;
}

.FooterDown {


margin-top: 1.4rem;
margin-bottom: 1.4rem;
}
.FooterDown li {
display: inline;
list-style-position: upper-alpha;
list-style-position: inside;
font-size: 14px;
  
}

.FooterDown li span {
color: #7B7BEA;

}
.FooterDown li span:hover {
  text-decoration: underline;
  cursor: pointer;
}
.FooterDown :nth-child(2) {
margin-left: 1rem;
margin-right: 1rem;
}

@media (min-width: 900px) {
.legends {
  display: grid;
  
  grid-template-rows: repeat(4, auto);
  
  grid-template-columns:2.5% 32.28% 2.5% 20.88% 20.88% 20.88%; 
  
  grid-gap: 1px;

  
}

.c0 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 3;
} /*Nueva columna que da un espacio a la izquierda al primer párrafo de la izquierda*/

.legend-up {

  
  grid-column-start: 2; 
  grid-column-end: 3; 
  grid-row-start: 1;
  grid-row-end: 3;
  
  height: auto;

  display: flex;
  
}

.legend-up, .item-1, .item-2, .item-3, .c0, .c1 {
  margin-top: 4rem;
}

.legend-up img {

  width: 42px;
  height: 42px;
  margin: 0.7rem 0.35rem 7.5rem 0.7rem;
  
}
.Par-Lup {
   
  display: inline;
  margin: 0.8rem 1.3rem 5.5rem 0.35rem;
  text-align: left;
}
.Par-Lup p {
  font-size: 13.5px;
  line-height: 2rem;
}

.c5 {
  grid-column-start: 1;
  grid-column-end: 2;    
  grid-row-start: 3;
  grid-row-end: 6;
}/*Nueva columna que da un espacio a la izquierda al segunda párrafo de la izquierda*/

.legend-down {
   
  grid-column-start: 2; 
  grid-column-end: 3; 
  grid-row-start: 3;
  grid-row-end: 6;

  height: auto;

  margin-top: -5rem;
  
  text-align: left;
}
.legend-down .LegDn-title {
  justify-content: left;
}
.legend-down .LegDn-title .LogWiki {
  width: 4.2rem;
  height: 4.2rem;
  margin-left: 0.7rem;
  
}
.legend-down .LegDn-title .LogWiki img {
  width: 70%;
  height: 60%;
  margin-top: 0.75rem;
  margin-left: 0.55rem;
}
.legend-down .LegDn-title .LegDnParr1 {
  margin-top: 0;
}
.LegDnParr2 {
  margin-top: 0.5rem;
  margin-right: 1.3rem;
  line-height: 2rem;
}
.LegDnParr2, .PlayStore{
  margin-left: 5.8rem;
}
.item-1 .Utility,
.item-2 .Utility,
.item-3 .Utility,
.item-4 .Utility,
.item-5 .Utility,
.item-6 .Utility {
  margin-top: 0;
  margin-bottom: 0;
}

.item-7 .Utility,
.item-8 .Utility,
.item-9 .Utility {
  margin-top: 1.8rem;
  margin-bottom: 1.8rem;
}
.item-10 .Utility,
.item-11 .Utility,
.item-12 .Utility {
  margin-top: 1.4rem;
  margin-bottom: 1.4rem;
}
}