body {
    background-image:url(imagenes/fondo3.jpg);
    width: 90%;
    height: 100%;
    font-family: Source Code Pro;
    font-size: 100%;
    margin: auto;
}

#pagina {
    width: 50%;
    margin: auto;
    color: crimson;
    }

header  {
    width: 100%;
    height: auto;
    display: inline-block;
}

#logo {
    padding: 1rem;
}

h1 {    
    font-size: 250%;
    margin-bottom: 3px;
    color: black;
    font-weight: 600;
}

h3 {
            margin-top: 5rem;
    font-size: 200%;
    
}


nav {
    float: right;
    width: 60%;
    text-decoration: none;
    margin: auto;
    text-align: center;
    display: inline;
    margin-top: 3rem;
    margin-right: 3rem;
    font-size: 120%;
    font-weight: 600;
}



nav ul {
display: inline;
    margin-right: 3rem;
}

nav ul li {
    display: inline;
margin-right: 2rem;
    padding-bottom: 0,5rem;
    list-style-type: none;

}

nav ul li:hover {
    background-color: crimson;
   color: black;
   font-style: 600;
}

nav ul li a {
    text-decoration: none;
    display: inline;
     width: 75px;
    color: black;
    font-style: 600;
    font-family: 600;
    margin-right: 5rem:
 }


section {
    margin: auto;
    width: 100%;
    height: 30rem;
    outline: auto;
    outline-color: black;
    outline-width: medium;
}

#opciones {
     width: 30%;
    float: left;
    position: relative;
margin: auto;
        margin-top: 5rem;
    text-align: center;
    color: red;
    height: 10px;
    font-weight: 700;
    text-decoration: none;
}


.materias2 {
    padding: 2rem;
        text-align: center;
       text-decoration: none;
 }

.materias2 a {
       text-decoration: none;
    color: red;
}




.materias2 a:hover {
   text-decoration: line-through
}

.mg {
         padding: 2rem;
    color: black;
}

.mg a {
       text-decoration: none;
    color: red;
}

.mg a:hover { 
 text-decoration:line-through
    }

.nmg {
        padding: 2rem;
       text-decoration: none;
        color: black;
}


.nmg {
        padding: 2rem;
       text-decoration: none;
}
.nmg a {
       text-decoration: none;
    color: red;
}

.nmg a:hover { 
text-decoration: line-through;
    }


.behance {
        padding: 2rem;
       text-decoration: none;
}

.behance a {
       text-decoration: none;
    color: red;
}


.behance:hover { 
text-decoration: line-through;
    }



#datos {
    margin-right: 1rem;
    margin-top: 1.2rem;
    float: right;
    width: 60%;
    color: black;
    font-size: 50%;
    text-decoration: none;
}

#fotomia
{
    margin-top: 3rem;
    }

#linea {
    width: 50%
}

footer {
    width: 50%;
    color: darkgray;
    font-size: 80%;
    margin: auto;
}

@media screen and (max-width: 480px) {
    
    #pagina {
    width: 100%;
    }
    
    nav { 
        margin: auto;
        width: 80%;
        margin-top: 1rem;
    }

     nav ul li {
        width: 80%;
        margin-bottom: 1rem;
float: left;
        font-size: 0.7rem;
    }
    
      nav ul li a {
        width: 100%;
        margin-bottom: 1rem;
        text-align: center;
        font-size: 1rem;
    }
    
    section {
    margin: auto;
    width: 100%;
    height: 30rem;
    outline: none;

}
        
    #datos {
    background-color: white;
    margin-top: 1rem;
        padding-bottom: 1rem;
    margin: auto;
    width: 100%;
    color: black;
    font-size: 50%;
    text-decoration: none;
        
}
    
 .fotomia  {

    text-align: center;
    margin:auto;
    }
    
        h1 {
 font-size: 1.2rem;
text-align: center;
    }
    
    h2 {
        width: 70%;
        margin: auto;
        text-align: left;
    }
    
    
    #opciones {
        background-color: black;
     width: 100%;
        height: auto;
        margin-top: 0rem;
    text-align: center;
        padding: -50%;
    color: red;
        font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
}
    
    .mg {
         padding: 0.5rem;
    color: dimgrey;
}

     .nmg {
         padding: 0.5rem;
    color: dimgrey;
}
        .materias2 {
         padding: 0.5rem;
    color: dimgrey;
}
        .behance {
         padding: 0.5rem;
    color: dimgrey;
}
    
    
    footer {
        background-color: white;
        opacity: 50%;
    width: 90%;
        padding: 0.2rem;
    color: darkgray;
    font-size: 80%;
    margin: auto;
}
    
}