@import url(typography.css);

.green {
    --bg-image-color: linear-gradient(to top, #004d00 0%, #006600 100%);
    --text-color: #fff;
    --main-subtitle-text-color: #66ff66;

    --nav-bg-color: #1B5E20;
    --nav-hover-bg-color: #003300;
    --nav-text-color: #fff;
    --nav-hover-text-color: #D6FFD6;
    --nav-dropdown-bg-color: #1F5C20;
    --nav-dropdown-hover-bg-color: #003300;
    --nav-dropdown-text-color: #66ff66;
    --nav-dropdown-box-shadow-color: rgba(0,0,0,0.2);
    --nav-dropdown-title: #fff;
    --nav-bottom-shadow-color: rgba(0, 0, 0, 0.1);

    --card-box-shadow: rgba(0, 0, 0, 0.08);
    --card-project-image-shadow: rgba(0, 0, 0, 0.5);
    --card-image-shadow: #000;
    --card-btn-bg-color: #4caf50;
    --card-btn-text-color: #fff;
    --card-btn-hover-bg-color: #3a893e;

    --anchor-color: #66ff66;
    --anchor-hover-color: #99ff99;
    --profile-image-shadow: #000;
    --input-text-color: #2e7d32;
    --card-bg-image: linear-gradient(to right, #003300 0%, #004d00 100%);
    --cipher-input: linear-gradient(to right, #004d00 0%, #003300 100%);
    --error-text-color: #ff0000;

    --btn-bg-color: #008000;
    --btn-hover-bg-color: #4a9c4a;

    --highlight-text-color: #000;
    --highlight-text-bg-color: #ffff00;

    --red-btn-bg-color: #ff0000;
    --red-btn-hover-bg-color: #b95555;

    --alphabet-keys-bg-color: #848484;
}

.light {
    --bg-image-color: linear-gradient(to top, #ffffff 0%, #cccccc 100%);
    --text-color: #000000;
    --main-subtitle-text-color: #333333;

    --nav-bg-color: #f2f2f2;
    --nav-hover-bg-color: #e6e6e6;
    --nav-text-color: #000000;
    --nav-hover-text-color: #1a1a1a;
    --nav-dropdown-bg-color: #f5f5f5;
    --nav-dropdown-hover-bg-color: #e6e6e6;
    --nav-dropdown-text-color: #333333;
    --nav-dropdown-box-shadow-color: rgba(0, 0, 0, 0.1);
    --nav-dropdown-title: #000000;
    --nav-bottom-shadow-color: rgba(0, 0, 0, 0.05);

    --card-box-shadow: rgba(0, 0, 0, 0.1);
    --card-project-image-shadow: rgba(0, 0, 0, 0.3);
    --card-image-shadow: #333333;
    --card-btn-bg-color: #cccccc;
    --card-btn-text-color: #000000;
    --card-btn-hover-bg-color: #b3b3b3;

    --anchor-color: #333333;
    --anchor-hover-color: #1a1a1a;
    --profile-image-shadow: #333333;
    --input-text-color: #4d4d4d;
    --card-bg-image: linear-gradient(to right, #ffffff 0%, #cccccc 100%);
    --cipher-input: linear-gradient(to right, #cccccc 0%, #ffffff 100%);
    --error-text-color: #cc0000;

    --btn-bg-color: #cccccc;
    --btn-hover-bg-color: #b3b3b3;

    --highlight-text-color: #000000;
    --highlight-text-bg-color: #000;

    --red-btn-bg-color: #cc0000;
    --red-btn-hover-bg-color: #993333;

    --alphabet-keys-bg-color: #b3b3b3;
}

.dark {
    --bg-image-color: linear-gradient(to top, #000000 0%, #333333 100%);
    --text-color: #ffffff;
    --main-subtitle-text-color: #cccccc;

    --nav-bg-color: #1a1a1a;
    --nav-hover-bg-color: #333333;
    --nav-text-color: #ffffff;
    --nav-hover-text-color: #e6e6e6;
    --nav-dropdown-bg-color: #1f1f1f;
    --nav-dropdown-hover-bg-color: #333333;
    --nav-dropdown-text-color: #cccccc;
    --nav-dropdown-box-shadow-color: rgba(0, 0, 0, 0.5);
    --nav-dropdown-title: #ffffff;
    --nav-bottom-shadow-color: rgba(0, 0, 0, 0.3);

    --card-box-shadow: rgba(0, 0, 0, 0.5);
    --card-project-image-shadow: rgba(0, 0, 0, 0.7);
    --card-image-shadow: #000000;
    --card-btn-bg-color: #4d4d4d;
    --card-btn-text-color: #ffffff;
    --card-btn-hover-bg-color: #666666;

    --anchor-color: #cccccc;
    --anchor-hover-color: #e6e6e6;
    --profile-image-shadow: #000000;
    --input-text-color: #b3b3b3;
    --card-bg-image: linear-gradient(to right, #000000 0%, #333333 100%);
    --cipher-input: linear-gradient(to right, #333333 0%, #000000 100%);
    --error-text-color: #ff3333;

    --btn-bg-color: #4d4d4d;
    --btn-hover-bg-color: #666666;

    --highlight-text-color: #ffffff;
    --highlight-text-bg-color: #999999;

    --red-btn-bg-color: #cc0000;
    --red-btn-hover-bg-color: #993333;

    --alphabet-keys-bg-color: #666666;
}

.blue {
    --bg-image-color: linear-gradient(to top, #00004d 0%, #000066 100%);
    --text-color: #fff;
    --main-subtitle-text-color: #66ccff;

    --nav-bg-color: #1B3E5E;
    --nav-hover-bg-color: #000033;
    --nav-text-color: #fff;
    --nav-hover-text-color: #D6E6FF;
    --nav-dropdown-bg-color: #1F3C5C;
    --nav-dropdown-hover-bg-color: #000033;
    --nav-dropdown-text-color: #66ccff;
    --nav-dropdown-box-shadow-color: rgba(0,0,0,0.2);
    --nav-dropdown-title: #fff;
    --nav-bottom-shadow-color: rgba(0, 0, 0, 0.1);

    --card-box-shadow: rgba(0, 0, 0, 0.08);
    --card-project-image-shadow: rgba(0, 0, 0, 0.5);
    --card-image-shadow: #000;
    --card-btn-bg-color: #4a90e2;
    --card-btn-text-color: #fff;
    --card-btn-hover-bg-color: #3a70b2;

    --anchor-color: #66ccff;
    --anchor-hover-color: #99e6ff;
    --profile-image-shadow: #000;
    --input-text-color: #2e5d7d;
    --card-bg-image: linear-gradient(to right, #000033 0%, #00004d 100%);
    --cipher-input: linear-gradient(to right, #00004d 0%, #000033 100%);
    --error-text-color: #ff0000;

    --btn-bg-color: #000080;
    --btn-hover-bg-color: #4a6c9c;

    --highlight-text-color: #000;
    --highlight-text-bg-color: #ffff00;

    --red-btn-bg-color: #ff0000;
    --red-btn-hover-bg-color: #b95555;

    --alphabet-keys-bg-color: #848484;
}

.purple {
    --bg-image-color: linear-gradient(to top, #4d004d 0%, #660066 100%);
    --text-color: #fff;
    --main-subtitle-text-color: #cc66cc;

    --nav-bg-color: #5E1B5E;
    --nav-hover-bg-color: #330033;
    --nav-text-color: #fff;
    --nav-hover-text-color: #FFD6FF;
    --nav-dropdown-bg-color: #5C1F5C;
    --nav-dropdown-hover-bg-color: #330033;
    --nav-dropdown-text-color: #cc66cc;
    --nav-dropdown-box-shadow-color: rgba(0,0,0,0.2);
    --nav-dropdown-title: #fff;
    --nav-bottom-shadow-color: rgba(0, 0, 0, 0.1);

    --card-box-shadow: rgba(0, 0, 0, 0.08);
    --card-project-image-shadow: rgba(0, 0, 0, 0.5);
    --card-image-shadow: #000;
    --card-btn-bg-color: #af4caf;
    --card-btn-text-color: #fff;
    --card-btn-hover-bg-color: #893a89;

    --anchor-color: #cc66cc;
    --anchor-hover-color: #ff99ff;
    --profile-image-shadow: #000;
    --input-text-color: #7d327d;
    --card-bg-image: linear-gradient(to right, #330033 0%, #4d004d 100%);
    --cipher-input: linear-gradient(to right, #4d004d 0%, #330033 100%);
    --error-text-color: #ff0000;

    --btn-bg-color: #800080;
    --btn-hover-bg-color: #9c4a9c;

    --highlight-text-color: #000;
    --highlight-text-bg-color: #ffff00;

    --red-btn-bg-color: #ff0000;
    --red-btn-hover-bg-color: #b95555;

    --alphabet-keys-bg-color: #848484;
}

.red {
    --bg-image-color: linear-gradient(to top, #4d0000 0%, #660000 100%);
    --text-color: #fff;
    --main-subtitle-text-color: #ff6666;

    --nav-bg-color: #5E1B1B;
    --nav-hover-bg-color: #330000;
    --nav-text-color: #fff;
    --nav-hover-text-color: #FFD6D6;
    --nav-dropdown-bg-color: #5C1F1F;
    --nav-dropdown-hover-bg-color: #330000;
    --nav-dropdown-text-color: #ff6666;
    --nav-dropdown-box-shadow-color: rgba(0,0,0,0.2);
    --nav-dropdown-title: #fff;
    --nav-bottom-shadow-color: rgba(0, 0, 0, 0.1);

    --card-box-shadow: rgba(0, 0, 0, 0.08);
    --card-project-image-shadow: rgba(0, 0, 0, 0.5);
    --card-image-shadow: #000;
    --card-btn-bg-color: #e24a4a;
    --card-btn-text-color: #fff;
    --card-btn-hover-bg-color: #b23a3a;

    --anchor-color: #ff6666;
    --anchor-hover-color: #ff9999;
    --profile-image-shadow: #000;
    --input-text-color: #7d2e2e;
    --card-bg-image: linear-gradient(to right, #330000 0%, #4d0000 100%);
    --cipher-input: linear-gradient(to right, #4d0000 0%, #330000 100%);
    --error-text-color: #ff0000;

    --btn-bg-color: #800000;
    --btn-hover-bg-color: #9c4a4a;

    --highlight-text-color: #000;
    --highlight-text-bg-color: #ffff00;

    --red-btn-bg-color: #ff0000;
    --red-btn-hover-bg-color: #b95555;

    --alphabet-keys-bg-color: #848484;
}

html { scroll-behavior: smooth; }

thead th {
  background-color: #1e1e2f;
  color: #fff;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #ccc;
  padding: 12px;
}

.footer-box {
  border: 0px solid;
  border-radius: 6px;
  padding: 10px 15px;
  text-align: center;
  font-size: 0.9em;
  display: inline-block;
  margin: 10px auto;
}

.footer-box strong {
  margin-right: 8px;
}

.footer-box a {
  text-decoration: none;
  margin: 0 6px;
}

body {
    background-image: var(--bg-image-color);
    color: var(--text-color);
    width: auto;
    min-width: 320px;
}

#logo-header {
    width: 100%;
    height: 17em;
    object-fit: contain;
    background-image: url('../img/logo.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0.63em;
    box-shadow: 0 0.125em 0.125em rgba(0, 0, 0, 0.8);
    margin-top: 3.33em;
}

.platform-badge {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    margin: auto;
}

#opportunity {
    background: linear-gradient(to right, #f30e0e, #f07f56);
    border-radius: 1em;
    padding: 2em;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    margin: auto;
}

#section-links {
    background-image: var(--cipher-input);
    border-radius: 0.63em;
    width: 20em;
    display: flexbox;
    justify-content: center;
    align-items: center;
    padding: 2em;
    margin: auto;
}

a { color: var(--anchor-color); }
a:hover { color: var(--anchor-hover-color); }

button {
    background-color: var(--btn-bg-color);
    color: var(--text-color);
    border: none;
    cursor: pointer;
    margin: 0.63em 0;
}

button:hover { background-color: var(--btn-hover-bg-color); }

.main__subtitle {
    color: var(--main-subtitle-text-color);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    margin: auto;
}

textarea {
    color: var(--input-text-color);
    width: 100%;
    height: 10em;
    border-radius: 0.63em;
    margin: 0.63em 0;
}

input {
    color: var(--input-text-color);
    width: 100%;
    height: 2.88em;
    border-radius: 0.63em;
    margin: 0.63em 0;
}

.cipher-input {
    background-image: var(--cipher-input);
    border-radius: 0.63em;
    width: auto;
    padding: 1em 2.22em 1em 1.22em;
    margin: auto;
}

.card {
    background-image: var(--card-bg-image);
    color: var(--text-color);
    border-radius: 0.63em;
    box-shadow: 0 0.25em 0.94em rgba(0, 0, 0, 0.1), 0 1px 3px var(--card-box-shadow);
    border: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
}

.card__copy {
    text-align: left;
    padding: 0 1.25em 0 1.25em;
}

.card__space-evenly {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
    margin: auto;
}

.card__sponsor-cta-btn {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    margin: auto;
}

.card__sponsor-svg {
    padding-right: 0em;
    max-width: 1200px;
    max-height: 7702px;
    width: 100%;
    height: auto;
    border-radius: 0.63em;
    box-shadow: 0 0.125em 0.125em var(--card-image-shadow);
}

.card__goal-content {
    text-align: left;
    max-width: 80%;
    padding: 0 1.25em 2em 1.25em;
    margin: auto;
}

.title-image,
.card__project-image {
    border-radius: 10%;
    box-shadow: 0 0.425em 0.45em var(--card-project-image-shadow);
}

.logo {
    color: var(--text-color);
    text-decoration: none;
    padding: 0.3em;
}

/* Navigation Styles */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    color: var(--nav-text-color);
    background: var(--nav-bg-color);
    box-shadow: 0 0.333em 0.25em var(--nav-bottom-shadow-color);
}

.navbar ul {
    text-align: center;
    padding-left: 0;
    margin: 0;
}

.navbar li { display: inline-block; }

.navbar .menu__link {
    display: block;
    padding: 1.3em;
    font-weight: bold;
    text-decoration: none;
    color: var(--nav-text-color);
}

.navbar .menu__link:hover, .active_anchor {
    color: var(--nav-hover-text-color) !important;
    background: var(--nav-hover-bg-color);
    transition: ease 0.5s all;
}

.menu__link:active {
    background: var(--nav-hover-bg-color);
    color: var(--nav-hover-text-color);
}

.menu__item {
    position: relative;
    display: inline-block;
}

.dropdown {
    display: none;
    position: absolute;
    background-color: var(--nav-dropdown-bg-color);
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px var(--nav-dropdown-box-shadow);
    z-index: 1;
    border: solid 1px var(--nav-dropdown-text-color);
}

.dropdown__title {
    color: var(--nav-dropdown-title);
}

.dropdown__item {
    width: 100%;
    padding: 0.5em 0 0.5em 0;
    text-decoration: none;
    display: block;
    color: var(--nav-dropdown-text-color);
}

.dropdown__link {
    width: 100%;
    padding: 0.5em 0 1em 0;
    color: inherit;
    display: block;
}

.menu__item:hover .dropdown { display: block; }

.dropdown__item:hover {
    background-color: var(--nav-dropdown-hover-bg-color);
    color: var(--nav-dropdown-text-color);
}
/* End Navigation Styles */

.blog__prev-next-btn {
    width: 17em;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 2em;
    margin: auto;
}

#blog__list {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(16, auto);
    width: 100%;
    gap: 0.63em;
    margin: auto;
}

.blog__article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.63em;
    align-items: flex-start;
}

.blog__article img {
    width: 100%;
    height: auto;
    border-radius: 0.63em;
    box-shadow: 0 0.125em 0.125em var(--card-image-shadow);
}

.apple-badge {
    height: auto;
    height: 40px;
    max-height: 40px;
    min-height: 30px;    /* Honors Apple’s minimum */
    width: auto;
    min-width: 30px;
    margin: 10px;
}

#wealthy {
    height: auto;
    height: 55px;
    max-height: 55px;
    min-height: 30px;
    width: auto;
    min-width: 30px;
    margin: 10px;
}

#co-badge, #paypal-badge {
    background-color: #FFF;
    border-radius: 8px;
    padding: 1em;
    height: auto;
    height: 44px;
    max-height: 44px;
    min-height: 30px;    /* Honors Apple’s minimum */
    width: auto;
    min-width: 30px;
    margin: 10px;
}

@media (max-width: 768px) {
    .blog__article {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto 1fr;
        gap: 0.63em;
        align-items: flex-start;
    }
}

/* Recent Blog Article Carousel */
.image-text-container {
  display: flex;
  align-items: center;
  gap: 1.25em;
  flex-wrap: wrap;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
}

.carousel-item {
  min-width: 100vw;
  box-sizing: border-box;
  padding: 1em;
}

.carousel-container {
  width: 100vw;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.carousel-image {
  width: 100%;
  max-width: 300px;
  height: auto;
  object-fit: cover;
  flex-shrink: 0;
}

.text-content {
  flex: 1;
  min-width: 200px;
}

@media (max-width: 768px) {
  .image-text-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .carousel-image {
    max-width: 100%;
  }

  .text-content h2 {
    font-size: 1.25em;
  }

  .card__btn {
    font-size: 0.95em;
  }

  .carousel-container {
    height: auto;
  }
}
/* End Recent Blog Article Carousel */

.center {
    width: 100%;
    text-align: center;
}

.highlight-text {
    background-color: var(--highlight-text-bg-color);
    color: var(--highlight-text-color);
}

.left { text-align: left; }
.social { text-decoration: none; }
.center-btn {
    display: flex;
    justify-content: center;
    margin: auto;
}

.share-this {
    background-image: var(--cipher-input);
    border-radius: 0.63em;
    width: 20em;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 2em;
    margin: auto;
}

.wisdom {
    background-image: var(--cipher-input);
    border-radius: 0.63em;
}

.red-btn {
    background-color: var(--red-btn-bg-color) !important;
    border: none;
    cursor: pointer;
    width: auto;
    text-decoration: none;
    padding: 0.63em;
}

.red-btn:hover { background-color: var(--red-btn-hover-bg-color) !important; }

#main__bulletin {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(2, auto);
    grid-template-areas:
    "eight-hundred-goal"
    "main__subscribe";
    gap: 0.63em;
    margin: auto;
}

.eight-hundred-goal { grid-area: eight-hundred-goal; }
.main__subscribe { grid-area: main__subscribe; }

.center-vertically {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

}

#affiliate-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, auto);
    grid-template-areas:
    "apple-music"
    "apple-tv"
    "apple-books"
    "capital-one"
    "wealthy-affiliate"
    "paypal-link";
    width: 88%;
    gap: 0.63em;
    margin: auto;
}

#mobile-desktop__cards {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(13, auto);
    grid-template-areas:
    "paycheck-budget-plan"
    "stay-awake"
    "paycheck-analysis"
    "poop-diary-tracker"
    "jot-shopping-list"
    "chopping-block"
    "prayer-requests-tracker"
    "jot-pronto"
    "tip-service-calculator"
    "house-flip-analysis"
    "citation-generator"
    "mla-citation-generator"
    "thesis-generator";
    width: 100%;
    gap: 0.63em;
    margin: auto;
}

#web__cards {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
    grid-template-areas:
    "wisdom"
    "prayer-request"
    "qr-code-generator"
    "cipher-text";
    width: 100%;
    gap: 0.63em;
    margin: auto;
}

.main__header {
    text-align: center;
    padding-top: 1.25em;
}

#apps {
    width: 100%;
    padding: 0;
    margin: 0;
}

#wisdom { grid-area: wisdom; }
#prayer-request { grid-area: prayer-request; }
#qr-code-generator { grid-area: qr-code-generator; }
#cipher-text { grid-area: cipher-text; }
#paycheck-budget-plan { grid-area: paycheck-budget-plan; }
#stay-awake { grid-area: stay-awake; }
#paycheck-analysis { grid-area: paycheck-analysis; }
#poop-diary-tracker { grid-area: poop-diary-tracker; }
#jot-shopping-list { grid-area: jot-shopping-list; }
#chopping-block { grid-area: chopping-block; }
#prayer-requests-tracker { grid-area: prayer-requests-tracker; }
#jot-pronto { grid-area: jot-pronto; }
#tip-service-calculator { grid-area: tip-service-calculator; }
#house-flip-analysis { grid-area: house-flip-analysis; }
#citation-generator { grid-area: citation-generator; }
#mla-citation-generator { grid-area: mla-citation-generator; }
#thesis-generator { grid-area: thesis-generator; }

#apple-music { grid-area: apple-music; }
#apple-tv { grid-area: apple-tv; }
#apple-books { grid-area: apple-books; }
#capital-one { grid-area: capital-one; }
#wealthy-affiliate { grid-area: wealthy-affiliate; }
#paypal-link { grid-area: paypal-link; }

#encrypted_messenger, #personal-blog, #portfolio-website {
    text-align: center;
}

.card__content {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.card__text {
    flex: 1;
}

.card__image {
    width: auto;
    height: auto;
    max-width: 70%;
    border-radius: 0.63em;
    box-shadow: 0 0.125em 0.125em var(--card-image-shadow);
}

.card__sponsor-image {
    padding-right: 2em;
    width: 1200px;
    height: 7702px;
    border-radius: 0.63em;
    box-shadow: 0 0.125em 0.125em var(--card-image-shadow);
}

.card__btn {
    background-color: var(--card-btn-bg-color);
    color: var(--card-btn-text-color);
    padding: 0.63em;
    width: auto;
    text-decoration: none;
    border-radius: 0.5em;
    transition: background-color 2s ease-out 100ms
}

.card__btn:hover {
    background-color: var(--card-btn-hover-bg-color);
}

figure,
figcaption {
    text-align: center;
    font-size: smaller;
}

.main__footer {
    grid-area: main__footer;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 0 0 1.25em 0;
}

#profile-image {
    text-align: center;
    width: 100%;
    max-width: 20em;
    height: auto;
    border-radius: 0.63em;
    box-shadow: 0 0.125em 0.125em var(--profile-image-shadow);
}

.card__about {
    text-align: left;
    padding: 0 1.25em 2em 1.25em;
    margin: auto;
}

@media only screen and (min-width: 40.94em) {
    .main__header {
        padding: 1.56em;
    }

    #mobile-desktop__cards {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(7, auto);
        grid-template-areas:
        "paycheck-budget-plan stay-awake"
        "paycheck-analysis poop-diary-tracker"
        "jot-shopping-list chopping-block"
        "prayer-requests-tracker jot-pronto"
        "tip-service-calculator house-flip-analysis"
        "citation-generator mla-citation-generator"
        "thesis-generator";
        gap: 0.63em;
        margin: auto;
    }

    #web__cards {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
        grid-template-areas:
        "wisdom prayer-request"
        "qr-code-generator cipher-text";
        gap: 0.63em;
        margin: auto;
    }

    #affiliate-list {
        display: grid;
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(3, auto);
        grid-template-areas:
        "apple-music apple-tv"
        "apple-books capital-one"
        "wealthy-affiliate paypal-link";
        width: 88%;
        gap: 0.63em;
        margin: auto;
    }

    #opportunity {
        width: 40%;
    }
}

@media only screen and (min-width: 103em) {

    #mobile-desktop__cards {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(5, auto);
        grid-template-areas:
        "paycheck-budget-plan stay-awake paycheck-analysis"
        "poop-diary-tracker jot-shopping-list chopping-block"
        "prayer-requests-tracker jot-pronto tip-service-calculator"
        "house-flip-analysis citation-generator mla-citation-generator"
        "thesis-generator thesis-generator thesis-generator";
        gap: 0.63em;
        margin: auto;
    }

    #web__cards {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, auto);
        grid-template-areas:
        "wisdom prayer-request qr-code-generator"
        "cipher-text cipher-text cipher-text";
        gap: 0.63em;
        margin: auto;
    }

    #affiliate-list {
        display: grid;
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(2, auto);
        grid-template-areas:
        "apple-music apple-tv apple-books"
        "capital-one wealthy-affiliate paypal-link";
        width: 88%;
        gap: 0.63em;
        margin: auto;
    }

    #logo-header {
        width: 100%;
        height: 22em;
        object-fit: contain;
        background-image: url('../img/logo.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 0.63em;
        box-shadow: 0 0.125em 0.125em rgba(0, 0, 0, 0.8);
        margin-top: 0;
    }

    .card__about {
        text-align: left;
        max-width: 50%;
        padding: 0 1.25em 2em 1.25em;
        margin: auto;
    }

    .card__image {
        max-width: 88%;
    }
}

