/* =========================================================
   BASE: page shell, typography and small utility classes
   Effect: defines the general DinoMail background, content
   width, fixed-header offset and reusable text utilities.
   ========================================================= */

body, html {
   width: 100%;
   min-height: 100vh;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   flex-direction: column;
   font-size: 16px;
   margin: 0;
   padding: 0;
   color: #444444;
   font-family: 'Roboto', Arial, sans-serif;
   background-color: rgba(200, 100, 0, 0.2);
}

* {
   box-sizing: border-box;
}

main {
   width: 100%;
   min-height: 60vh;
   color: #444444;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
   padding: 7.2rem 0 0 0;
}

main .content {
   top: 0;
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: stretch;
   align-items: stretch;
   min-height: 50vh;
   width: 100%;
   max-width: 100rem;
}

/* Account strip shown after login */
main #AccountData {
   top: 0;
   position: relative;
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   column-gap: 0.7rem;
   width: 90%;
}

/* Text size helpers */
.smallest {
   font-size: 0.7rem;
}

.smaller {
   font-size: 0.8rem;
}

.small {
   font-size: 0.9rem;
}

.normal {
   font-size: 1.0rem;
}

.more {
   font-size: 1.4rem;
}

.great,
h4 {
   font-size: 1.6rem;
}

.greater,
h3 {
   font-size: 1.8rem;
}

.greatest,
h2 {
   font-size: 2.0rem;
}

.huge,
h1 {
   font-size: 2.8rem;
}

@media (max-width: 1100px) {
   .more {
      font-size: 1.2rem;
   }

   .great,
   h4 {
      font-size: 1.4rem;
   }

   .greater,
   h3 {
      font-size: 1.6rem;
   }

   .greatest,
   h2 {
      font-size: 1.8rem;
   }

   .huge,
   h1 {
      font-size: 2.2rem;
   }
}

@media (min-width: 1900px) {
   .huge,
   h1 {
      font-size: 3.0rem;
   }
}

@media (min-width: 2400px) {
   .more {
      font-size: 1.8rem;
   }

   .great,
   h4 {
      font-size: 2.0rem;
   }

   .greater,
   h3 {
      font-size: 2.2rem;
   }

   .greatest,
   h2 {
      font-size: 2.4rem;
   }

   .huge,
   h1 {
      font-size: 4.0rem;
   }
}

/* Small utility classes still used in product and internal pages */
.nowrap {
   white-space: nowrap;
}

.center {
   text-align: center;
}

.colorred {
   color: #cf4444;
}

.ColorRed {
   color: #cc2222;
}

.vbottom {
   vertical-align: bottom;
}

.vmiddle {
   vertical-align: middle;
}

.text-shadow {
   text-shadow: 3px 3px 4px #777777;
}

.letter-spacing05 {
   letter-spacing: 0.05em;
}

.letter-spacing10 {
   letter-spacing: 0.10em;
}

.letter-spacing15 {
   letter-spacing: 0.15em;
}

.letter-spacing20 {
   letter-spacing: 0.20em;
}

.letter-spacing25 {
   letter-spacing: 0.25em;
}

.letter-spacing30 {
   letter-spacing: 0.30em;
}

.letter-spacing35 {
   letter-spacing: 0.35em;
}

.letter-spacing40 {
   letter-spacing: 0.40em;
}

.letter-spacing45 {
   letter-spacing: 0.45em;
}

.lineheigh20 {
   line-height: 20px;
}

.lineheigh25 {
   line-height: 25px;
}

.lineheigh30 {
   line-height: 30px;
}

.lineheigh35 {
   line-height: 35px;
}

.lineheigh40 {
   line-height: 40px;
}

.lineheigh45 {
   line-height: 45px;
}

.lineheigh50 {
   line-height: 50px;
}

.lineheigh55 {
   line-height: 55px;
}

.lineheigh60 {
   line-height: 60px;
}

.lineheigh65 {
   line-height: 65px;
}

.lineheigh70 {
   line-height: 70px;
}

.lineheigh75 {
   line-height: 75px;
}

.lineheigh80 {
   line-height: 80px;
}

.lineheigh85 {
   line-height: 85px;
}

.lineheigh90 {
   line-height: 90px;
}

.lineheigh95 {
   line-height: 95px;
}