body {background: ghostwhite; width: 100vw; display: flex; justify-content: center; margin: 0; flex-wrap: wrap;}
.title {color: slategrey; font-family: helvetica; font-size: 3.5rem; text-align: center; line-height: 6rem; width: 100%;}
.subTitle {color:slategrey; font-family: helvetica; font-size: 2rem; line-height: 3rem;text-align: center;}
h1, h2, h3 {color: slategrey; font-family: helvetica; font-weight: normal;}
label {color: slategrey; font-family: helvetica; width: 100%; display: inline-block;}
input {text-align: center;}

p {color: slategrey; font-family: helvetica;}
form {width: 100%; display: flex; flex-wrap: wrap; justify-content: center;}

.formRow{width: calc(75% - 40px);margin: 10px;}

.page {width: 100%; max-width: 1000px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; min-height: 80vh; margin-bottom: 4rem;}

nav {position: fixed; bottom: 0; width: 100%; background: slategrey; box-shadow: 0 0 3px 3px ghostwhite; padding: 5px; display: flex; justify-content: center;}
.navbar {width: 100%; max-width: 1000px; display: flex; align-items: center; justify-content: space-between;}
.navbarLeft {display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap;}
.navbarCenter {display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
.navbarRight {display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;}

.menuButton { display: none;background: slategrey; border-radius: 10px; transition-duration: 0.2s; transition-property: background-color; box-shadow: 0px 10px 8px -8px slategrey; text-align: center; text-decoration: none; padding: 10px; cursor: pointer;}
.menuButton h1 {color: ghostwhite; margin: 0;}
.menuButton:hover {background-color: #607080;}

.smallBottomMargin {margin-bottom: 10px;}


.container {width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.column-container {width: 100%; display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center;}

.card {background: slategrey; border-radius: 10px; transition-duration: 0.2s; box-shadow: 0px 10px 8px -8px slategrey; text-align: center; text-decoration: none; width: 25vw; min-height: 20vh;}
.card h1 {color: ghostwhite;}
.card p {color: ghostwhite;}
.card label {color: ghostwhite;}
.card img {width: 100%; border-radius: 8px;}

.bigButton {background: slategrey; border-radius: 10px; transition-duration: 0.2s; transition-property: transform, background-color; box-shadow: 0px 10px 8px -8px slategrey; text-align: center; text-decoration: none; width: 25vw; min-height: 20vh;}
.bigButton h1 {color: ghostwhite;}
.bigButton p {color: ghostwhite;}
.bigButton img {width: 100%; border-radius: 8px; align-self: flex-start;}
.bigButton:hover {transform: scale(0.98); background-color: #607080;}

.smallButton {background: slategrey; border-radius: 10px; transition-duration: 0.2s; transition-property: background-color; box-shadow: 0px 10px 8px -8px slategrey; text-align: center; text-decoration: none; padding: 10px;}
.smallButton h1 {color: ghostwhite; margin: 0;}
.smallButton p {color: ghostwhite; margin: 0;}
.smallButton:hover {background-color: #607080;}
.active {background-color: #607080;}

input[type=text]{padding: 5px;border: none;border-radius: 3px; width: 100%; box-sizing: border-box;}
input[type=email]{padding: 5px;border: none;border-radius: 3px; width: 100%;}
input[type=password]{padding: 5px;border: none;border-radius: 3px; width: 100%;}
.card input[type=submit] {background: ghostwhite; border-radius: 10px; transition-duration: 0.2s; transition-property: transform; text-align: center; text-decoration: none; padding: 10px; border: none; color: slategrey; margin: 0; font-size: 1rem;}
input[type=submit] {background: slategrey; border-radius: 10px; transition-duration: 0.2s; transition-property: background-color; text-align: center; text-decoration: none; padding: 10px; border: none; color: ghostwhite; margin: 0; font-size: 1.5rem;}
.card input[type=submit]:hover {transform: scale(0.97);}
input[type=submit]:hover {background: #506070;}
.card input[type=submit][disabled] {background: silver;}
.card input[type=submit][disabled] {transform: scale(1);}

.rightHalf {box-shadow: -10px 0 8px -10px #506070;}

.fullWidth {width: calc(100% - 40px); margin: 10px; padding: 10px;}
.threeQuarterWidth {width: calc(75% - 40px); margin: 10px; padding: 10px;}
.twoColumns {width: calc(calc(100% / 2) - 40px); margin: 10px; padding: 10px;}
.twoColumnsIntoOne {width: calc(calc(100% / 2) - 40px); margin: 10px; padding: 10px;}
.threeColumns {width: calc(calc(100% / 3) - 40px); margin: 10px; padding: 10px;}
.fourColumns {width: calc(calc(100% / 4) - 40px); margin: 10px; padding: 10px;}
/*Responsivity*/
@media (max-width: 900px) {
  .threeQuarterWidth {width: calc(100% - 40px);}
  .twoColumns {width: calc(calc(100% / 2) - 40px);}
  .twoColumnsIntoOne {width: calc(100% - 40px);}
  .threeColumns {width: calc(calc(100% / 2) - 40px);}
  .fourColumns {width: calc(calc(100% / 2) - 40px);}
  .navbar {justify-content: center;flex-wrap: wrap;}
  .navbarCenter { width: 100%; box-shadow: 0px 10px 8px -10px #304050;}
  .navbarRight {width: 100%;}
  .menuButton {display: block;}
  .navbar a {display: none; width: 100%;}
  .rightHalf {box-shadow: 0 -10px 8px -10px #506070;}
}
@media (max-width: 400px) {
  .twoColumns {width: calc(100% - 40px);}
  .threeColumns {width: calc(100% - 40px);}
  .fourColumns {width: calc(100% - 40px);}
}