html {
  background-color:#5c0120;
  margin:0;
  padding:0;
  font-size: 1rem;
  line-height:1.5rem;
  position:relative;
  width: 100%;
  height: 100%;
  min-height: 10rem;
}

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  font-family: "Roboto Slab", "DroidSerif", Cambria, Georgia, "Times New Roman", Times, serif;
  font-style:normal;
  width:100%;
  height:100%;
  margin: 0;
  padding: 0;
  background-color: white;
  
  display: flex;
  flex-direction:row;
  align-items: stretch;
  flex-wrap: wrap;
}

#mobile-header{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background-color: #3c0000;
  color:white;
  vertical-align: middle;
  padding-left:1rem;
}

#mobile-header .site-title {
    font-size: 1.5rem;
    line-height:1.5rem;
    display:inline;
}

#mobile-header button, nav button{
  background-color: transparent;
  font-size: 2rem;
  color: yellow;
  border: none;
}

nav {
  color: white;
  flex: 1;
  background-color: #5c0120;
  z-index:50;
  min-width:14rem;
  flex-shrink: 0;
}

nav button /* The button to close the nav on mobile. */{
  margin:1rem;
}

.site-title{
  font-size: 1.5rem;
  line-height: 5rem;
  text-align:center;
  display:block;
  color: white;
  text-decoration:none;
}

.site-title img{
  width: 70%;
  margin: none;
  margin-top:0.5rem;
}

#main {
  position: relative;
  flex: 5;
  flex-shrink: 5;
  padding: 7rem 5rem;
  background-color: #DDD;
  z-index: 0;
  max-width: 100%;
}

#main * {
    max-width:100%;
}

#menu{
  list-style:none;
  padding:0;
  width: 12rem;
  position: relative;
  float: right;
  right: -2rem;
  line-height:4rem;
  margin-top:4rem;
  z-index:100;
}

#menu li{
  font-size: 2rem;
  border-radius: 2rem;
  text-align:right;
  display:block;
  height: 4rem;
  margin-bottom:0.6rem;
  color:white;
}

#menu li a {
  color: inherit;
  text-decoration: none;
  display:block;
}

#menu li:hover {
  background-color: white;
  color: #5c0120;
}

#menu i{
  line-height:3.86rem;
  width: 4rem;
  height: 4rem;
  float: right;
  border: 0.133rem solid #5c0120;
  border-radius:3rem;
  color: #5c0120;
  background-color:white;
  vertical-align: middle;
  text-align: center;
  margin-left: 0.5rem;
  font-size: 3rem;
  transition: transform 1s;
}

#menu li:hover i{
  animation: spin 5s linear infinite;
  transition: transform 1s;
}


.page-title {
  color: #5c0120;
  background-color:white;
  box-shadow: 0 0.2rem 0.2rem #AAAAAA;
  position: absolute;
  left:0;
  right:0;
  top:0;
  font-size: 2rem;
  margin: 0;
  padding-left: 6rem;
  line-height: 5rem;
}



#main article{
  background-color:white;
  padding: 2rem;
}

#main article *{
    max-width: calc(100% - 2rem);
}

#main a {
    color: #5c0120;
}

.postdate{
  color: grey;
}

#footer {
  width: 100%;
  background-color: #4b0009;
  color: white;
  text-align:center;
  padding: 0.5rem;
}

/* Utility classes */
.fw {
  width: 100%;
}

.round{
  border-radius: 50%;
}

.fr {
  float: right;
}

@keyframes spin {
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}


@media (min-width:75rem){
  .mobile-only{
    display:none !important;
  }
}

@media (max-width:74rem){
  nav{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    transform:translate(-120%, 0);
    transition:transform 0.5s;
  }
  
  nav.open{
    transform: translate(0, 0);
    transition: transform 0.5s;
  }
  
  #main {
    padding: 6rem 0rem;
    margin-top:2.5rem;
  }
  
  #main article {
      padding: 0.5rem;
  }
  
  #main article *{
      max-width: calc(100% - 1rem);
  }
  
  .page-title{
    padding-left: 1rem;
  }
  
  nav .site-title{
    display:none;
  }
}