@import url('page-layout.css');
@import url('media-type.css');
@import url('fonts.css');
@import url('settings.css');

body {
    font-family: Arial, sans-serif;
    background: #fff;
    margin: 0;
}

/***********************************************/
/* page */
/***********************************************/

.page {
    margin: 0;
    padding: 0;
}

.page-content {
    width: var(--page-width);
    height: var(--page-height);
    padding: var(--page-border-top) var(--page-border-right) var(--page-border-bottom) var(--page-border-left);
    box-sizing: border-box;
    overflow: hidden;
    break-before: page;
    page-break-before: always; /* for older browsers */
}

.page-content:first-child {
    break-before: auto;
    page-break-before: auto; /* for older browsers */
}

/***********************************************/
/* month */
/***********************************************/

.month {
    height: var(--month-height);
    font-family: Font1, serif;
    font-weight: normal;
    color: #000000;
    position: relative;
    border: 0 solid var(--color-flavored-1);
    border-left-width: 0.5mm;
    border-right-width: 0.5mm;
    border-radius: calc(var(--month-height) / 2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(
        circle at center,
        var(--color-flavored-3) 0%,
        var(--color-flavored-1) 100%
    );
}

.month div.name {
    font-size: 190%;
    position: relative;
    width: 40%;
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 1%;
    border-radius: 10%;
    background: radial-gradient(
        circle at center,
        #ffffffee 15%,
        transparent 100%
    );
}

.month img.symbol {
    position: absolute;
    left: 16%;
    height: 165%;
}

.month div.year {
    font-size: 100%;
    position: absolute;
    right: 0.2%;
    height: calc(var(--month-height) - 1mm);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        #ffffff 15%,
        transparent 100%
    );
}

.month div.textured {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("/img/month/texture-dimond.svg");
    background-repeat: repeat;
    background-position: center;
}

