/* MOBILE DESIGN */

/* General page design */
body {
    background-color: #6e6464;
    font-family: monospace;
    font-size: 1.3em;
}

.wrapper {
    background-color: #e2e2e2;
    box-shadow: 0 1px 5px black;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    margin: 0 auto;
    max-width: 1100px;
}

header h1 {
    text-align: center;
}

nav, footer {
    background-color: #f7f9bd;
    display: flex;
    justify-content: flex-start;
}

nav a, footer a {
    color: #035e25;
    text-decoration: none;
}

nav a:hover, footer a:hover, .card a:hover {
    text-decoration: underline;
}

nav ul {
    display: flex;
    flex-direction: column;
    list-style: none;
}

nav ul li {
    margin: 6px 0;
}

main {
    margin-left: 10px;
}

footer {
    justify-content: flex-end;
    padding: 15px;
}

footer :first-child {
    margin: 0 10px;
}

/* Styling for cards on Projects page */
.cards {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

.card {
    background-color: #e3bca8;
    border-radius: 10px;
    box-shadow: 0 1px 3px black;
    height: 220px;
    margin: 0 5px;
    margin-bottom: 10px;
    width: 250px;
}

.card:hover {
    transform: scale(1.01);
}

.card img {
    border-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    width: inherit;
}

.card p, .card a {
    margin-left: 5px;
}

.card a, p > a {
    color: #022199;
}

.card a {
    text-decoration: none;
}

/* Styling for images on the project information pages */
aside img {
    margin-left: 10px;
    width: 80%;
}

/* Styling for certain paragraphs */
.hello {
    font-size: 2em;
}

.intro {
    font-size: 1.5em;
}

.project-info p {
    line-height: 1.3;
}

/* TABLET DESIGN */
@media (min-width: 768px) {
    .wrapper {
        grid-template-columns: repeat(8, 1fr);
    }

    header, nav, main, footer {
        grid-column: 1/9;
    }

    nav {
        justify-content: center;
    }

    nav ul {
        flex-direction: row;
    }

    nav ul li {
        margin: 0 10px;
    }

    .project-info {
        grid-column: 1/5;
    }

    aside {
        grid-column: 5/8;
    }

    aside img {
        margin-top: 10px;
        width: 120%;
    }
}

/* DESKTOP DESIGN */
@media (min-width: 1024px) {
    .wrapper {
        grid-template-columns: repeat(12, 1fr);
    }

    header, nav, main, footer {
        grid-column: 1/13;
    }

    .project-info {
        grid-column: 1/7;
    }

    aside {
        grid-column: 8/12;
    }
}