/*
selector {propiedad: valor;} 
*/

/* HTML */
         @import url('https://fonts.googleapis.com/css2?family=New+Rocker&display=swap'); 
         
         @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
        
         @import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@600&display=swap');

         @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300&display=swap');
 

    *{margin: 0; padding: 0; box-sizing: border-box; text-decoration:none;color: rgb(28, 255, 7);}
    .contenedor{margin: auto;}
         
/* BODY */

body {
    background : #dd73bd;
    font-family: 'Oxanium', cursive;
    text-align: center;
} 




/* HEADER */

        header {
            background-image: url(../img/fondo2.jpg);
        /* background: #ead1c2; */   
            padding: 40px 0 0 0px;
            padding-bottom: 0;
}

/* PARTE NOMBRE */ 

        .foto {
            width:100px; height: 100px; background: rgb(0, 255, 0);
            border: 2px solid rgb(255, 155, 238); border-radius: 10px;
            transition: all 2s;
            -webkit-transition: all 2s;
            height: 250px;
            width: 180px;
        }
            
        
        h1 {
            /*color: #ffffff;*/
                color: #35fd04;
                font-family: 'New Rocker', cursive;
                font-size: 1 rem;
                margin: 0 10% 0 10%;
                text-align: center;
            }
        .foto:hover {   transform:rotate(360deg) scale(0.4,0.4);
            -webkit-transform:rotate(360deg) scale(0.4,0.4);
            -o-transform:rotate(360deg) scale(0.4,0.4);
                    }

        

        .menu {
        /*color: #ffffff;*/
            color: #fab5f6;
            font-family: 'Press Start 2P', cursive;  
            padding: 7px 0 21px 0;
            font-size: 1rem;
        }


/* NAVEGACION */

        nav{
            font-size: 1rem;  
            background: #54ff04;
            margin: auto;
         font-family: 'Oxanium', cursive;
        }

        nav ul li {display: inline-block;}
        nav ul li a {color:rgb(253, 83, 188); text-decoration: none; padding: 0 5rem 0 5rem; text-align: center;}
        nav a:hover {
            color: #e9a3da;
            text-decoration: underline #f091c0;
        }



/*SECTION DESKTOP Y MOBILE*/

        .lista {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin: 0 12% 0 12%;
            max-width: 76%; 
        }

        @media screen and (max-width:800px) {
            .lista {width:100%; display:flex;flex-wrap: wrap; flex-direction: row;align-items:baseline; max-width: 90%; align-content: center;justify-content;}
            nav ul {display: flex; justify-content: center;}
            nav ul li a {padding: 0 1.3rem 0 1.3rem;}
        /*.materias {display:inline-flex;font-size: 80%;}*/
            .m {width:33%; display:table-row;justify-content: space-between;}
            .integrantes {margin: 30px 0 40px 0;}
            .h3-past {margin-top: 30px;}
            .foto {height: 150px; width: 150px;}
            }

/* MATERIAS */

        .dg {
            font-size: 1.9rem;
            text-align: left;
            padding: 3% 3% 0% 3%;
            color: #fd82f7;
            margin-left: 8%;
            font-family: 'New Rocker', cursive;
        }

        hr {
            height: 0.1 rem;
            width: 86%;
            background-color: #56f764;
            margin-top: 5%;
            border: 0;
        }

/*.materias 
width: 40%;
text-align: left;
} */

        .lista {
            width: 70%;
            text-align: left;}

        .materias p{
            padding-bottom: 2px;
            font-size: 1.2rem;
            font-family: 'Kanit', sans-serif;   
        }

        .materias h3{
            font-size: 2 rem;
            padding-bottom: 1rem;
            color: #9deecc;  
          font-family: 'Kanit', sans-serif;
        }


/* SECTION ARTICLE INTEGRANTES */

        .h2-i {
            font-size: 1.3rem;
            margin: 5% 0 0 0;
            padding-bottom: 3%;
            color: #fc5ec7;
            font-family: 'Oxanium', cursive;
        }

        .integrantes{
            background: #a6f8ed;
            padding: 3% 3% 2% 3%;
            min-height: 10%;
            border: groove 5px rgb(0, 255, 85);
            border-radius: 2em;
            box-shadow: 0.6rem 0.6rem 0.6rem #adadad;
            text-align: left;
            border-style: inset;
            transition: all 2s;
            -webkit-transition: all 2s;
            
        }

        .integrantes p{
            padding-bottom: 3%;
            font-family: 'Kanit', sans-serif;
            width: 100%;
            font-size: 1rem;
        }
        .integrantes p:hover{
                text-decoration: underline #fc6dc0;
                
        }

        .integrantes:hover {-webkit-transform:scale(1.3);transform:scale(1.3);}
        .integrantes {overflow:hidden;}


/* SECTION ARTICLE APP Y DESCRIPCION */

        .aplicacion {
            background:#ffffff;
            margin: 4% 0 0 0;
            padding: 2% 0 2% 0;
            text-align: left;
        }
        .app {
            font-size: 1.5rem;
            font-family: 'Oxanium', cursive;
            max-width: 76%;
            margin: 0 12% 0 12%;
        }
        .descripcion {
            font-family: 'Kanit', sans-serif;
            padding-top: 1rem;
            margin: 0 12% 0 12%;
        }


/* FOOTER */

        footer {
            padding: 1% 0 1% 0;
            background: #a0a0a0;
            font-family: 'Open Sans', sans-serif; 
        }
        .catedra {
            font-size: 0.8rem;
            color: #fd94e7;
            font-family: 'Open Sans', sans-serif; 
            padding: 0.5% 0 0.3% 0;
        }
        footer p{ 
            color: rgb(143, 248, 152); 
            font-size: 0.7rem; 
            margin: 0 12% 1% 12%;
            font-family: 'Open Sans', sans-serif; 
        }