@media only screen and (min-width: 53.94em) {
    #main__bulletin {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
        "eight-hundred-goal main__subscribe";
        gap: 0.63em;
        margin: auto;
    }

    .card__sponsor-cta-btn {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        flex-wrap: wrap;
        align-items: center;
        margin: auto;
    }

    .card__sponsor-image {
        padding-right: 0em;
        max-width: 1200px;
        max-height: 7702px;
        width: 100%;
        height: auto;
        border-radius: 0.63em;
        box-shadow: 0 0.125em 0.125em var(--card-image-shadow);
    }

    .card__sponsor-svg {
        padding-right: 0em;
        max-width: 1200px;
        max-height: 7702px;
        width: 100%;
        height: auto;
        border-radius: 0.63em;
        box-shadow: 0 0.125em 0.125em var(--card-image-shadow);
    }
}

@media only screen and (min-width: 80em) {
    .legal__copy {
        text-align: left;
        max-width: 50%;
        padding: 0 1.25em 2em 1.25em;
        margin: auto;
    }

    .contact__form {
        text-align: left;
        max-width: 50%;
        padding: 0 1.25em 2em 1.25em;
        margin: auto;
    }
}

/* QR Code Generator */
#generated-qr-code {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

#error-qr-data {
    color: var(--error-text-color);
    font-weight: 700;
}
/* End QR Code Generator */

