:root {
  --max-width: 21cm; /* Change if you don't want A4 page size on screen */
}

html {
  font-size: 16px !important; /* Default LaTeX font size is 10pt, but 12pt is more readable */
}

a[href^="#item-"] {
  vertical-align: super;
  font-size: 0.8em;
  line-height: 0;
  text-decoration: none;
}

.latex-body {
  footer {
    margin-top: 0;
  }
}

#latex-background {
  padding-top: 2cm;
  padding-bottom: 2cm;
  display: flex;
  flex-flow: column;
  width: 100%;
  align-items: center;
  background: grey;
}

#latex-container {
  width: 100%;
  max-width: var(--max-width);
  background: #fafafa;
  box-shadow:0px 5px 8px #606060;
  -webkit-box-shadow:0px 5px 8px #606060;
  -moz-box-shadow:0px 5px 8px #606060;
  -khtml-box-shadow:0px 5px 8px #606060;
}

#latex-contents {
  width: 100%;
  height: 70vh;
  resize: none;
  border: none;
  padding: 1cm;
  opacity: 0;
  animation: fadeIn 0.001s linear 0.5s forwards;
}

#rendered {
  width: 100%;
  display: none;
  padding: 2.54cm; /* LaTeX standard */
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  word-break: break-word !important; 
}

@keyframes fadeIn {
  to { opacity: 1; }
}

@media (max-width: 21cm) {
  html {
    font-size: 15px !important;
  }
  
  #rendered {
    padding: 2.54cm 12%;
  }
}

@media print { /* Print the article without the page's header and footer */
    body * {
        visibility: hidden;
    }
 
    #latex-container * {
        visibility: visible;
    }
 
    #latex-container {
        position: absolute;
        background: white;
        left: 0;
        top: 0;
        margin: 0;
    }
    
    #rendered {
      padding: 0;
    }
 
    @page {
        margin: 2.54cm;
        size: auto;
    }
}