/* ==========================================================================
   common Styles
   ========================================================================== */
   html, body {
     height: 100%;
     width: 100%;
     margin: 0;
     padding: 0;
   }
   .title {
     width: 100%;
     text-align: left;
     margin-bottom: 30px;
     background-color: var(--stone-0);
     border-radius:6px;
     padding: 12px 70px;
     color: var(--teal-9);
   }
   h2{
     margin: 0;
     padding: 15px 70px;
     color: var(--stone-0);
     font-weight: 100;
   }
   .header {
     display: flex;
     width: 100%;
     height: 60px;
     background-color: var(--stone-9);
   }
   .header-item:first-child{
     margin-right: auto;
   }
   .header-item:last-child{
     padding: 15px;
     margin-left: auto;
   }
   .header-item h2{
     color: var(--stone-0);
   }
   .header-item a{
     color: var(--stone-0);
     text-decoration: none;
   }
   .header-item a:hover{
     color: var(--stone-0);
   }
   .container{
     margin: 0 auto;
     position: relative;
   }
   .error-message {
     margin-top: 10px;
     text-align: center;
     color: var(--red-7);
     font-size: 15px;
   }
  .footer {
    width: 100%;
    background-color: var(--stone-9);
    position: absolute;
    text-align: center;
    font-size: 10pt;
    color:var(--stone-0);
    bottom: 0;
  }
  @media screen and (max-width:60em) {
    .header {
      height: auto;
    }
    .header a{
      font-size: 14px;
    }
    .title {
      font-size: 20px;
      text-align: center;
      margin: 0;
      padding: 10px 0;
    }
    h2 {
      text-align: left;
      font-size: 16px;
      padding: 10px;
    }
    .error-message {
      font-size: 12px;
    }
    .footer p {
      font-size: 8px;
    }
  }