@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700&display=swap');

:root {
 --colorOffWhite: rgba(237, 237, 237, 1);
 --colorPrimary: rgba(59,58,58,1);
 --colorPrimaryFaded: rgba(59,58,58,0.4);
 --colorSecondary: rgba(73, 196, 158, 1);
 --colorSecondaryDark: rgba(59,58,58,0.6);
 --colorText: rgba(59,58,58,0.85);


  --colorAccentFade: rgba(73, 196, 158, 0.12);
}

html {background-color: var(--colorOffWhite); font-family: 'Source Sans Pro', sans-serif;}
body {margin: 0px; font-size: 15px; color: var(--colorText); text-align: center;}
header {margin: 0px; padding: 10px 100px 5px 20px; height: 40px; width: 100%; background-color: var(--colorOffWhite); position: fixed; top: 0px; left: 0px; z-index: 400;}
 header > ul {margin: 0px; padding: 0px; list-style: none; text-align: right;}
 header > ul > li {display: inline-block; float: right;}
footer {margin: 50px 0px 0px 0px; padding: 0px 30px 30px 30px; height: 20px; font-size: 12px;}
 footer > span:first-child {float: left;} /* temp */
 footer > span:last-child {float: right;} /* temp */

#cardPay {margin: 120px auto 0px auto; width: 450px; padding: 30px; background-color: #ffffff; border-radius: 14px; box-shadow: 0px 6px 16px rgba(0,0,0,0.15);}
#home {margin: 2px 0px; padding: 0px; height: 36px; width: 36px; float: left;}
#homeID {margin-top: 120px; width: 450px;}
#page {margin: 0px; padding: 0px; position: relative;}

.buttonFilled {margin: 0px auto; padding: 8px 16px 8px 16px; border-radius: 16px; color: #ffffff; background-color: var(--colorSecondary); text-decoration: none;}
.cardBlank {margin: 0px auto; padding: 30px; background-color: #ffffff; border-radius: 14px; box-shadow: 0px 6px 16px rgba(0,0,0,0.15);}
.textfieldOutlined {margin:0px; padding: 0px; outline: none; height: 32px; color: var(--colorText); font-size: 14px; text-align: center; border: solid 1.5px var(--colorPrimaryFaded); border-radius: 4px; box-shadow: none;}
 .textfieldOutlined:focus {border: solid 2px var(--colorSecondary);}
.textHeading {font-size: 30px; font-weight: 900;}

@media only screen and (max-width: 600px) {
  /* Mobile Devices w/ Small Displays */
  footer {height: 36px; margin: 30px auto 20px auto;}
  footer > span:first-child {float: none; margin-bottom: 4px; display: block;} /* temp */
  footer > span:last-child {float: none;} /* temp */
  #cardPay {width: 75%;}
  #homeID {width: 75%;}
}