@charset "utf-8" ;

/*REGLAS PARA CELULAR*/


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        }

header {
        border-bottom: 1px solid gray;
        box-shadow: 0.3em 0.3em 0.7em rgb(151, 144, 151);
        background-color: rgb(209, 181, 228);
        margin-bottom: 0.5em;
    }

body {   
      background-color: rgb(213, 201, 221);
            }
header nav {
    font-size: 1em;
    display: flex;
    justify-content: center;
            }       

 header nav ul { 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

header nav ul li{
    background-color:rgb(117, 35, 193) ;
    list-style: none;
    text-align: center;
    width: 10em;
    font-size: 0.85em;
    padding: 0.6em;
    border-radius: 1.5em;
    margin: 0.5em;
    font-weight: 600;
    font-style: normal;
    font-variant: small-caps;
    letter-spacing: 0.15em;
       
}

header nav ul li:hover{
    background-color:rgb(118, 146, 199) ;
 }

header nav ul li a{
    text-decoration:none;
    color:rgb(245, 239, 239);
    padding: 0.5em;
   
}


main h1 {
    background-color: rgb(164, 188, 188);
    width: 24.1em;
    margin: auto;
    text-align: center;
    border-radius: 0.5em;
    color:rgb(238, 233, 225) ;
    font-size: 1em;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-variant: small-caps;
    padding: 0.5em;
    letter-spacing: 0.1em;
}

main h2 {
    color: rgb(32, 17, 91);
    margin: auto;
    margin-top: 0.5em;
    font-size: 1em;
     box-shadow: 0.3em 0.3em 0.7em rgb(151, 144, 151);
     width: 13em;
     border-radius: 0.2em;
}

main p {
    margin: 1.5em;
    font-size: 0.8em;
    display: flex;
    justify-content: center;
    font-weight: 551;

}

main h3  {
    margin: 1.5em;
    font-size: 0.8em;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
}

main h4 {
    color: rgb(32, 17, 91);
    margin: auto;
    font-size: 1em;
    display: flex;
    justify-content: center;
     box-shadow: 0.3em 0.3em 0.7em rgb(151, 144, 151);
     width: 15em;
     border-radius: 0.2em;
}

main h5 {
    margin: 1.5em;
    font-size: 0.8em;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    text-align: justify;
}

#mockup nav {
    font-size: 1em;
    display: flex;
    justify-content: center;
}

#mockup nav ul { 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1.5em;
}

#mockup nav ul li {
    background-color:rgb(86, 76, 146) ;
    list-style: none;
    text-align: center;
    width: 11em;
    font-size: 0.85em;
    padding: 0.6em;
    border-radius: 1.5em;
    margin: 0.4em;
    margin-left: 1em;
    font-weight: 600;
    font-style: normal;
    font-variant: small-caps;
    letter-spacing: 0.15em; 
}

#mockup nav ul li:hover{
    background-color:rgb(120, 159, 231) ;
 }

 #mockup nav ul li a{
    text-decoration:none;
     color:rgb(245, 239, 239);
     padding: 0.5em;
  }

#diseño {
    display: flex;
}

 h2 {
    color: rgb(32, 17, 91);
    margin: auto;
    font-size: 1em;
    display: flex;
    justify-content: center;
     box-shadow: 0.3em 0.3em 0.7em rgb(151, 144, 151);
     width: 10em;
     border-radius: 0.2em;
}

nav {
font-size: 1em;
    display: flex;
    justify-content: center;
}

nav ul { 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1.5em;
}

nav ul li {
    background-color:rgb(174, 133, 212) ;
    list-style: none;
    text-align: center;
    width: 11em;
    font-size: 0.85em;
    padding: 0.6em;
    border-radius: 1.5em;
    margin: 0.4em;
    margin-left: 1em;
    font-weight: 600;
    font-style: normal;
    font-variant: small-caps;
    letter-spacing: 0.15em; 
}

nav ul li:hover{
    background-color:rgb(120, 159, 231) ;
 }

nav ul li a{
   text-decoration:none;
    color:rgb(245, 239, 239);
    padding: 0.5em;
 }

footer {
    background-color:rgb(124, 168, 168);
    font-size: 60%;
    color: dimgrey;
    text-align: center;
    margin: 0.5em 1em 2em 1em;
    padding: 1em;
}



