@font-face {
    font-family: "Segoe UI";
    src: url('PixelOperator.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
  margin: 0;
}

body {
  background:rgba(255,255,255,0.19);
  background-image:url("bg-angel.png");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
    margin: 0;
    color: #444;
  font-size:0.9em;
  font-family:"Segoe UI",sans-serif;
  line-height:1.6em;
  opacity:0.9;
  filter:sepia(0) saturate(1.9);
    image-rendering:pixelated;
    animation-name: fade; 
    animation-duration: 1s;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: #aaa;
    text-decoration: none;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
}

a:hover {
    color: #444;
}

.section {
    height: 85vh;
    overflow: auto;
    padding-top: 50px;
    -webkit-filter:drop-shadow(5px 5px 5px #222);
  filter:drop-shadow(5px 5px 5px #222);
}

.section .window {
    width: 80%; 
    margin: 0 auto;
    max-width: 900px; 
    height: auto; 
}

.section table {
    width: 100%; 
}

table {
    width: 100%;
    counter-reset: monthly;
    border-radius: 0px;
    border-collapse: collapse;
    background: #ffff;
    box-shadow: none;
    border: none;
}

table, td, th {
    border: 1px solid #eee;
}

.section table tr:first-child {
    height: 35px; 
    position: relative;
}

th {
    text-align: left;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgb(138,129,103);
    text-shadow: rgb(228, 228, 228) 1px 1px 0px;
    background: #ffff;
    width: calc(100% / 7);
    vertical-align: middle;
    height: auto;
    padding: 5px 10px;
}

tr {
    height: 120px; 
    position: relative;
}


td {
    vertical-align: top;
    padding: 10px 9px 10px 10px;
    height: auto;
    overflow: hidden; 
    position: relative; 
}

td:before {
    counter-increment: monthly;
    content: counter(monthly, decimal-leading-zero);
    display: block;
    background: #f8f8f8;
    font-size:0.9em;
    font-family:"Segoe UI",sans-serif;
    width: 14px;
    height: 14px;
    padding: 2px 3px 5px 6px;
    border-radius: 2px;
    border: 0px solid #eee;
    margin-bottom: 5px;
}

td.gray:before {
    counter-increment: none;
    display: none;
}

td i {
    position: absolute;
    top: 35px;
    left: 10px;
    right: 9px;
    height: 75px;
    overflow-y: auto;
    white-space: normal !important; 
    word-wrap: break-word; 
    overflow-x: hidden;
    margin: 0; 
    display: block; 
    width: auto; 
    font-style: normal; 
}

td i img {
    display: block;
    max-width: 95%;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 5px; 
}

#month-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px 0;
    z-index: 1000;
    text-align: center;
    background: rgba(138,129,103, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(85, 86, 108, 0.3);
}

#month-display {
    color: rgb(146,141,127);
    text-shadow: #444 1px 1px 0px;
    display: inline-block;
    margin: 0 20px;
    vertical-align: middle;
}

td i::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

td i::-webkit-scrollbar-track {
    background: transparent;
    border: none;
}

td i::-webkit-scrollbar-thumb:vertical {
    background-color: #ECE9D8; 
    border: 0.5px solid #7D7D7D; 
    border-radius: 0;
    box-shadow: 1px 1px 0 #FFFFFF inset; 
    background: 
        url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC") no-repeat 50%, 
        linear-gradient(to right, #ECE9D8 45%, #FFFFFF 45%, #F7F5EE);
}

td i::-webkit-scrollbar-thumb:vertical:hover {
    background: 
        url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e2qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC") no-repeat 50%, 
        linear-gradient(to right, #DFDDD6 45%, #FFFFFF 45%); 
        border-color: #4C4C4C; 
}

@keyframes flicker {
  0% {
  opacity:0.27861;
}
5% {
  opacity:0.34769;
}
10% {
  opacity:0.23604;
}
15% {
  opacity:0.90626;
}
20% {
  opacity:0.18128;
}
25% {
  opacity:0.83891;
}
30% {
  opacity:0.65583;
}
35% {
  opacity:0.67807;
}
40% {
  opacity:0.26559;
}
45% {
  opacity:0.84693;
}
50% {
  opacity:0.96019;
}
55% {
  opacity:0.08594;
}
60% {
  opacity:0.20313;
}
65% {
  opacity:0.71988;
}
70% {
  opacity:0.53455;
}
75% {
  opacity:0.37288;
}
80% {
  opacity:0.71428;
}
85% {
  opacity:0.70419;
}
90% {
  opacity:0.7003;
}
95% {
  opacity:0.36108;
}
100% {
  opacity:0.24387;
}
}.crt::after {
  content:" ";
  display:block;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:rgba(18,16,16,0.1);
  opacity:0;
  z-index:2;
  pointer-events:none;
  animation:flicker 0.15s infinite;
}
.crt::before {
  content:" ";
  display:block;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:linear-gradient(rgba(18,16,16,0) 50%,rgba(0,0,0,0.25) 50%),linear-gradient(90deg,rgba(255,0,0,0.06),rgba(0,255,0,0.02),rgba(0,0,255,0.06));
  opacity:0.3;
  z-index:2;
  background-size:100% 2px,3px 100%;
  pointer-events:none;
}
.crt {
  animation:none 1.6s infinite;
}