@font-face {
 font-family: Inter;
 src: url('inter.woff2');
}

@keyframes buttonIn {
 from { left: -4rem; }
 to   { left:  0rem; }
}

@keyframes buttonOut {
 from { left:  0rem; }
 to   { left: -4rem; }
}

@keyframes maskIn {
 from { opacity: 0.00; }
 to   { opacity: 0.75; }
}

@keyframes maskOut {
 from { opacity: 0.75; }
 to   { opacity: 0.00; }
}

@keyframes sidebarIn {
 from { left: -20rem; }
 to   { left:   1rem; }
}

@keyframes sidebarOut {
 from { left:   1rem; }
 to   { left: -20rem; }
}

a {
 background-color: transparent;
 color: inherit;
 font-weight: bold;
 text-decoration: none;
}

a:hover {
 text-decoration: underline;
}

body {
 background-color: #fff9e6;
 color: #800000;
 font-family: Inter, sans-serif;
 font-size: 0rem;
 margin: 0rem;
 user-select: none;
}

h1 { font-size: 4.00rem; font-weight: normal; line-height: 1.0; margin: 0.0rem 0rem 0rem 0rem; padding: 0.5rem 0rem 1.5rem 0rem; text-align: center; letter-spacing: -0.2rem; }
h2 { font-size: 2.00rem; font-weight: normal; line-height: 1.0; margin: 0.0rem 0rem 0rem 0rem; padding: 1.5rem 0rem 1.5rem 0rem; text-align:   left; letter-spacing: -0.1rem; }
h3 { font-size: 0.75rem; font-weight: normal; line-height: 1.0; margin: 0.0rem 0rem 0rem 0rem; padding: 0.5rem 0rem 1.5rem 0rem; text-align: center; }
h4 { font-size: 0.75rem; font-weight: normal; line-height: 1.0; margin: 0.5rem 0rem 0rem 0rem; padding: 1.0rem 0rem 0.5rem 0rem; text-align: center; border-top: 1px dotted #800000;}
p  { font-size: 1.00rem; font-weight: normal; line-height: 1.5; margin: 0.0rem 0rem 0rem 0rem; padding: 0.5rem 0rem 0.5rem 0rem; text-align:   left; }

img {
 margin: 1.5rem 0rem 0.5rem 0rem;
 max-width: 75%;
}

noscript {
 background-color: #fff9e6;
 color: #800000;
 font-size: 1rem;
 height: calc(100vh - 2rem);
 line-height: 1;
 padding: 1rem;
 position: fixed;
  left: 0rem;
  top: 0rem;
 width: calc(100vw - 2rem);
 z-index: 99;
}

#main {
 height: calc(100vh - 1rem);
 overflow-x: hidden;
 overflow-y: auto;
 padding-bottom: 0.5rem;
 padding-top: 0.5rem;
 position: fixed;
  left: 0rem;
  top: 0rem;
 text-align: center;
 user-select: text;
 z-index: 0;
}

#sidebar {
 height: calc(100vh - 2rem);
 position: fixed;
  top: 1rem;
 width: 20rem;
 z-index: 2;
}

#sidebar.in {
 animation: sidebarIn 100ms 1 forwards;
}

#sidebar.out {
 animation: sidebarOut 100ms 1 forwards;
}

#sidebar-button {
 background-color: #800000;
 border-radius: 0rem 1rem 1rem 0rem;
 color: #fff9e6;
 cursor: pointer;
 font-size: 5rem;
 height: 5rem;
 line-height: 4.3rem;
 position: fixed;
  top: calc(50vh - 2.5rem);
 text-align: center;
 width: 5rem;
 z-index: 2;
}

#sidebar-button.in {
 animation: buttonIn 100ms 1 forwards;
}

#sidebar-button.out {
 animation: buttonOut 100ms 1 forwards;
}

#sidebar-footer {
 background-color: #800000;
 border-radius: 0rem 1rem 1rem 1rem;
 color: #fff9e6;
 height: 4rem;
 padding: 1rem;
 position: absolute;
  bottom: 0rem;
  left: 0rem;
 width: 18rem;
 z-index: 1;
}

#sidebar-footer div {
 font-size: 0.75rem;
 height: 1rem;
 line-height: 1rem;
 text-align: center;
 width: 18rem;
}

#sidebar-logo {
 background-color: #800000;
 background-image: url('logo.png');
 background-size: 100% 100%;
 border-radius: 1rem 1rem 1rem 0rem;
 color: #fff9e6;
 height: 5rem;
 padding: 1rem;
 position: absolute;
  left: 0rem;
  top: 0rem;
 width: 18rem;
 z-index: 1;
}

#sidebar-mask {
 background-color: #1a0000;
 color: #fff9e6;
 height: 100vh;
 opacity: 0;
 position: fixed;
  left: 0rem;
  top: 0rem;
 width: 100vw;
 z-index: 1;
}

#sidebar-mask.in {
 animation: maskIn 100ms 1 forwards;
}

#sidebar-mask.out {
 animation: maskOut 100ms 1 forwards;
}

#sidebar-nav {
 background-color: #800000;
 color: #fff9e6;
 direction: rtl;
 height: calc(100vh - 15rem);
 overflow-x: hidden;
 overflow-y: auto;
 padding: 1rem 0rem 1rem 0rem;
 position: absolute;
  left: 0rem;
  top: 6rem;
 scrollbar-color: #fff9e6 #800000;
 scrollbar-width: thin;
 width: 20rem;
 z-index: 0;
}

#sidebar-nav div {
 border-radius: 1rem;
 font-size: 1rem;
 height: 3rem;
 line-height: 3rem;
 padding: 0rem 1rem 0rem 1rem;
 text-align: left;
 text-transform: uppercase;
 width: 16rem;
}

#sidebar-nav div.active {
 background-color: #fff9e6;
 color: #800000;
 font-weight: bold;
 position: relative;
}

#sidebar-nav div.active span {
 background-image: url('active-right.png');
 background-size: 100% 100%;
 display: block;
 height: 5rem;
 position: absolute;
  left: 17rem;
  top: -1rem;
 width: 2rem;
}

#sidebar-nav div.inactive {
 cursor: pointer;
 margin-right: 1rem;
}

#sidebar-nav div.inactive:hover {
 background-color: #fff9e6;
 color: #800000;
}