* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    min-height: 100vh;
    background-color: #020303;
    color: #222;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-size:16px;
    text-align: center;
    background-image: url("../../imgs/indexBg.jpg");
    /* background-size: contain; */
    background-repeat: no-repeat;
    background-position: 50% 0%;
}
header img {
    max-width: 100%;
    height: auto;
    margin-top:1em;
    margin-bottom:1em;
}
header h1 {
    max-width: 1200px;
    margin:auto;
}
form#login {
    padding-top:21em;
    padding-bottom:1em;
    width:300px;
}
form#login input{
    margin:5px;
    padding:10px;
}
form#signUp label{
    margin-top:10px;
    margin-bottom:10px;
}
section {
    display: flow-root;
}
/* section h1 {
    font-size:44px;
}
section h2 {
    font-size:32px;
} */
section img {
    max-width: 100%;
    height: auto;
}
section#headline {
  color:#ddd;
  display: grid;
  grid-template-columns: minmax(0, 1200px);
  justify-content: center;
  padding:20px;
}
/* section#headline h1 {
    font-size:32px;
} */
section#welcome {
  background-color: #222222;
  color:#ddd;
  display: grid;
  grid-template-columns: minmax(0, 1200px);
  justify-content: center;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding:20px;
}
section#welcome h1 {
    /* font-size:32px; */
    color:white;
    padding-bottom:15px;
}
section#welcome h2:nth-of-type(1) {
    /* font-size:24px; */
    padding-bottom:15px;
}
section#welcome h2:nth-of-type(2) {
    /* font-size:22px; */
    padding-bottom:15px;
}
section#welcome p {
    padding-bottom:15px;
}
section#customize {
  background-color: #bdbdbd;
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(0, 600px);
  grid-template-rows: auto auto;
  justify-content: center;
  align-items: start;
  width: 100%;
  padding-left:20px;
}
section#customize h1 {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  margin: 0;
  text-align: left;
  padding-right:20px;
}
section#customize p {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  text-align: left;
}
section#customize img {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: 100%;
}
section#commodities {
  background-color: #222222;
  color:#ddd;
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(0, 600px);
  grid-template-rows: auto auto;
  justify-content: center;
  align-items: start;
  width: 100%;
  padding-left:20px;
}
section#commodities h1 {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  margin: 0;
  text-align: left;
  padding-right:20px;
}
section#commodities p {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  text-align: left;
}
section#commodities img {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: 100%;
}
section#pullRequests {
  background-color: #bdbdbd;
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(0, 600px);
  grid-template-rows: auto auto;
  justify-content: center;
  align-items: start;
  width: 100%;
  padding-left:20px;
}
section#pullRequests h1 {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  text-align: left;
  margin: 0;
}
section#pullRequests p {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  margin-top: 10px;
  text-align: left;
}
section#pullRequests img {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: 100%;
}
section#reporting {
  background-color: #222222;
  color:#ddd;
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(0, 600px);
  grid-template-rows: auto auto;
  justify-content: center;
  align-items: start;
  width: 100%;
  padding-left:20px;
}
section#reporting h1 {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  margin: 0;
  text-align: left;
  padding-right:20px;
}
section#reporting p {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  text-align: left;
}
section#reporting img {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: 100%;
}
section#users {
  background-color: #bdbdbd;
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(0, 600px);
  grid-template-rows: auto auto;
  justify-content: center;
  align-items: start;
  width: 100%;
  padding-left:20px;
}
section#users h1 {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  text-align: left;
  margin: 0;
}
section#users p {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  margin-top: 10px;
  text-align: left;
}
section#users img {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: 100%;
}
section#signup {
    display: grid;
    grid-template-columns: minmax(0, 1200px);
    justify-content: center;
    padding:20px;
    background-color: #222222;
    color:#ddd;
    text-align:left;
}
section#signup h1 {
    /* font-size:32px; */
    color:white;
}
section#signup h2 {
    /* font-size:22px; */
    color:grey;
}
footer {
    width: 100%;
    max-height:100px;
    background-color: #333;
    text-align: center;
    padding: 20px;
    color: #ddd;
    font-size:14px;
}
button {
    color:var(--text-color);
    font-family: "Poppins", sans-serif;
    font-style: normal;
    margin:auto;
    display:block;
    padding:10px;
    min-width:160px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
    border:none;
    transition: all 0.1s ease;
    background-color: #58a025;
    margin-top:20px;
    margin-bottom:20px;
    color:white;
}
button:hover {
    background-color:#6ac02d;
    box-shadow:
    1px 1px 6px rgba(0, 0, 0, 0.2),
    0px 2px 10px rgba(0, 0, 0, 0.15),
    0px 4px 20px rgba(0, 0, 0, 0.1);
}
button:active {
    background-color:#4a861f;
    transform: scale(0.95);
}
@media screen and (max-width: 768px) {
    body {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 50% 1.5%;
    }
    h1{
        font-size:1.25em;
    }
    h2{
        font-size:1.15em;
    }
    section#customize,
    section#commodities,
    section#pullRequests,
    section#users,
    section#reporting {
        display:block;
        padding:1em;
    }
    form#login {
        padding-top:6em;
        padding-bottom:.25em;
        width:auto;
        padding-left:1em;
        padding-right:1em;
    }

}