body {
   background-color: #FEFDFA;
}

.home {
   margin: 1.8rem 2rem 0 0;
   float: right;
   color: #888;
   text-decoration: none;
   font-weight: 700;
   font-size: 1.5rem;
   font-family: monospace;
}

.content {
   font-family: "Ubuntu Mono", monospace;
   line-height: 1.7rem;
   transition: .2s;
}

.article {
   margin: 2rem auto 4rem auto;
   padding: 0 2rem;
   max-width: 700px;
}

.article h2 {
   color: #888;
}

.article p {
   margin-bottom: .4rem;
   text-indent: 1rem;
   line-height: 1.5em;
   font-size: 1.1rem;
   font-family: serif;
   transition: .2s;
}

.article img {
   max-width: 700px;
}

@media (max-width: 700px) {
  .article img {
    max-width: 100vw; /* For screens less than 700px wide */
  }
}

.tempAlert {
   position: fixed;
   bottom: -10rem;
   right: .5rem;
   transition: .2s;
   opacity: 0;
   background-color: #222;
   color: #eee;
   font-family: monospace;
   font-size: 1.2rem;
   padding: 1rem 2rem;
   border-radius: 2rem;
}

@media (prefers-color-scheme: dark) {
   body {
      background-color: #232326;
      color: #ddd;
   }
   .tempAlert {
      background-color: #FEFDFA;
      color: #222;
   }
}

@media only screen and (min-width: 400px) {
   .content { padding: 0 0.1rem; }
   .article { padding: 0 1rem; }
}

@media only screen and (min-width: 600px) {
   .content { padding: 0 2rem; }
}

@media only screen and (min-width: 900px) {
   .content { padding: 0 6rem; }
}