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

h1,
h2 {
  font-family: "Raleway", sans-serif; }

h2 {
  font-size: 2.5rem; }

h4,
h5,
h6 {
  font-weight: normal; }

#navbar {
  position: fixed;
  top: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 4rem;
  background-color: #be3144; }
  #navbar .navbar-item {
    margin: 0 1.5rem; }
    #navbar .navbar-item a {
      text-decoration: none;
      color: white;
      font-size: x-large; }

#main {
  margin-top: 4rem;
  height: 100%; }

#welcome-section {
  height: calc(100vh - 4rem);
  background-color: #1e1e20;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: xx-large; }

#welcome-section h4 {
  color: #be3144;
  font-style: italic; }

#projects {
  background-color: #45567d;
  padding-top: 3rem; }

#projects header h2 {
  color: white;
  border-bottom: 0.2rem solid white;
  font-weight: normal;
  text-align: center;
  margin: 0 auto 6rem auto;
  max-width: 640px; }

.projects-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-gap: 3rem;
  margin: 0 3rem 1rem 3rem; }

.project-tile {
  background-color: black; }

.project-tile img {
  width: 100%;
  height: calc(100% - 5.5rem);
  object-fit: cover; }

.project-footer {
  background-color: black;
  color: white;
  height: 5rem;
  font-size: large;
  display: flex;
  justify-content: center;
  align-items: center; }

#show-all {
  width: 6rem;
  height: 3rem;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center; }

#show-all-container {
  display: flex;
  justify-content: center;
  padding-bottom: 1rem; }

#show-all a {
  color: white;
  text-decoration: none; }

#footer {
  background-color: black;
  border-top: 2px #be3144 solid;
  color: white;
  display: flex;
  justify-content: space-between;
  padding: 2rem 5rem; }

@media (max-width: 500px) {
  #welcome-section {
    padding: 0 3rem;
    text-align: center; }
  .projects-list {
    margin: 10px; }
  #footer {
    flex-direction: column;
    padding: 1rem;
    align-items: flex-start; }
  #footer h4 {
    margin: 0.5rem 0; } }