/* Cipher Text */
#alphabet-keys {
    color: #fff;
    background-color: var(--alphabet-keys-bg-color);
    cursor: not-allowed;
}

.buy-me-a-drink {
    background-color: var(--red-btn-bg-color);
    color: var(--card-btn-text-color);
    border: none;
    cursor: pointer;
    border-radius: 0.5em;
    width: auto;
    text-decoration: none;
    padding: 0.63em;

    display: flex;
    justify-content: center;
    margin: auto;
}

.trademark {
    font-size: smaller;
    color: var(--text-color);
    text-align: center;
}

sub,
.yellow {
    color: var(--highlight-text-bg-color);
}

.card__cipher {
    padding-right: 2em;
}

#error-alpha-values,
#error-secret-key,
#error-message,
#error-results {
    color: var(--error-text-color);
    font-weight: 700;
}

@media only screen and (min-width: 40em) {
    .card__cipher {
        max-width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-right: 2em;
        margin: auto;
    }
}
/* End Cipher Text */

/* Goal */
.goal__grid-container {
    display: grid;
    grid-template-columns: repeat(76, auto);
    grid-template-rows: repeat(165, auto);
}

.goal__grid-item {
    padding: 5px;
    text-align: center;
    font-size: 1em;
}

@media only screen and (min-width: 40em) {
    .card__goal-content {
        max-width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: auto;
    }
}
/* End Goal */