@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;700;900&display=swap');


/* CSS RESET BELOW */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
2. Remove default margin
*/
* {
    margin: 0px;
}

/*
3. Allow percentage-based heights in the application
*/
html,
body {
    height: 100%;
}

/*
Typographic tweaks!
4. Add accessible line-height
5. Improve text rendering
*/
body {
    -webkit-font-smoothing: antialiased;
    margin: 0 20px;
}

/*
6. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/*
7. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
    font: inherit;
}

/*
8. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/*
9. Create a root stacking context
*/
#root,
#__next {
    isolation: isolate;
}


p {
    font-family: "Figtree", sans-serif;
    font-size: 16px;
    line-height: 1.7;
}

a {
    font-size: 16px;
    line-height: 1.7;
    color: #121212
}

a:visited {
    color: #121212
}

a:hover {
    color: #4e4e4e
}

a {
    font-family: "Figtree", sans-serif;
}

h2 {
    font-size: 2rem;
}

footer {
    background-color: #ffffff;
    text-align: center;
    padding: 20px;
    position: relative;
    display: block;
    color: #111
}

footer p {
    font-size: 16px;
}

footer span {
    text-decoration: line-through;
    padding: 3px
}

main {
    /* max-width: 1800px; */
    margin: 0px auto;
}

nav {
    background-color: #ffffff;
    text-align: left;
    font-family: "Figtree", sans-serif;
    font-size: 21px;
    font-weight: 300;
    color: #121212;
    padding: 15px;
}

/* underline nav li element after clicked */
nav ul li a:active {
    text-decoration: underline;
}

nav div {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 10px;
    margin-top: 10px;
}

nav ul {
    margin: 0px;
    margin-block-start: 0px;
    padding-inline-start: 0px;
}

nav ul li {
    display: inline; 
    margin-right: 20px;
    ;
}
nav ul li a {
    text-decoration: none
}

/* flexbox classes */
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.column {
    flex-basis: 100%;
}

.bordered {
    border: none;
        margin: 5px;
}

@media screen and (min-width: 800px) {
    
    .column {
        flex: 1;
    }

    ._30 {
        flex: 3;
    }

    ._50 {
        flex: 5;
    }

    ._40 {
        flex: 4;
    }

    ._60 {
        flex: 6;
    }

    ._70 {
        flex: 7;
    }

    ._33 {
        flex: 3.3;
    }
}

#work-grid h3 {
			font-weight: 700;
			font-size: 18px;
			text-decoration: underline;
		}

		#work-grid a {
			font-size: 18px;
			width: 100%;
			font-weight: 400;
			text-decoration: none;
		}

        #work-grid a p {
            margin-top: 0px;
        }


		#work-grid {
			display: grid;
			grid-gap: 1rem;
			grid-row-gap: 2rem;
			grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
			margin-bottom: 200px;
			margin-top: 40px;	
		}

		#work-grid img {
			object-fit: cover;
			width: 100%;
			height: 350px;
			margin-bottom: 20px;
			/* box-shadow: 0.6rem 0.6rem #ffffff; */
			
		}

		#work-grid p {
			font-size: 16px;
		}

		#work-grid .overlay {
			position: relative;
		}

        .image-wide {
            max-width: 90%;
            margin: 0 auto;
        }

        @media screen and (max-width: 800px) {

            body {
                margin: 0 5px;
            }

			.intro-text {
				font-size: 1.2rem
			}

            #work-grid {
			grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
		}

        #work-grid img {
            height: 300px;
        }

			.reverse-on-mobile {
				flex-direction: column-reverse;
			}

			.reverse-on-mobile h2 {
				text-align: right;
			}

			.header-row {
				margin-top: 80px;
				margin-bottom: 80px;
				height: auto;
			}

			.intro-text {
				margin-left: 0px;
				padding: 15px
			}

			.container {
				margin-left: 0px;
				padding: 15px
			}

			#work-grid {
				margin-left: 0px;
			}

			.img-container {
				height: 10vh
			}
		}