/*Diseños de etiquetas basicas*/
*{
    box-sizing: border-box;
}
body{
    background-color: rgb(57, 123, 189);
}

p{
    font-size: 16pt;
    font-family: 'Franklin Gothic';
}


            /*Diseño del encabezado*/
div.header{
    background-color: rgb(30, 57, 75);
    margin: -8px;
    text-align: center;
}
div.container1{
    margin-top: 8px;
    position: relative;
    display: inline-block;
    text-align: center;
    border-style: groove;
    align-content: center;

}

.PE{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(3, 3, 3, 0.767);
    font-size: 18px;
    background-color: rgba(198, 199, 201, 0.349);
}

@media screen and (max-width: 90em) {
    .PE {
        font-size: .9em;
      }
    }

    @media screen and (max-width: 60em) {
        .PE {
            font-size: .6em;
          }
        }

        @media screen and (max-width: 40em) {
            .PE {
                font-size: .5em;
              }
            }

.proyecto{
    position: relative;
    display: inline-block;
    text-align: center;
    color: rgb(71, 3, 54);
    font-size: 20px;
}


@media screen and (max-width: 90em) {
    .proyecto {
        font-size: .9em;
      }
    }

    @media screen and (max-width: 60em) {
        .proyecto {
            font-size: .6em;
          }
        }

        @media screen and (max-width: 40em) {
            .proyecto {
                font-size: .5em;
              }
            }


            /*Diseño para estructura de la pagina*/
div.menu-proyectos{
    flex: 25%;
    background-color: rgb(13, 39, 56);
    padding:20px;
    color: rgb(149, 207, 102);
    font-size: 15pt;
}
div.contenido{
    flex: 70%;
    background-color: rgb(186, 216, 214);
    padding: 20px;
    font-family: serif;
}
div.row{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -8px;
}
div.pie{
    background-color: black;
    color: white;
    text-align: center;
    flex: 75%;
    padding: 20px;
}

            /*Cuando el usuario se encuentre en telefono*/

@media screen and (max-width:700px){
    .row, .main{
            flex-direction: column;
    }
}

            /*Diseño de etiquetas extras*/
div.robot{
    float: left;
}