main.css

   1 .container {
   2     width: 920px;
   3     margin: 0 auto;
   4 }
   5
   6 #confirmation {
   7   width: 500px;
   8 }
   9
  10 #confirmation > div {
  11   margin-top: 20px;
  12 }
  13
  14 #square-logo {
  15     height: 32px;
  16     width: 32px;
  17     background: url("https://cdn.glitch.com/4c9bc573-ca4c-48de-8afe-501eddad0b79%2Fsquare-logo.svg?1521834224783") center center no-repeat;
  18     margin: 0 auto;
  19     padding-top: 25px;
  20 }
  21
  22 .header {
  23   text-align: center;
  24   margin-top: 0;
  25 }
  26
  27 .form-container {
  28   margin: 0 auto;
  29   width: 320px;
  30   display: flex;
  31   flex-direction: column;
  32 }
  33
  34 .form-container {
  35   margin: 0 auto;
  36   width: 320px;
  37   display: flex;
  38   flex-direction: column;
  39 }
  40
  41 .item-line {
  42   display: flex;
  43 }
  44
  45 .item-label {
  46   flex-grow: 1;
  47 }
  48
  49 .item-amount {
  50   font-weight: bold;
  51 }
  52
  53 .total-line {
  54   font-weight: bold;
  55   margin: 5px 0 5px 0;
  56   padding-top: 5px;
  57   border-top: 1px solid #c2c7cc;
  58 }
  59
  60 body {
  61   background-color: #ececec;
  62   font-family: Helvetica, Arial, sans-serif;
  63 }
  64
  65
  66 form {
  67   width:100%;
  68   margin-top: 25px;
  69 }
  70
  71 input {
  72   border: 1px solid #E0E2E3;
  73   border-radius: 4px;
  74   outline-offset: -2px;
  75   display: inline-block;
  76   font-size: 18px;
  77   font-family: "HelveticaNeue";
  78   padding: 15px;
  79   color: #373F4A;
  80 }
  81
  82 button {
  83   background: #0EB00E;
  84   box-shadow: 0 0 2px 0 rgba(0,0,0,0.10), 0 2px 2px 0 rgba(0,0,0,0.10);
  85   border-radius: 4px;
  86   cursor:pointer;
  87   font-size: 16px;
  88   color: #FFFFFF;
  89   letter-spacing: 0;
  90   text-align: center;
  91   line-height: 24px;
  92   padding: 15px;
  93   margin-top: 10px;
  94   outline: none;
  95   font-family: "HelveticaNeue-Bold", Helvetica, Arial, sans-serif;
  96 }