/* http://meyerweb.com/eric/tools/css/reset/  v2.0 | 20110126 License: none (public domain) */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,
form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin: 0;padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}
/* -------------------- */

/* ---------------------------------------------------------------------------*/
/*                           VARIABLE DEFINITIONS                             */
/* ---------------------------------------------------------------------------*/

:root {
/* Solid Values */
  --cosmos-darkest: #100E17;
  --cosmos-dark: #1E1926;
  --cosmos: #2E2936;
  --cosmos-bright: #7C7480;
  --mercury: #E8DFDA;
  --sulphur: #B28150;
  --salt: #33BBFF;
/* Gradients */
  --radial-surface: radial-gradient(ellipse at top, rgba(30,25,38,1) 0%, rgba(16,14,23,1) 100%);
  --linear-cards: linear-gradient(0deg, rgba(30,25,38,1) 0%, rgba(46,41,54,1) 100%);
}

/* ---------------------------------------------------------------------------*/
/*                                BASE STYLES                                 */
/* ---------------------------------------------------------------------------*/

* {
  box-sizing: border-box;
}

*:hover {
  transition: all 0.2s ease-out;
}

body {
  background-color: var(--cosmos-darkest);
  background: var(--radial-surface);
  background-repeat: no-repeat;
  color: var(--mercury);
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  line-height: 1.62;
  letter-spacing: .038rem;
}

#wrapper {
  display: flex;
  flex-direction: column;
  padding: 32px;
  min-height: 100vh;
}

h1, h2, h4, h5 {
  text-transform: uppercase;
  letter-spacing: .062rem;
}

h1 {
  font-weight: 900;
}

h3 {
  font-size: 1.62rem;
  font-weight: 900;
  letter-spacing: .062rem;
  margin-top: 1.38rem;
}

a {
  color: var(--sulphur);
  text-decoration: none;
}

a:hover {
  color: var(--salt);
  text-decoration: underline;
  text-shadow: 0px 0px 16px 4px var(--salt);
}

em {
  font-weight: 900;
}

header h1 {
  color: var(--cosmos-bright);
  text-align: center;
  font-size: 1.38rem;
  margin: 32px 0 64px;
}

.deck {
  display: flex;
  flex-flow: column wrap;
}

.aspect-col {
  display: flex;
  margin: 0 auto 32px;
  width: 100%;
  max-width: 480px;
}

.card {
  background: var(--linear-cards);
  border: 1px solid var(--cosmos-darkest);
  border-radius: 12px;
  margin: 0 auto 32px;
  padding: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.card h2 {
  font-weight: 900;
}

.card h4, .card h5 {
  color: var(--cosmos-bright);
  font-weight: 900;
  padding: 16px;
}

.card-details p {
  margin: 16px 0 0;
}

nav.brand-nav ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin-bottom: 1.62rem;
}

.brand-nav li {
  width: 50%;
}

.brand-nav a {
  display: block;
  height: 32px;
  font-size: 1.24rem;
  font-weight: 600;
  margin-top: 24px;
}

.brand-nav a:hover {
  transition: all 0.3s ease-out;
}

footer {
  color: var(--cosmos-bright);
  font-size: .62rem;
  font-weight: 600;
  margin-bottom: 64px;
  text-align: center;
}

footer h1 {
  display: none;
}

footer blockquote {
  text-transform: uppercase;
}

small {
  display: block;
  margin: 16px;
}

footer .triutum-glyph {
  display: block;
  margin: 16px auto;
}

footer .footer-nav {
  text-transform: uppercase;
}

.footer-nav li {
  float: left;
  margin-right: 32px;
}

footer .footer-nav a {
  color: var(--cosmos-bright);
}

footer .footer-nav a:hover {
  color: var(--salt);
}

/* ---------------------------------------------------------------------------*/
/*                            CONTENT BREAK ONE                               */
/* ---------------------------------------------------------------------------*/

@media (min-width: 800px) {
  h1 { color: var(--cosmos-bright); text-align: left; }
  header h1 { display: none; }
  .deck { display: flex; flex-flow: row nowrap; }
  .aspect-col { margin: 0 16px; width: 33.333%; max-width: none; }
  #planner {margin-left: 0;}
  #builder {margin-right: 0;}
  .card-details p { margin: 16px 0; }
  .brand-nav a { font-size: 1rem; margin-top: 24px; }
  .brand-nav a:before { width: 32px; height: 32px; margin-right: 12px; }
  footer {
    align-items: center;
    display: flex;
    justify-content: space-between;
    text-align: right;
    margin-top: auto;
    margin-bottom: 0; }
  footer .footer-nav {
    display: block;
    font-size: 1.24rem;
    text-align: left;
    min-width: 24%; }
  footer section { min-width: 24%; }
  blockquote, small { margin: 0; padding: 0; }
}

/* ---------------------------------------------------------------------------*/
/*                            CONTENT BREAK TWO                               */
/* ---------------------------------------------------------------------------*/

@media (min-width: 960px) {
  #wrapper { padding: 64px; }
  .aspect-col { margin: 0 32px; }
  footer { bottom: 32px; }
  footer h1 { font-size: 1.38; }
  #triutum-modal { padding: 64px; }
}

/* ---------------------------------------------------------------------------*/
/*                            CONTENT BREAK THREE                             */
/* ---------------------------------------------------------------------------*/

@media (min-width: 1440px) {
  body { max-width: 1600px; margin: 0 auto; }
  #wrapper { padding: 128px 128px 160px; }
  .aspect-col { margin: 0 32px; }
  footer { bottom: 128px; }
  #triutum-modal { padding: 128px; }
}

/* ---------------------------------------------------------------------------*/
/*                                HEIGHT BREAKS                               */
/* ---------------------------------------------------------------------------*/

@media (max-height: 800px) {
  footer {margin-top: 32px;}
}

@media (max-height: 870px) {
  footer {margin-top: 64px;}
}

@media (max-height: 1000px) {
  footer {margin-top: 96px;}
}