@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;700&display=swap');

* {margin: 0;
   padding: 0;
   border: 0;
   box-sizing: border-box;
   scroll-behavior: smooth;}

/* Mobile Firsrt */

body {min-height: 100vh;
      background-color: #1b1b19;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      justify-content: space-between;}

article {padding: 1em;}

a {text-decoration: none;
  font-family: raleway;
  font-weight: 500;
  color: #fff;}

/* Header */

header {background-color: #fff;
        padding: 0.5em;}

header nav ul {margin: 0.3em;}

header ul li a {
  background-color: #e63c2b;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.3em 0.7em 0.3em 0.7em;
  margin: 0.2em;
  color: #fff;
  border-radius: 20px;
}

#logo {/*margin: 0.5em;*/
       display: block;
       text-align: center;}

#logo img {background-color: #fff;}

li {
    font-family: raleway;
    font-weight: 500;
    display: list-item;
    text-align: center;
    color: #e63c2b;
    list-style: none;
    }

/* Main */

main {margin: 1em;
      flex-grow: 1;}

/* Datos alumno */

#datosalumno {background-color: #fff;
  box-shadow: 5px 5px #6dc2c0;
  margin: auto;
  width: 100%;
  text-align: center;
  margin-block-end: 1.5em;
  column-gap: 1em;}

img {max-width: 100%;
     height: 100%;}

h1 {font-family: raleway;
    font-weight: 700;
    color: #6dc2c0;
    margin: 0 0 0.5em 0;
    box-sizing: content-box;
    font-size: 2.5em;
    text-align: center;}

.acercademi {font-family: raleway;
             font-weight: 400;
             color: #1b1b19;
             text-align: left;
             width: 100%;
             margin: 0.8em auto;}

h2 {
    font-family: raleway;
    font-weight: 500;
    font-size: 1.2em;
    color: #fff;
    margin: 0 0 0.5em 0;
    padding: 0.2em;
    box-sizing: content-box;
    text-align: center;
    background-color: #6dc2c0;
    border-radius: 20px;
   }

h5 {font-family: raleway;
    font-weight: 700;
    font-size: 1em;
    color: #1b1b19;
    margin-top: 1em;}

#mifoto { display: block;}

#grafico {width: 50%;
          margin: auto;
          margin-top: 1em;
          margin-bottom: 2em;}

/* Materias aprobadas */

h3 {color: #fff;
    background-color: #e63c2b;
    box-shadow: 3px 3px #e1e0e5;
    margin: 0 0 0.5em 0;
    padding: 0.2em;
    box-sizing: content-box;
    font-family: raleway;
    font-size: 1em;
    font-weight: 700;
    text-align: left;}

h2.añocursando{  
  font-family: raleway;
  font-weight: 500;
  font-size: 1.2em;
  color: #1b1b19;
  margin: 0 0 0.5em 0;
  padding: 0.2em;
  box-sizing: content-box;
  text-align: center;
  background-color: #fff;
  border-radius: 20px;}

.materiasaprobadas ul li.cursando {color: #fff;}

.materiasaprobadas ul li {color: #6dc2c0;
                          margin: 0 0 0.5em 0;
                          box-sizing: content-box;
                          font-size: 1em;
                          text-align: center;
                          font-family: raleway;
                          font-weight: 400;}

/* Trabajos realizados */

.trabajos {color: #e1e0e5;
           text-align: left;
           font-family: raleway;
           font-size: 0.9em;
           margin-bottom: 1em;
           margin-top: 1em;}

/* Datos equipo*/

#datosequipo {background-color: #e63c2b;}

h4 {color: #fff;
    margin: 0 0 0.5em 0;
    box-sizing: content-box;
    font-family: raleway;
    font-size: 1.9em;
    font-weight: 700;
    text-align: center;}

.equipo ul li {border-radius: 20px;
               border: solid 1.5px #fff;
               margin-block: 0.5em;
               padding: 0.5em;}

/* Footer*/

footer {color: #fff;
        padding: 1em;
        background-color: #6dc2c0;
        text-align: center;
        font-family: raleway;
        font-weight: 300;
        font-size: small;}

/* ---------------------------------------------- */

/* Tablet */

@media  screen and (min-width: 600px) 

{ 

/* Header */ 

header {display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;}

header nav ul {display: flex;}

/* Datos Alumno */

.infoalumno {margin-top: 1em;}

.alumno {display: flex;
         flex-direction: row;}

h1 {text-align: left;
    font-size: 2.8em;}

#grafico {width: 30%;
          margin-top: 0em;
          margin-bottom: 0em;}

h5 {text-align: left;}

.acercademi {text-align: left;}

/*Materias aprobadas*/

#materias {display: flex;
           flex-direction: row;
           justify-content: space-around;}

.materiasaprobadas {display: flex;
                    flex-direction: column;
                    flex-grow: 2;}

/* Trabajos realizados */ 

.tps {padding: 1em 1em;}

.tps figure {margin: 1em 5.5em 1em 3.5em}

/* Datos equipo */

#datosequipo {padding: 0em 0em;}

.equipo {display: flex;
         justify-content: space-around;
         align-items: center;}

.equipo ul {display: flex;
            justify-content: center;
            margin: 0.5em;}

.equipo ul li {margin: 1em 0em 1em 2em;} 

} 

/* ---------------------------------------------- */

/* PC */

@media screen and (min-width: 992px) 

{

/* Header */ 

header {justify-content: space-between;
        flex-direction: row;
        align-items: center;}

#logo img {max-width: 47%;
           display: block;
           padding-left: 1.5em;}

header nav ul {margin: 0.3em;
               display: flex;
               justify-content: center;}

h3 {text-align: center;}


.tps {/*display: grid;
      grid-template-columns: 50% 50%;
      grid-template-rows: auto;
      column-gap: 1em;*/
      padding: 1em 10em;}

.tps h3 {width: 80%;  
         margin: auto;}

.trabajos {text-align: left;
           font-size: 0.9em;}

.tps figure {margin: 1em 0em}

.tpimagen {text-align: center;}

}