@import url('https://fonts.googleapis.com/css2?family=Kantumruy+Pro:ital,wght@0,100..700;1,100..700&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');

body {
  margin: 0;
  padding: 0;
  font-family: 'Source Serif 4', Calibri, Garamond, Times New Roman, serif;
  background-color: #fefcfb;
  color: #54575d;
}

/* General Styles */

a {
  text-decoration: underline;
  font-weight: 700;
}

img {
  border: 0;
  width: 100%;
  height: auto;
  display: block;
}

table {
  border-collapse: collapse !important;
}

div, img, table, form, input, textarea{
  box-sizing: border-box;
}

.wrapper {
  width: 100%;
}

.input{
  outline: none;
  background-image:none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: block;
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid #54575d;
  background: #fefcfb;
  color: #54575d ;
  font-family: 'Kantumruy Pro', 'Open Sans', Roboto, Helvetica, Arial, sans-serif;
  font-size: 22px;
  line-height: 32px;
}

.button{
  outline: none;
  background-image:none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: block;
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid #fefcfb;
  background: #54575d;
  color: #fefcfb;
  font-family: 'Kantumruy Pro', 'Open Sans', Roboto, Helvetica, Arial, sans-serif;
  font-size: 22px;
  line-height: 32px;
  cursor: pointer;
}

.button:hover {
  border: 1px solid #fefcfb;
  background: #fefcfb;
  color: #54575d;
}

/* Content Styles */

.content p {
  font-family: 'Kantumruy Pro', 'Open Sans', Roboto, Helvetica, Arial, sans-serif;
  font-size: 22px;
  line-height: 32px;
  margin-bottom: 24px;
  color: #54575d;
  }
.content p a {
  font-family: 'Kantumruy Pro', 'Open Sans', Roboto, Helvetica, Arial, sans-serif;
  color: #66917e;
  }
.content h2 {
  font-family: 'Kantumruy Pro', 'Open Sans', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 26px;
  display: block;
  margin: 0 0 16px 0;
  color: #54575d;
}

/* Landing page */

.home {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  align-items: stretch;
}

.home .left{
  background: #54575d;
  padding: 64px;
  color: #fefcfb;
  font-family: 'Kantumruy Pro', 'Open Sans', Roboto, Helvetica, Arial, sans-serif;
  align-content: center;
}

.home .left .intro{
  margin: auto;
  max-width: 720px;
}

.home .left h3{
  display: block;
  width: 100%;
  font-family: 'Source Serif 4', Garamond, Times New Roman, serif;
  font-weight: 600;
  font-style: italic;
  font-size: 26px;
  line-height: 26px;
  border-bottom: 1px solid #fefcfb;
  padding: 32px 0px;
  margin: 32px auto;
}

.home .left h2{
  font-weight: 300;
  font-size: 32px;
  line-height: 42px;
  display: block;
}

.home .left h4{
  font-weight: 300;
  font-size: 24px;
  line-height: 26px;
  display: block;
  margin-top: 64px;
  margin-bottom: 12px;
}

.home .left .inputs{
  display: flex;
  justify-content: stretch;
  width: 100%;
}
.home .left .inputs .input{
  border-radius: 4px 0 0 4px;
  border-right: 0;
  border-color: #fefcfb;
  width: 100%;
}
.home .left .inputs .button{
  border-radius: 0 4px 4px 0;
  border-left: 0;
}

.home .left .whatsapp{
  font-weight: 300;
  font-size: 24px;
  line-height: 26px;
  display: block;
  margin-top: 32px;
  height: auto;
  color: #e0d8cf;
}

.home .left .archive-link{
  font-family: 'Kantumruy Pro', 'Open Sans', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  display: block;
  margin-top: 32px;
  color: #e0d8cf;
}


.home .left .credits{
  font-family: 'Kantumruy Pro', 'Open Sans', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  display: block;
  margin-top: 64px;
  color: #e0d8cf;
}

.home .left .logo{
  width: 100%;
  height: auto;
}
    
.home .right {
  padding: 64px;
  align-content: center;
  height: 100vh;
  overflow-y: scroll;
}

#post {
  font-family: 'Kantumruy Pro', 'Open Sans', Roboto, Helvetica, Arial, sans-serif;
  max-width: 720px;
}

#post #header-wrapper #header-date p{
  font-weight: 100;
  font-size: 22px;
}

#post #header-wrapper h2 {
  display: none;
}

#post #header-wrapper #header-brand{
  display: none;
}

#post {
  width: 100%;
  max-width: 720px;
  margin: auto;
  padding: 32px;
}

#post p {
  font-family: 'Source Serif 4', Garamond, Times New Roman, serif;
  font-size: 22px;
  line-height: 32px;
  margin-bottom: 24px;
  color: #54575d;
}

#post p a {
  text-transform: uppercase;
  font-family: 'Kantumruy Pro', 'Open Sans', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: #337149;
}
    
