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

body {
  font-family: system-ui, sans-serif;
  background: #222629;
}

.icon-box {
  height: 1em;
  background: #474B4F;
  align: center;
}

.icon {
  height: 1.5em;
  align: center;
}

.footer-text {
  color: #86C232;
  white-space: nowrap;
  font-weight: bold;
}

.card {
  /* even card spacing */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* end even card spacing */

  padding: 0;
  margin: 10px;
}

a:link {
  text-decoration: none;
}

a.header-link:hover {
   color: white;
 }

.header-link {
  color: #222629;
  margin: 0 15px;
}

.container {
  display: grid;
  height: 100vh;

  /* basic three column layout*/
  grid-template-rows: auto 1fr auto;
}

header {
    height: 3em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #86C232;
  padding: 1rem;
  color: #222629;
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

footer {
  padding: 1rem;
  text-align: center;
  color: #6B6E70;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  font-size: 4em;
  color: white;
  margin: 1rem 1rem;
}

.logo-header {
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  font-size: 1em;
  color: white;
}

.logo-icon {
  height: 1.5em;
  margin: 0 10px;
}

.logo-icon-inverse {
  height: 1.5em;
  margin: 0 10px;
}

.logo-green {
  color: #86C232;
  margin: 0px 7px;
}

.logo-grey {
  color: #222629;
  margin: 0px 5px;
}

.title {
  display: flex;
  justify-content: center;
    color: white;
    font-size: 2em;
    font-weight: bold;
    margin: 1rem 4rem;
}

.tinyLayout {
               -webkit-column-count: 3;
                  -moz-column-count: 3;
                       column-count: 3;

               -webkit-column-gap: 20px;
                  -moz-column-gap: 20px;
                       column-gap: 20px;
            }

.subjectTitle {
               display: flex;
               justify-content: center;
                 color: #86c232;
                 font-size: 1.5em;
                 font-weight: bold;
                 margin: 1rem 4rem 0rem;
           }

.subjectTitleTiny {
               display: flex;
               justify-content: center;
                 color: #86c232;
                 font-size: 1em;
                 font-weight: bold;
                 margin: 0.75rem 1rem 0rem;
           }

.body {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.text {
  display: flex;
  justify-content: center;
    color: white;
    font-size: 2em;
    font-weight: normal;
    margin: 6rem 1rem;
}

.text2 {
  display: flex;
  justify-content: center;
    color: white;
    font-size: 1.5em;
    font-weight: normal;
	font-style: italic;
    margin: 3rem 10rem;
}

.language-icon {
  height: 1.25em;
  margin: 0 10px;
  vertical-align: middle;
}

.content {
  display: flex;
  justify-content: center;
    color: white;
    font-size: 1em;
    font-weight: normal;
    margin: 1rem 4rem;
}

.contentTiny {
  display: flex;
  justify-content: center;
    color: white;
    font-size: 0.75em;
    font-weight: normal;
    margin: 0.25rem 1rem;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  /* pancake no stretch */
  /* flex: 1 1 200px;  */
  /* end pancake no stretch */

  /* pancake with stretch */
  flex: 0 1 200px;
  /* end pancake with stretch */
}