style.css

body { font-family: 'Noto Sans',sans-serif; background: #caebf2; }

h1, h2, h3, h4 { font-family: 'Roboto Mono',monospace; }

.container { max-width: 840px; margin: 0 auto; }

.container > div { margin: 20px auto; }

.intro { text-align: center; }

.about-grid { display: grid; grid-template-columns: 50% 50%; }

.i-am, .i-like { text-align: center; }

.about-list { list-style: none; }

@media (max-width: 480px) {
  .about-grid { grid-template-columns: 100%; }
}

.projects-heading { text-align: center; }

.projects-grid { display: grid; grid-template-columns: 50% 50%; }

.project-image-wrapper { justify-self: center; padding: 4%; position: relative; }

.project-image { border-radius: 5px; box-shadow: 0 4px 6px 0 rgba(34, 60, 80, 0.16); transition: all ease in-out .2s; }

.project-image:hover { filter: brightness(.75); box-shadow: 0 8px 12px 0 rgba(34, 60, 80, 0.16); }

.project-image-wrapper:hover > h4 { visibility: visible; }

.project-image-wrapper > h4 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; visibility: hidden; z-index: 2; transition: all ease-in-out .2s; }

@media (max-width: 650px) {
  .projects-grid { grid-template-columns: 100%; }
}

.links-and-contact { display: grid; grid-template-columns: 30% 70%; }

.links { justify-self: center; }

.links-list { list-style: none; padding: 0; }

@media (max-width: 650px) {
  .links-and-contact { grid-template-columns: 100%; }
}

.profile-picture { border-radius: 50%; width: 150px; height: 150px; box-shadow: 0 4px 6px 0 rgb(34, 60, 80, 0.16); transition: all ease-in-out .2s; }

.profile-picture:hover { box-shadow: 0 8px 12px 0 rgb(34, 60, 80, 0.16); }

form input, textarea { padding: 5px; border-radius: 5px; width: 240px; }

form input [type="submit"] { width: 250px; }

.submit-button-wrapper { margin: 20px 0; }

hr { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); }