* {margin:0}

body {
  background:#FFEEDC;
  font-family: "Roboto Condensed", sans-serif;
  font-size:16px;
  color:white
}

header {
	grid-area: header;
	display:flex;
	flex-wrap: nowrap;
	align-items:center;
	justify-content:center;
	text-align:center;
	gap:5px;
	background:/*#5c3709*/linear-gradient(to right, rgb(158,42,34, 1), rgb(85,34,119, 1));
	font-size:24px;
}

nav {grid-area: nav;}

main {
	grid-area: main;
	background:#668E97;
  padding:1em
}

sidebar {
	grid-area: sidebar;
	background:#9A7B44;
	padding:5px;
}

footer {grid-area: footer;}

p {margin-bottom:10px}

/**** PC ****/

@media (min-width: 550px) {
  .contenedor {margin: auto 10%;}
  
  .contenido {
  	display: grid;
  	grid-template-columns: 25% 25% 25% 25%;
  	grid-template-rows: auto;
  	grid-template-areas:
  	"header header header header"
  	"main main main sidebar"
  	"footer footer footer footer";
  }
  
  header img {width:200px;}
  
  .chara-pegasus-icono, .chara-pegasus-icono-imagen, .chara-pegasus-icono-imagen img {width:160px;}
  .chara-pegasus-icono-imagen {border-radius:30px; height:160px}
}

/**** Celular ****/

@media (max-width: 550px) {
  .contenedor {margin:0}

  .contenido {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas:
    "header"
    "sidebar"
    "main"
    "footer";
  }
  
  header img {width:100px}
  
  .scroll-celular {height:150px; overflow:scroll}

  .chara-pegasus-icono, .chara-pegasus-icono-imagen, .chara-pegasus-icono-imagen img {width:80px;}
  .chara-pegasus-icono-imagen {border-radius:15px; height:80px}
}

/*********************************************/

.proceso-iconos {
  padding:2px;
  border-radius:10px;
  background:#0DB0FC;
}

.proceso-iconos th {background-color:#55C8FD}
.proceso-iconos th:first-child {border-radius:10px 0 0 0}
.proceso-iconos th:last-child {border-radius:0 10px 0 0}

.proceso-iconos td {background-color:white}
.proceso-iconos td:first-child {border-radius:0 0 0 10px}
.proceso-iconos td:last-child {border-radius:0 0 10px 0}


/******************* GIEPII HABLANDO ***************************/

.caja-pegasus {
  display:flex;
  flex-direction:column;
  margin-top:20px;
  font-family: "SN Pro";
}

.chara-pegasus {
  display:flex;
  height:50px;
}

.chara-pegasus-icono-imagen {
  background:gray;
  border:3px solid white;
  overflow:hidden;
  position:absolute;
  box-shadow:0 0 3px #444
}

.chara-pegasus-nombre {
  width:10em;
  padding:5px;
  background:rgba(51, 51, 51, 0.8);
  border-radius:30px;
  border:3px solid white;
  margin:5px 0 5px 15px;
  box-shadow:0 0 3px #444;
  text-align:center;
  color:white;
  font-weight:bold;
  font-size:20px;
}

.caja-de-texto-pegasus {
  display:flex;
  justify-content:center;
  align-items:center;
  background: linear-gradient(to right, rgba(51, 51, 51, 0), rgba(51, 51, 51, 0.7) 20% 80%, rgba(51, 51, 51, 0));
}

.caja-de-texto-pegasus-texto { 
  width:60%;
  text-align:center;
  color:white;
  text-shadow:0 0 3px black;
  font-size:20px
}

.caja-de-texto-pegasus-texto a {color:yellow}