@import url('https://fonts.googleapis.com/css?family=Cinzel|Slabo+27px');

body {
  background-color: #D4E5EB;
  font-family: tahoma, arial, helvetica, sans-serif;
  margin:1em;
}

h1, h2, h3, h4, h5, h6 {
 font-family: tahoma, arial, helvetica, sans-serif;
}

.header > h1:hover {
  cursor:pointer;
}

.modal{
}

.drawn_card {
  height:auto;
  width:auto;
  display:block;
  margin-left:auto;
  margin-right:auto;
  border-radius:15px;
  margin:auto;
}

.drawn_card:hover {
  cursor:pointer;
}

#upright_meaning_div {
  margin-top:1em;
}
.header {
  grid-area:header;
}

.new_reading_button {
  grid-area:reading_button;
}

.card_of_the_day {
  grid-area:card_of_the_day;
}

.footer {
  grid-area:footer;
}

.quote {
  grid-area:quote;
}
.desbox{
padding: 20px;
    display: block;
    margin-top: 20px;
    clear: both;
    overflow: hidden;
    line-height: 1.5em;
    border: 1px solid #ccc;
  }
.desbox h2{font-size: 16px;font-weight:bold; margin-top: 10px}
.desbox h3{font-size: 14px;font-weight:bold;margin-top: 10px}
.wrapper {
  display:block;
  grid-gap:1em;
  grid-template-areas:
  "header"
  "quote"
  "reading_button"
  "card_of_the_day"
  "footer"
}

#footer {
  grid-area: footer;
  position:fixed;
  right: 0;
  bottom: 0;
  left: 0;
  margin-top:5em;
  padding:.5rem;
  text-align:center;
  background-color: #bfced3;
}

.header {
  
  grid-row: 1;
  text-align:center;
}

.quote {
  font-size: .5em;
  grid-row:2;
  text-align:center;
}

.new_reading_button {
  grid-row: 3;
  text-align:center;
}

blockquote p, footer {
  font-size: .5em !important;
}

.card_of_the_day {
grid-row-start:4;
}

.card_of_the_day h2 {
  text-align:center;
  font-size:100%;
}
.desbox h1 {
    font-size: 18px;
    font-weight: 700;
    margin-top: 10px;
}

/*
for media query
.wrapper {
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-areas:
  "header header header header"
  "reading_button reading_button"
  "card_of_the_day card_of_the_day card_of_the_day card_of_the_day"
  "footer footer footer footer"
}
*/