* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Exo', sans-serif;
  font-size: 12px;
  color: #fff;
  background-color: #222;
}

@media screen and (max-width: 500px){
  .grid-container {
    display: grid;
    grid-gap: 3px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 20px;
    grid-template-areas: "welcome" "project1" "project2" "footer";
    height: 100vh;
  }
}
@media screen and (min-width: 501px){
  .grid-container {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr minmax(100px, 500px) minmax(100px, 500px) 1fr;
    grid-template-rows: 1fr minmax(2fr, 500px) minmax(2fr, 500px) 1fr 20px;
    grid-template-areas: 
      ". . . ." 
      ". welcome project1 ."
      ". welcome project2 ."
      ". . . ."
      "footer footer footer footer";
    height: 100vh;
  }
}

.content {
  grid-column: welcome-start / welcome-end;
  grid-row: welcome;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2px 10px;
}

.project1 {
  grid-column: project1;
  grid-row: project1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2px 10px;
}

.project2 {
  grid-column: project2;
  grid-row: project2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.footer {
  grid-column: footer;
  grid-row: footer;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  font-size: 9px;
  font-weight: 100;
  padding: 2px 30px;
  
}

h1 {
  font-size: 50px;
  font-weight: 100;
}

h2 { 
  font-size: 30px;
  font-weight: 100;
}

p {
  text-align: center;
  font-weight: 200;
  display:inline-block;
}

.button {
  text-decoration:none;
  color: #fff;
  border: #fff 1px solid;
  padding:5px 10px;
  border-radius:5px;
  margin-top: 5px;
}

.button:hover{
  background:#fff;
  color:#333;
}