@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

main {
  background-color: #ccd0e3;
}

.content-container {
  margin: 2rem 5rem;
  background-color: white;
  text-align: left;
  justify-items: center;
}

.content-body {
  padding: 5% 10%;
  width: 100%;
}

h1 {
  font-family: "Poppins", sans-serif;
  font-size: 2.5rem;
  font-weight: bolder;
  padding: 3% 3% 0 3%;
}

p {
  color: #324158;
}

.automailer-info,
.comparison-table-group,
.prevent-spam-reminders,
.get-gmail-app-password,
.get-yahoo-app-password,
.customize-messages-guide {
  padding: 3%;
  font-family: "Poppins", sans-serif;
}

/* Comparison Table - Large Screen */
.comparison-table-group {
  justify-items: left;
  width: 100%;
  margin: 0;
  background-color: white;
}

.comparison-table-large {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid rgb(50, 65, 88);
}

table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
  margin: 0;
  table-layout: fixed;
  border: 2px solid rgb(50, 65, 88);
}

table thead tr {
  border: 1px solid rgb(50, 65, 88);
  background-color: rgb(50, 65, 88);
  color: white;
  text-align: center;
  font-weight: bold;
  font-family: "Poppins", sans-serif;
}

.table-heading {
  padding: 2%;
  font-size: 0.75rem;
}

td {
  border: 1px solid #333;
  padding: 1rem;
  text-align: center;
  font-family: "Poppins", sans-serif;
}

.side-heading {
  font-weight: bolder;
  text-align: left;
}

.daily-limit-info {
  font-size: 0.75rem;
  font-weight: lighter;
  text-align: left;
}

.automailer-pro-info {
  justify-self: center;
  width: 80%;
}

/* End Table Design - Large Screens */

/* Comparison Table - Small Screens */
.comparison-table-small {
  display: none;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid rgb(50, 65, 88);
}

.small-table-headers {
  background-color: rgb(50, 65, 88);
  color: white;
}

/* End Table Design - Large Screens */

.table-notice p {
  font-size: 0.75rem;
  text-align: justify;
}

/* Responsive Table Design */
@media screen and (max-width: 800px) {
  .comparison-table-large {
    display: none;
  }

  .comparison-table-small {
    display: block;
  }

  td {
    border: none;
  }

  .td-value-small {
    text-align: left;
    padding: 2% 20% 4% 20%;
  }
}

/* End of Table Designs */
.get-gmail-app-password-img,
.get-yahoo-app-password-img,
.customize-messages-guide-img {
  justify-self: center;
  padding: 3% 0;
}

/* Spam Reminders */
.prevent-spam-underline {
  text-decoration: underline;
}

.prevent-spam-reminders .primary-level {
  margin: 0;
  padding-left: 50px;
  list-style-type: square;
}

.prevent-spam-reminders .secondary-level {
  margin: 0;
  padding-left: 50px;
  list-style-type: lower-alpha;
}

/* Adjust Image Size */
.get-gmail-app-password img,
.get-yahoo-app-password img,
.customize-messages-guide img {
  width: 50vw;
  height: auto;
}

/* Small Screens */
@media screen and (max-width: 576px) {
  main {
    margin: 0;
  }

  .content-container {
    margin: 2rem 1rem;
  }

  .automailer-info,
  .comparison-table-group,
  .prevent-spam-reminders,
  .get-gmail-app-password,
  .get-yahoo-app-password,
  .customize-messages-guide {
    padding: 6% 3%;
  }

  .customize-guide-img img,
  .pushbullet-guide-img img {
    width: 80vw;
    height: auto;
  }

  .get-gmail-app-password img,
  .get-yahoo-app-password img,
  .customize-messages-guide img {
    width: 80vw;
    height: auto;
  }
}