body {
  font-family: "Poppins", sans-serif;
  margin: 50px 50px 0 50px;
  background-color: #faf9f6;
  display: flex;
  flex-direction: column;
  min-height: 95vh;
}

.main {
  flex: 1;
}

span {
  color: #191970;
  display: inline-block;
}

.card-text {
  text-align: justify;
}

footer {
  text-align: right;
  color: midnightblue;
}

.coder {
  margin-top: 10px;
  font-size: 20px;
  text-align: center;
  font-weight: 700;
}


/* devices less than 680 pixels */
@media (max-width: 680px) {
  .logo {
    width: 100px;
  }
  
  h1 {
    font-size: 3.5rem;
    text-align: center;
  }
  
  .card > img {
    width: 100%;
    height: 200px;
    margin-bottom: 10px;
    margin-right: 50px;
    object-fit: cover;
  }

  .coder { font-size: 12px; }
}

/* devices more than 681 pixels */
@media (min-width: 681px) {
  h1 {
    font-size: 5rem;
  }
  
  .card {
    display: inline-block;
    width: 45%;
  }
  
  .tile-image {
    height: 200px;
    margin-right: 50px;
    display: inline-block;
  }
  
  .left {
    float: left;
  }
  
  .right {
    float: right;
  }
}