@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
:root { --dark: rgb(20, 20, 20); --gray: rgb(140, 140, 140); --light: rgb(245, 245, 245); }

html, body { margin: 0; }

html { background: var(--dark); color: var(--dark); min-width: 320px; }

body { min-height: 100vh; display: flex; flex-direction: column; align-items: center; font-family: 'Montserrat', sans-serif; }
body header, body footer { flex-grow: 0; }
body .contents { flex-grow: 1; display: flex; flex-direction: column; max-width: 900px; padding: 0 60px; box-sizing: border-box; width: calc(100% - 4vw); background: var(--light); }
@media (max-width: 550px) { body .contents { padding: 0 30px; } }

a { color: var(--dark); }

a:hover { color: var(--gray); }

h1, h2, h3, h4, p { margin: 0; }

h2 { margin-bottom: 10px; }

p { text-align: justify; }

.profile-name { text-align: center; margin: 30px 0; }

#about { margin-bottom: 30px; }
@media (max-width: 650px) { #about { display: flex; flex-direction: column; align-items: center; } }
#about .profile-pic { width: 250px; border-radius: 4px; float: left; margin-right: 30px; }
@media (max-width: 550px) { #about .profile-pic { float: unset; margin-right: 0; margin-bottom: 20px; } }

#projects { margin-bottom: 30px; }
#projects .project-grid { display: grid; grid-template-columns: auto auto; column-gap: 20px; row-gap: 5px; }
@media (max-width: 550px) { #projects .project-grid { grid-template-columns: auto; } }

#contact .contact-links { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; margin-bottom: 10px; }
#contact .contact-links a { text-decoration: none; margin: 10px; }
#contact .contact-links .contact-logo { width: 30px; height: 30px; filter: brightness(0) saturate(100%); }
#contact .contact-links .contact-logo:hover { filter: brightness(0) saturate(100%) invert(63%) sepia(7%) saturate(5%) hue-rotate(4deg) brightness(88%) contrast(87%); }

.site-header { display: flex; width: 100%; justify-content: center; }

.navbar { display: flex; }
.navbar .navbar-item { padding: 20px; }
.navbar .navbar-item .navbar-link { font-size: 16px; text-transform: uppercase; text-decoration: none; }