#post h2 {
  font-family: 'Kantumruy Pro', 'Open Sans', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 18px;
  line-height: 26px;
  display: block;
  margin: auto;
  border-bottom: 1px solid #54575d;
  padding: 8px 0px;
  color: #54575d;
}
      
#post h3 {
  font-family: 'Source Serif 4', Garamond, Times New Roman, serif;
  font-weight: 300;
  font-style: italic;
  font-size: 42px;
  margin-bottom: 24px;
  color: #54575d;
}
      
#post h4 {
  font-family: 'Source Serif 4', Garamond, Times New Roman, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 26px;
  margin-bottom: 24px;
  color: #54575d;
}


/* End home */

.wrapper .message {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  flex-wrap: wrap;
  padding: 32px;
  gap: 64px;
}

.wrapper .message .content .button:hover {
  border: 1px solid #337149;
  background: #337149;
  color: #fefcfb ;
}

.wrapper .message .content{
  max-width: 640px;
  margin: auto;
  border: 1px solid #54575d;
  padding: 32px;
  box-shadow: 20px 20px 0 #54575d;
}

.wrapper .message .content span{
  font-family: 'Kantumruy Pro', 'Open Sans', Roboto, Helvetica, Arial, sans-serif;
  font-size: 22px;
  line-height: 32px;
}

.wrapper .message .content ul li{
  font-family: 'Kantumruy Pro', 'Open Sans', Roboto, Helvetica, Arial, sans-serif;
  font-size: 22px;
  line-height: 32px;
}

.wrapper .message .content .button-cloudron {
  background-color: hotpink;
  color: white;
  font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;
}


@media screen and (max-width: 820px) {
  .home {
    grid-template-columns: 1fr;
    grid-template-rows: min-content max-content;
  }
  .home .right {
    height: auto;
    overflow: inherit;
  }
}

@media screen and (max-width: 640px) {
  .home .right, .home .left{
    padding: 64px 32px;
  }
}

@media screen and (max-width: 480px) {
  .home .right, .home .left{
    padding: 32px 16px;
  }
}

@media screen and (max-width: 720px) {
  .wrapper .message {
    flex-direction: column;
  }
  #post {
    padding: 32px 16px;
  }
}

/* Archive */

.archive {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  align-items: stretch;
}

.archive .left{
  background: #54575d;
  padding: 64px;
  color: #fefcfb;
  font-family: 'Kantumruy Pro', 'Open Sans', Roboto, Helvetica, Arial, sans-serif;
  align-content: center;
}

.archive .left .intro{
  margin: auto;
  max-width: 720px;
}

.archive .left h3{
  display: block;
  width: 100%;
  font-family: 'Source Serif 4', Garamond, Times New Roman, serif;
  font-weight: 600;
  font-style: italic;
  font-size: 26px;
  line-height: 26px;
  border-bottom: 1px solid #fefcfb;
  padding: 32px 0px;
  margin: 32px auto;
}

.archive .left h2{
  font-weight: 300;
  font-size: 32px;
  line-height: 42px;
  display: block;
}

.archive .left h4{
  font-weight: 300;
  font-size: 24px;
  line-height: 26px;
  display: block;
  margin-top: 64px;
  margin-bottom: 12px;
}

.archive .left .inputs{
  display: flex;
  justify-content: stretch;
  width: 100%;
}
.archive .left .inputs .input{
  border-radius: 4px 0 0 4px;
  border-right: 0;
  border-color: #fefcfb;
  width: 100%;
}
.archive .left .inputs .button{
  border-radius: 0 4px 4px 0;
  border-left: 0;
}

.archive .left .whatsapp{
  font-weight: 300;
  font-size: 24px;
  line-height: 26px;
  display: block;
  margin-top: 32px;
  height: auto;
  color: #e0d8cf;
}

.archive .left .credits{
  font-family: 'Kantumruy Pro', 'Open Sans', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  display: block;
  margin-top: 64px;
  color: #e0d8cf;
}

.archive .left .logo{
  width: 100%;
  height: auto;
}
    
.archive .right {
  padding: 64px;
  align-content: center;
  height: 100vh;
  overflow-y: scroll;
}

.archive .right .back{
  font-weight: 600;
  font-size: 16px;
  font-family: 'Source Serif 4', Garamond, Times New Roman, serif;
  margin-bottom: 8px;
}

.archive .right h2{
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 600;
  font-size: 32px;
  font-family: 'Source Serif 4', Garamond, Times New Roman, serif;
  margin-bottom: 64px;
}

.archive .right h2 img{
  width: 16px;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
}


.archive .right .editions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.archive .right .editions .edition{
  display: flex;
  gap: 8px;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'Kantumruy Pro', 'Open Sans', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 22px;
}

.archive .right .editions .edition .thumb img{
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0; 
}

.archive .right .editions .edition a{
  text-decoration: none;
}