/***********************************

            Base Styles

***********************************/


*, ::before, ::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 62.5%;
}

img {
    display: block;
    width: 100%;
}


/***********************************

            Custom

***********************************/

:root {
    --style-white: #f0f0f0;
    --style-blue: steelblue;
} 

/***********************************

            General

***********************************/

/* Navbar */

nav {
    display: flex;
    justify-content: flex-end;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--style-blue);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
    width: 100%;
    z-index: 10;
}

.nav__ul {
    display: flex;
    margin-right: 2rem;
}

.nav__ul a {
    display: block;
    font-size: 2.2rem;
    padding: 2rem;
}

.nav__ul a:hover {
    background: #303841;
}

/* Welcome Section */

#welcome-section {
    height: 100dvh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #000;
    background-image: url(../img/quino-al-JFeOy62yjXk-unsplash\(1\).jpg);
    background-size: cover;
}

/* Project Section */

.projects-section {
    text-align: center;
    padding: 10rem 2rem;
    background-color: steelblue;
}

.projects-section-header {
    max-width: 640px;
    margin: 0 auto 6rem auto;
    border-bottom: 0.2rem solid white;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 4rem;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    margin-bottom: 6rem;
}

.project {
    background: #303841;
    box-shadow: 1px 1px 2px rgba(0,0,0, 0.5);
    border-radius: 2px;
}

.code {
    color: gray;
    transition: color 0.3s ease-out;
}

.project:hover .code {
    color: #ff7f50;
}

.project-image {
    height: calc(100% - 6.8rem);
    width: 100%;
    object-fit: cover;
}

.project-title {
    font-size: 2rem;
    padding: 2rem 0.5rem;
}

.btn {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 2px;
}

.btn-show-all {
    font-size: 2rem;
    background: #303841;
    transition: background 0.3s ease-out;
}

.btn-show-all:hover {
    background: gray;
}

.btn-show-all:hover > i {
    margin-left: 10px; 
    transform: translateX(2px);
}

.btn-show-all > i {
    margin-left: 10px; 
    transform: translateX(0);
    transition: transform 0.3s ease-out;
}

/* Contact Section */

.contact-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 80dvh;
    padding: 0 2rem;
    background: #303841;
    background-image: url(../img/frank-mckenna-OD9EOzfSOh0-unsplash.jpg);
    background-position: center;
    background-size: cover;
}

.contact-links {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 980px;
    margin-top: 4rem;
    flex-wrap: wrap;
}

.contact-details {
    font-size: 2.4rem;
    text-shadow: 2px 2px 1px white;
    transition: transform 0.3s ease-out;
}

.contact-details:hover {
    transform: translateY(8px);
}

/* Footer */

footer {
    background-color: #4682b4;
}

.banner {
    width: 50%;
    margin: 0 auto;
}
/***********************************

            Typography

***********************************/

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--style-white);
}

body {
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--style-white);
}

h1 {
    font-size: 6rem;
}

h2 {
    font-size: 4.2rem;
}


h1, h2 {
    font-weight: 700;
    text-align: center;
}

/* Welcome */

#welcome-section > p {
    font-size: 3rem;
    font-weight: 200;
    font-style: italic;
    color: white;
    text-shadow: 2px 2px 2px black;
}


/* Project */

.project-title {
    font-size: 2rem;
    padding: 2rem 0.5rem;
}

/* Contact */

.contact-section-header > h2 {
    font-size: 6rem;
    color: #303841;
}

.contact-section-header > p {
    font-style: italic;
    color: #303841;
}

.contact-details {
    color: #303841;
}

/* Footer */

footer > p {
    margin: 2rem;
}

footer i {
    vertical-align: middle;
}



/***********************************

            Media Queries

***********************************/

/* 1200px / 16px = 75em */

@media (max-width: 75em) {
    html {
        font-size: 60%;;
    }
}

/* 980px / 16px = 61.25em */

@media (max-width: 61.25em) {
    html {
        font-size: 58%;
    }
}

/* 460px / 16px = 28.75em */

@media (max-width: 28.75em) {

    /* HTML */

    html {
        font-size: 55%;
    }

    /* Navbar */

    .navbar {
        justify-content: center;
    }

    /* Projects Section */

    .projects-section-header {
        font-size: 4rem;
    }

    /* Contact */

    .contact-section-header > h2 {
        font-size: 4rem;
    }

    /* Footer */

    footer {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 30.625em) {

    /* Projects */

    .projects-section {
        padding: 6rem 1rem;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 460px) {

#contact {
    justify-content: space-between;
    align-items: flex-end;
    color: white;
}

}

/* Objective: Build an app that is functionally similar to https://personal-portfolio.freecodecamp.rocks

User Stories:

    Your portfolio should have a welcome section with an id of welcome-section
    The welcome section should have an h1 element that contains text
    Your portfolio should have a projects section with an id of projects
    The projects section should contain at least one element with a class of project-tile to hold a project
    The projects section should contain at least one link to a project
    Your portfolio should have a navbar with an id of navbar
    The navbar should contain at least one link that you can click on to navigate to different sections of the page
    Your portfolio should have a link with an id of profile-link, which opens your GitHub or freeCodeCamp profile in a new tab
    Your portfolio should have at least one media query
    The height of the welcome section should be equal to the height of the viewport
    The navbar should always be at the top of the viewport

Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!

Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS
 */