/* REGLAS PARA ESCRITORIO */
/* Escritorio grande */

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

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        }

header {
        border-bottom: 1px solid gray;
        box-shadow: 0.3em 0.3em 1em rgb(151, 144, 151);
        background-color: rgb(0, 127, 151);
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        padding: 1em;
        display: flex;
        justify-content: center;
        }

header nav {
    font-size: 1em;
    display: flex;
    justify-content: center
    }

nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0.5em;
}

header nav ul li{
    background-color:rgb(133, 167, 212) ;
    list-style: none;
    text-align: center;
    width: 11em;
    font-size: 0.90em;
    padding: 0.6em;
    border-radius: 1.5em;
    margin: 0.4em;
    margin-left: 1em;
    font-weight: 600;
    font-style: normal;
    font-variant: small-caps;
    letter-spacing: 0.18em; 
}

header nav ul li:hover{
    background-color:rgb(104, 61, 160) ;
 }

header nav ul li a{
    width: 10em;
    text-decoration:none;
    color:rgb(15, 15, 15);
}

body {   
    background-color: rgb(142, 182, 182);
          }


main h1 {
    background-color: rgb(176, 123, 214);
    width: 54.7em;
    color:rgb(238, 233, 225) ;
    font-size: 1.5em;
    border-radius: 2.5em;
    padding: 1%;
}

main h2 {
    background-color: rgb(78, 86, 129);
    width: 46.8em;
    color:rgb(226, 229, 236) ;
    font-size: 1.5em;
    padding: 0.2em;
    box-shadow: 0.3em 0.3em 0.9em rgb(136, 136, 136);
    border-radius: 2em;
}

main p {
    font-size: 1em;
    display: flex;
    justify-content: center;
    font-weight: 551;
}

main h3  {
    font-size: 1.3em;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
}

main h4 {
    background-color: rgb(78, 86, 129);
    width: 46.8em;
    color:rgb(226, 229, 236) ;
    font-size: 1.5em;
    padding: 0.2em;
    box-shadow: 0.3em 0.3em 0.9em rgb(136, 136, 136);
    border-radius: 2em;
}

main h5 {
    font-size: 1.3em;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
}

#mockup nav {
    font-size: 1em;
    display: flex;
    justify-content: center;
}

#mockup nav ul { 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1.5em;
}

#mockup nav ul li {
    background-color:rgb(150, 115, 184) ;
    list-style: none;
    text-align: center;
    width: 11em;
    font-size: 0.85em;
    padding: 0.6em;
    border-radius: 1.5em;
    margin: 0.4em;
    margin-left: 1em;
    font-weight: 600;
    font-style: normal;
    font-variant: small-caps;
    letter-spacing: 0.15em; 
}

#mockup nav ul li:hover {
    background-color:rgb(58, 108, 201);
 }

 #mockup nav ul li a{
    text-decoration:none;
     color:rgb(245, 239, 239);
     padding: 0.5em;
  }

#diseño {
    display: flex;
}

 h2 {
    background-color: rgb(78, 86, 129);
    width: 46.8em;
    color:rgb(226, 229, 236) ;
    font-size: 1.5em;
    padding: 0.2em;
    box-shadow: 0.3em 0.3em 0.9em rgb(136, 136, 136);
    border-radius: 2em;
}

header nav {
    font-size: 1em;
    display: flex;
    justify-content: center
    }

nav ul {
    margin:1.5em

}

 nav ul li{
    background-color:rgb(133, 167, 212) ;
    list-style: none;
    text-align: center;
    width: 11em;
    font-size: 0.90em;
    padding: 0.6em;
    border-radius: 1.5em;
    margin: 0.4em;
    margin-left: 1em;
    font-weight: 600;
    font-style: normal;
    font-variant: small-caps;
    letter-spacing: 0.18em; 
   
}

nav ul li:hover{
    background-color:rgb(104, 61, 160) ;
 }

 nav ul li a{
    width: 10em;
    text-decoration:none;
    color:rgb(15, 15, 15);
}

footer {
    background-color:rgb(141, 141, 141);
        padding: 1em;
        color: rgb(226, 229, 236);
        font-size: 60%;
        margin-top: 2em;
}


}