@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900');

header {background-color: rgb(53, 9, 44);
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-around;
        margin: auto;
        padding: 1.5em;}

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

header section img {width: 60px}

#logo {width: 80px}

#buscar     {display: flex;
            background-color: #e2e2e2; 
            margin: auto;
            padding: 0.3em 10em;
            border-radius: 20px;
            margin-top: 1.5em;
            width: 50px;
            }

main {background-color: rgb(245, 245, 245);
        display: flex;
        flex-direction: column;
        text-align: center;
        margin: auto;
        padding-bottom: 10em;}


h1 {font-family: 'Raleway', sans-serif;
    font-weight: 900;
    font-size: 3em;
    margin-bottom: -0.3em;
    margin-top: auto;
    }

h1:hover {color: #7c7c7c}

h3 {font-family: 'Raleway', sans-serif;
    font-weight: 200;
    font-size: 1em;
   }

p {font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 1.2em;
  }

main div section img {align-content: center;
                        width: 400px;
                       }


main section nav {display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-content: flex-start;
                background-color: #dedede}

main section nav ul {display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-content: flex-start;
                margin-top: 3em;
                }

main section nav ul li {list-style: none;
                display: flex;
                flex-direction: column;
                margin: 1.5em;
}

main section nav ul li a {display: flex;
                flex-direction: column;
                font-family: 'Raleway', sans-serif;
                font-weight: 400;
                font-size: 1.4em;
                color: rgb(53, 9, 44);
                }
main section nav ul li a:hover {color: #7c7c7c}

footer {display: flex;
        flex-direction: column;
        padding: 2em 3em;
        background-color: #626262;
        width: auto;
        max-width: 65em;
        margin: auto;
        text-align: center}

footer section {text-align: left;
                margin: 0 2em 0 0;
                font-family: 'Raleway', sans-serif;
                font-weight: 300;
                color: #dbdbdb;
                font-size: 0.8em;
                margin-bottom: 2em;}



@media screen and (min-width:60em) {
    
    header section img {width: 110px}
    
    #logo {width: 150px}
 
    footer {display: flex;
            flex-direction: row;}
    
    main section nav {display: flex;
                flex-direction: row;
                justify-content: center;
                align-content: space-between;
                padding-bottom: bottom: 4em;
                margin-bottom: 2em
                }

main section nav ul {display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-content: space-between
                margin-top: 3em;
                }

main section nav ul li {list-style: none;
                display: flex;
                flex-direction: row;
                margin: 1.5em;
}

main section nav ul li a {display: flex;
                flex-direction: row;
                font-family: 'Raleway', sans-serif;
                font-weight: 400;
                font-size: 1.4em;
                color: rgb(53, 9, 44);
                }
main section nav ul li a:hover {color: #7c7c7c;
                                font-weight: 800;}

}