.month.header{
    border-top-width: 0.5mm;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.month.footer{
    border-bottom-width: 0.5mm;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/***********************************************/
/* day */
/***********************************************/

.day {
    display: flex;
    position: relative;
    height: var(--day-row-calculated-height);
    box-sizing: border-box;
    border-width: 0.1mm 0 0 0;
    border-style: solid;
    border-image: linear-gradient(
        to right,
        #ffffff 0%,
        #888888 5%,
        #888888 95%,
        #ffffff 100%
    ) 1;
}

.day.workday {
    background: #ffffff;
}

.day.holiday {
    background: linear-gradient(
        to right,
        #ffffff 0%,
        var(--color-flavored-2) 25%,
        var(--color-flavored-2) 90%,
        #ffffff 100%
    );
}

.day.saturday {
    background: linear-gradient(
        to right,
        #ffffff 0%,
        var(--color-flavored-3) 25%,
        var(--color-flavored-3) 90%,
        #ffffff 100%
    );
}

.day.sunday {
    background: linear-gradient(
        to right,
        #ffffff 0%,
        var(--color-flavored-2) 25%,
        var(--color-flavored-2) 90%,
        #ffffff 100%
    );
}

/***********************************************/
/* sections */
/***********************************************/

.section {
    height: 100%;
}

.section.data-a,
.section.data-b {
    font-family: Font4, monospace;
    font-weight: bold;
}

.section.data-a {
    width: 8mm;
}

.section.data-b {
}

.section.main-a {
  display: flex;
  flex-wrap: nowrap;
  margin-left: 1.5mm
}

.section.main-b {
  margin-left: 2mm
}

.section.main-c {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
    flex-wrap: wrap;
    position: absolute;
    right: 0;
}

/***********************************************/
/* data */
/***********************************************/

.data-a .moon {
    position: relative;
    justify-content: center;
    height: 30%;
}
.data-a .week-number {
    position: relative;
    height: 30%;
    font-family: Font4, serif;
    font-size: 80%;
    font-weight: bold;
    display: flex;
    justify-content: center;
    z-index: 9;
    border-radius: 0.5mm;
    background: linear-gradient(
       180deg,
        var(--color-flavored-2),
        transparent
    );
    color: var(--color-flavored-1);
}

.data-a .week-number.placeholder {
    opacity: 0;
}

.data-a .day-name {
    text-align: center;
    height: 40%;
}

.data-b .day-number {
    position: relative;
    top: 0.4mm;
    --element-height: calc(var(--day-row-calculated-height) - 1mm);
    font-size: 220%;
    font-weight: bold;
    letter-spacing: -1.4mm;
    padding-right: 18%;
    height: var(--element-height);
    width: var(--element-height);
    max-width: calc(var(--element-height) - 18%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.1mm solid #bbbbbb;
    border-radius: 50%;
    background: #eeeeee;
}

.day.saturday .data-b .day-number {
    background:  var(--color-flavored-3);
}

.day.sunday .data-b .day-number,
.day.holiday .data-b .day-number {
    background:  var(--color-flavored-2);
}

/***********************************************/
/* entries */
/***********************************************/

.entries {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
    flex-wrap: wrap;
}

.entry {
    display: flex;
}

.entry span,
.entry img {
    position: relative;
    z-index: 9;
}

.entry.common {
    margin: 0.5% 1% 0.5% 0;
    white-space: nowrap;
    height: 45%;
    border-radius: 10px;
}

.entry.common.without-bg {
    background: transparent !important;
}


.entry.common img {
    position: relative;
    bottom: 35%;
    right: 1.5mm;
    height: 160%;
}

.entry span {
    font-family: Font2, serif;
    font-weight: 800;
    font-size: 100%;
    color: var(--color-flavored-1);
    position: relative;
        right: 2mm;
        bottom: 0.3mm;
}

.entry span.year-count {
    font-family: Font3, serif;
}

.entry.birthday {
    background: linear-gradient(
        to right,
        #ffffff,
        #fff800
    );
}

.entry.birthday span {
    color: #005500;
}

.entry.day-of-death {
    background: linear-gradient(
        to right,
        #ffffff,
        #aaaaaa
    );
}

.entry.day-of-death span {
    color: #333333;
}

.entry.day-of-death img {
    height: 120%;
    bottom: 20%;
}

.entry.name-day {
    background: linear-gradient(
        to right,
        #ffffff,
        #aaee88
    );
}

.entry.name-day span {
    color: #008800;
}

.entry.name-day img {
    bottom: 50%;
}

.entry.wedding-day {
    background: linear-gradient(
        to right,
        #ffffff,
        #ffcccc
    );
}

.entry.wedding-day span {
    color: #aa0000;
}

.entry.other {
    background: linear-gradient(
        to right,
        #ffffff,
        #ccccff
    );
}

.entry.other span {
    color: #5555b5;
}

.entry.other img {
    height: 120%;
    bottom: 20%;
    right: 3mm;
}

.entry.todo {
    position: relative;
    top: 1mm;
    background: none;
    z-index: 9;
}

.entry.todo span {
    font-weight: 300;
    font-size: 80%;
    color: #333333;
    left: 0.5mm;
}
.entry.todo img {
    height: 100%;
    bottom: 0;
    left: 0;
}

/***********************************************/

.entry.legal-holiday {
    position: relative;
    font-family: Font3, serif;
    color: var(--color-flavored-1);
}
.entry.legal-holiday .states {
    position: relative;
    left: 0.2mm;
    font-family: Font3, serif;
    font-size: 50%;
}

.entry.sbazv {
    position: relative;
    top: 2.5%;
    height: 100%;
}

.entry.sbazv img {
    position: relative;
    margin-right: -2.5mm;
    height: 98%;
}

.entry.moon img {
    height: 100%;
}

.entry.school {
    position: relative;
    left: 0.5mm;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 3mm;
    max-width: 3mm;
    height: 100%;
    border-left: 0.1mm solid var(--color-flavored-2);
    border-right: 0.1mm solid var(--color-flavored-2);
    background: linear-gradient(
        105deg,
        var(--color-flavored-2),
        #ffffff,
        var(--color-flavored-2),
        #ffffff,
        var(--color-flavored-2)
    );
}

.entry.school div {
    display: inline;
    font-family: Font4, monospace;
    font-size: 60%;
    font-weight: normal;
    color: var(--color-flavored-1);
    writing-mode: sideways-lr;
}

/***********************************************/

.additional {
    height: 100%;
    display: flex;
}

.additional .column {
    height: 100%;
    width: 9mm;
    border-left: 0.1mm dashed var(--color-flavored-1);
}

.additional .column span {
    font-family: Font4 bold;
    padding-left: 1mm;
    color: var(--color-flavored-1);
    opacity: 0.3;
}

.additional .column.column-1,
.additional .column.column-2 {
    width: 35mm;
    border: 0;
    border-left: 0.1mm dashed var(--color-flavored-1);
    background: linear-gradient(
        to right,
        #eeeeee,
        transparent,
        #eeeeee
    );
}

.additional .column.column-1 span,
.additional .column.column-2 span {
    font-family: Font3;
    color: #888888;
}

.additional .column.column-5 {
    border-right: 0.1mm dashed var(--color-flavored-1);
}


/***********************************************/