@font-face{
    font-family:  "04b";
    src:  url("https://itinerae.shop/fonts/04b03.ttf");
    font-display:  swap;
}
@font-face  {
    font-family:  "W95FA";
    src:  url("https://itinerae.shop/fonts/w95f.woff");
    font-display:  swap;
}
@font-face  {
    font-family:  "spirit";
    src:  url("https://itinerae.shop/fonts/spirit.ttf");
    font-display:  swap;
}
*  {
    box-sizing:  border-box;
}
html  {
    min-height:  100%;
}
body  {
    min-height:  100vh;
    margin:  0;
    padding:  58px 18px;
    background:  linear-gradient(rgba(255, 255, 255, .68),  rgba(255, 255, 255, .68)),  url("https://itinerae.shop/premium/demo/22/crossbg.webp"),  #eeeeee;
    background-blend-mode:  normal,  luminosity,  normal;
    color:  #747474;
    line-height:  1.3;
    letter-spacing:  1px;
    text-shadow:  0 1px 0 rgba(255, 255, 255, .78);
}
b  {
    color:  #5f5f5f;
}
i  {
    color:  #8f8f8f;
}
img  {
    max-width:  100%;
}
::selection  {
    color:  #555555;
    background:  #dddddd;
}
body  {
    font-family:  "W95FA",  Calibri,  Tahoma,  sans-serif;
    font-size:  10px;
}
.navigation,  b,  .list-title,  .credit-label,  .calendar,  .footer  {
    font-family:  "04b",  monospace;
    font-size:  9px;
}
b  {
    font-weight:  normal;
}
.signature-label,  .signature-mail  {
    font-family:  "04b",  monospace;
    font-size:  7px;
}
.miniblog-date  {
    font-family:  "04b",  monospace;
    font-size:  8px;
}
.box-title  {
    font-family:  "Kosugi Maru",  Calibri,  Arial,  sans-serif;
    font-size:  10px;
}
.site-name,  .signature-name,  .miniblog-title  {
    font-family:  "spirit",  monospace;
}
.site-name  {
    font-size:  23px;
}
.signature-name  {
    font-size:  14px;
}
.miniblog-title  {
    font-size:  12px;
}
i,  .site-subtitle,  .tiny-note,  .quote  {
    font-family:  Georgia,  serif;
    font-style:  italic;
}
i,  .tiny-note  {
    font-size:  10px;
}
.site-subtitle,  .quote  {
    font-size:  9px;
}
a,  a:visited,  a:active  {
    color:  #777777;
    text-decoration:  none;
}
a:hover  {
    color:  #4f4f4f;
}
.wrapper  {
    position:  relative;
    width:  min(900px,  100%);
    margin:  0 auto;
    padding:  12px;
    border:  7px solid transparent;
    border-image:  url("https://itinerae.shop/borders/borderi2.png") 7 / 7px / 0 round;
    border-radius:  4px;
    background:  rgba(255, 255, 255, .96);
    box-shadow:  0 8px 22px rgba(0, 0, 0, .07);
}
.wrapper::before  {
    content:  "";
    position:  absolute;
    inset:  3px;
    border:  1px dashed #cfcfcf;
    border-radius:  5px;
    pointer-events:  none;
}
.navigation  {
    display:  grid;
    grid-template-columns:  repeat(8,  1fr);
    gap:  6px;
    margin-bottom:  8px;
}
.navigation a  {
    min-width:  0;
    padding:  5px 4px 4px;
    border-top:  1px dashed #cccccc;
    border-right:  1px solid #d3d3d3;
    border-bottom:  1px dashed #c9c9c9;
    border-left:  1px solid #d3d3d3;
    border-radius:  4px;
    background:  rgba(255, 255, 255, .82);
    color:  #727272;
    font-weight:  bold;
    line-height:  1;
    text-align:  center;
    text-transform:  uppercase;
    letter-spacing:  1px;
}
.navigation a:hover  {
    color:  #4f4f4f;
    background:  #f6f6f6;
    border-color:  #bfbfbf;
}
.navigation a img:first-child  {
    margin-right:  2px;
}
.navigation-lace  {
    height:  11px;
    margin-bottom:  5px;
    background:  url("https://itinerae.shop/premium/demo/22/whitebowborder.png") repeat-x left top;
    filter:  grayscale(100%);
    opacity:  0.65;
}
.site-window  {
    height:  438px;
    display:  grid;
    grid-template-columns:  188px minmax(0,  1fr) 188px;
    overflow:  hidden;
    border:  1px solid #c9c9c9;
    border-radius:  4px;
    background:  #f7f7f7;
    box-shadow:  inset 0 0 0 1px rgba(255, 255, 255, .82);
}
.scroll-column  {
    min-width:  0;
    min-height:  0;
    height:  100%;
    display:  flex;
    flex-direction:  column;
    gap:  14px;
    overflow-y:  scroll;
    overflow-x:  hidden;
    padding:  8px 7px 8px 8px;
    background:  #ffffff;
    overscroll-behavior:  contain;
}
.scroll-column + .scroll-column  {
    border-left:  1px solid #d5d5d5;
}
.scroll-column::-webkit-scrollbar  {
    width:  6px;
    height:  10px;
}
.scroll-column::-webkit-scrollbar-track  {
    background:  #f5f5f5;
}
.scroll-column::-webkit-scrollbar-thumb  {
    border:  1px solid #b7b7b7;
    border-radius:  999px;
    background:  linear-gradient( to right,  #eeeeee,  #d1d1d1 );
}
.scroll-column::-webkit-scrollbar-thumb:hover  {
    background:  linear-gradient( to right,  #e8e8e8,  #c8c8c8 );
}
.scroll-column::-webkit-scrollbar-corner  {
    display:  none;
}
::-webkit-scrollbar  {
    width:  8px;
    height:  8px;
}
::-webkit-scrollbar-track  {
    background:  #f5f5f5;
    border-left:  1px solid #e1e1e1;
}
::-webkit-scrollbar-thumb  {
    border:  2px solid #f5f5f5;
    border-radius:  999px;
    background:  linear-gradient( to right,  #eeeeee,  #c9c9c9,  #eeeeee );
}
::-webkit-scrollbar-thumb:hover  {
    background:  linear-gradient( to right,  #e4e4e4,  #bdbdbd,  #e4e4e4 );
}
::-webkit-scrollbar-corner  {
    background:  #f5f5f5;
}
.box  {
    position:  relative;
    margin:  0;
    padding:  6px;
    border:  1px dashed #cfcfcf;
    border-radius:  4px;
    background:  rgba(255, 255, 255, .96);
    box-shadow:  0 0 0 2px #ffffff,  0 0 0 3px #dedede;
}
.box::before  {
    content:  "";
    position:  absolute;
    top:  -8px;
    left:  50%;
    width:  11px;
    height:  11px;
    transform:  translateX(-50%);
    background:  url("https://itinerae.shop/premium/demo/22/tinyflower.webp") center / contain no-repeat;
    opacity:  0.55;
    filter:  grayscale(100%);
    pointer-events:  none;
    z-index:  2;
}
.box-title  {
    display:  block;
    margin:  0 0 6px;
    padding:  4px;
    background:  linear-gradient( 90deg,  transparent,  #ebebeb 20%,  #ebebeb 80%,  transparent );
    color:  #666666;
    line-height:  1.1;
    text-align:  center;
    text-transform:  uppercase;
    letter-spacing:  3px;
}
.box-title .name  {
    display:  block;
    min-width:  0;
}
.box-body  {
    padding:  0;
}
.site-header-box  {
    padding:  0;
    border:  1px dashed #d6d6d6;
    background:  #ffffff;
    box-shadow:  none;
}
.site-header-box::before  {
    display:  none;
}
.site-header  {
    min-height:  102px;
    padding:  12px 6px;
    display:  flex;
    align-items:  center;
    justify-content:  center;
    overflow:  hidden;
    text-align:  center;
    background:  linear-gradient(rgba(255, 255, 255, .30),  rgba(238, 238, 238, .30)),  url("https://itinerae.shop/premium/demo/22/swanbanner.jpg") center / cover;
    filter:  grayscale(100%);
}
.site-header > div  {
    min-width:  170px;
    padding:  9px 14px 7px;
    border:  1px dashed rgba(200, 200, 200, .9);
    border-radius:  4px;
    background:  rgba(250, 250, 250, .84);
    box-shadow:  0 0 0 3px rgba(255, 255, 255, .42),  inset 0 1px 0 rgba(255, 255, 255, .95);
}
.site-name  {
    display:  flex;
    align-items:  center;
    justify-content:  center;
    gap:  7px;
    color:  #505050;
    font-weight:  normal;
    line-height:  .9;
    letter-spacing:  2px;
    text-transform:  lowercase;
    text-shadow:  0 1px 0 #ffffff;
}
.site-subtitle  {
    margin-top:  6px;
    display:  flex;
    align-items:  center;
    justify-content:  center;
    gap:  7px;
    color:  #777777;
    line-height:  1;
    text-transform:  lowercase;
    letter-spacing:  2px;
    text-shadow:  0 1px 0 #ffffff;
}
.site-subtitle::before,  .site-subtitle::after  {
    content:  "";
    width:  20px;
    height:  1px;
    border-top:  1px dotted #bdbdbd;
    opacity:  0.85;
}
.tiny-note  {
    margin-top:  6px;
    padding:  6px;
    border-left:  3px solid #bcbcbc;
    border-radius:  4px;
    background:  linear-gradient(to right,  #f2f2f2,  #fafafa);
    line-height:  1.4;
}
.intro-image  {
    float:  right;
    width:  80px;
    margin:  5px;
    filter:  grayscale(100%);
    opacity:  0.60;
}
.signature  {
    margin-top:  9px;
    padding:  5px 2px 1px;
    display:  flex;
    align-items:  center;
    justify-content:  flex-end;
    flex-wrap:  wrap;
    gap:  5px 7px;
    border-top:  1px dotted #d7d7d7;
}
.signature-label  {
    color:  #aaaaaa;
    line-height:  1;
    text-transform:  uppercase;
    letter-spacing:  1px;
}
.signature-name-wrap  {
    display:  inline-flex;
    align-items:  center;
    gap:  5px;
}
.signature-name  {
    color:  #626262;
    line-height:  1;
    letter-spacing:  1px;
    text-transform:  lowercase;
    text-shadow:  0 1px 0 #ffffff;
}
.signature-divider  {
    width:  1px;
    height:  13px;
    background:  #d5d5d5;
}
.signature-mail  {
    padding:  3px 6px;
    display:  inline-flex;
    align-items:  center;
    gap:  4px;
    border:  1px dashed #d2d2d2;
    border-radius:  999px;
    background:  rgba(250, 250, 250, .8);
    color:  #888888;
    line-height:  1;
    text-transform:  uppercase;
    letter-spacing:  1px;
}
.signature-mail img  {
    display:  block;
    width:  auto;
    max-height:  10px;
    filter:  grayscale(100%);
    opacity:  0.55;
}
.signature-mail:hover  {
    color:  #555555;
    border-color:  #bbbbbb;
    background:  #ffffff;
}
.quote  {
    padding:  6px;
    border-top:  1px dotted #d7d7d7;
    border-bottom:  1px dotted #d7d7d7;
    border-radius:  4px;
    background:  linear-gradient( to bottom,  rgba(255, 255, 255, .80),  rgba(238, 238, 238, .48) );
    color:  #777777;
    line-height:  1.4;
}
.update  {
    padding:  6px 0;
    border-bottom:  1px dotted #e4e4e4;
}
.update:last-child  {
    border-bottom:  0;
}
.update i img  {
    filter:  grayscale(100%);
    opacity:  0.5;
}
.profile-body::after  {
    content:  "";
    display:  block;
    clear:  both;
}
.profile-image  {
    float:  left;
    width:  54px;
    height:  54px;
    margin:  1px 8px 5px 0;
    padding:  2px;
    object-fit:  cover;
    border:  1px dashed #cfcfcf;
    border-radius:  4px;
    background:  #f5f5f5;
    filter:  grayscale(100%) opacity(0.80);
}
.mini-list  {
    margin:  0;
    padding:  0;
    list-style:  none;
}
.mini-list li  {
    padding:  6px 0;
    border-bottom:  1px dotted #e4e4e4;
}
.mini-list li:first-child  {
    padding-top:  0;
}
.mini-list li:last-child  {
    padding-bottom:  0;
    border-bottom:  0;
}
.mini-list img  {
    margin-right:  5px;
    filter:  grayscale(100%);
    opacity:  0.5;
}
.list-grid  {
    display:  grid;
    grid-template-columns:  repeat(3,  minmax(0,  1fr));
    gap:  6px;
}
.list-box  {
    padding:  6px;
    border:  1px solid #dddddd;
    border-radius:  4px;
    background:  linear-gradient(145deg,  #ffffff 0%,  #f7f7f7 100%);
}
.list-title  {
    margin-bottom:  6px;
    border-bottom:  1px dashed #cccccc;
    color:  #888;
    font-weight:  bold;
    text-align:  center;
    letter-spacing:  2px;
}
.list-grid .mini-list li  {
    padding:  4px 0;
}
.adopted-gallery  {
    display:  grid;
    grid-template-columns:  repeat(4,  34px);
    justify-content:  center;
    gap:  4px;
}
.adopted-gallery a  {
    width:  34px;
    height:  34px;
    display:  flex;
    align-items:  center;
    justify-content:  center;
    border:  1px dotted #d8d8d8;
    border-radius:  4px;
    background:  #fafafa;
}
.adopted-gallery img  {
    display:  block;
    width:  auto;
    height:  auto;
    max-width:  30px;
    max-height:  30px;
    filter:  grayscale(100%);
}
.credits-list  {
    border-top:  1px dotted #dddddd;
}
.credit-row  {
    display:  grid;
    grid-template-columns:  54px minmax(0,  1fr);
    gap:  6px;
    padding:  5px 1px;
    border-bottom:  1px dotted #dddddd;
}
.credit-label  {
    color:  #666666;
    text-transform:  uppercase;
}
.credit-links  {
    min-width:  0;
    text-align:  right;
}
.credit-links a  {
    display:  inline-block;
}
.credit-links a + a  {
    margin-left:  5px;
}
.miniblog-feed  {
    display:  flex;
    flex-direction:  column;
    gap:  9px;
}
.miniblog-entry  {
    display:  grid;
    grid-template-columns:  34px minmax(0,  1fr);
    gap:  6px;
    align-items:  start;
}
.miniblog-icon  {
    display:  block;
    width:  34px;
    height:  34px;
    margin-top:  5px;
    object-fit:  contain;
    image-rendering:  pixelated;
    filter:  grayscale(100%);
    opacity:  0.70;
    border: 1px dashed #ccc;
    padding: 3px;
}
.miniblog-content  {
    min-width:  0;
}
.miniblog-bubble  {
    padding:  6px 8px 7px;
    border:  1px solid #d7d7d7;
    border-radius:  11px 11px 11px 4px;
    background:  linear-gradient( to bottom,  rgba(255, 255, 255, .99),  rgba(245, 245, 245, .94) );
    box-shadow:  inset 0 1px 0 rgba(255, 255, 255, .96),  0 1px 2px rgba(0, 0, 0, .025);
}
.miniblog-title-row  {
    margin:  0 0 5px;
    padding:  0 0 4px;
    display:  flex;
    align-items:  center;
    flex-wrap:  wrap;
    gap:  4px 7px;
    border-bottom:  1px dotted #dddddd;
    line-height:  1;
}
.miniblog-title  {
    color:  #606060;
    line-height:  1;
    letter-spacing:  1px;
    text-transform:  lowercase;
}
.miniblog-date  {
    padding-left:  7px;
    border-left:  1px solid #d5d5d5;
    color:  #999999;
    line-height:  1;
    letter-spacing:  1px;
    text-transform:  uppercase;
}
.miniblog-text  {
    line-height:  1.4;
}
.button-wall  {
    display:  grid;
    grid-template-columns:  repeat(auto-fit,  88px);
    justify-content:  center;
    gap:  5px;
}
.button-wall a,  .button-wall img  {
    display:  block;
    width:  88px;
    height:  31px;
}
.button-wall img  {
    object-fit:  cover;
    filter:  grayscale(100%) opacity(0.6);
}
.button-wall a:hover img  {
    opacity:  1;
}
.calendar  {
    width:  130px;
    max-width:  100%;
    margin:  0 auto;
}
.calendar-nav  {
    display:  grid;
    grid-template-columns:  28px minmax(0,  1fr) 28px;
    align-items:  center;
    gap:  2px;
    margin-bottom:  3px;
}
.calendar-nav button  {
    min-width:  0;
    padding:  2px 1px;
    border:  0;
    background:  #ffffff;
    color:  #858585;
    font:  inherit;
    line-height:  1;
    text-transform:  uppercase;
    letter-spacing:  0;
    cursor:  pointer;
}
.calendar-nav button:hover  {
    color:  #555555;
}
.calendar-month  {
    overflow:  hidden;
    color:  #666666;
    line-height:  1;
    text-align:  center;
    text-transform:  uppercase;
    letter-spacing:  1px;
    white-space:  nowrap;
}
.calendar-weekdays,  .calendar-days  {
    display:  grid;
    grid-template-columns:  repeat(7,  1fr);
    gap:  1px;
}
.calendar-weekdays  {
    margin-bottom:  1px;
}
.calendar-weekdays span  {
    padding:  1px 0;
    color:  #999999;
    line-height:  1;
    text-align:  center;
    text-transform:  uppercase;
}
.calendar-day  {
    min-height:  14px;
    padding:  2px 0 1px;
    border:  1px solid transparent;
    color:  #777777;
    line-height:  1;
    text-align:  center;
}
.calendar-day.is-empty  {
    opacity:  0;
}
.calendar-day.is-today  {
    border-color:  #ffffff;
    background:  #eeeeee;
    color:  #555555;
    font-weight:  bold;
}
.my-button-box  {
    text-align:  center;
}
.my-button-image  {
    filter:  grayscale(100%);
    opacity:  0.7;
}
.small-image  {
    display:  block;
    width:  100%;
    margin-bottom:  6px;
    padding:  6px;
    object-fit:  cover;
    border:  1px dashed #d2d2d2;
    border-radius:  4px;
    background:  #f8f8f8;
    filter:  grayscale(100%) brightness(1.01) opacity(0.8);
}
.footer  {
    margin-top:  7px;
    padding:  2px 4px;
    display:  grid;
    grid-template-columns:  1fr auto 1fr;
    align-items:  center;
    border-top:  1px dashed #cccccc;
    border-bottom:  1px dashed #cccccc;
    background:  linear-gradient(to bottom,  rgba(255, 255, 255, .98),  rgba(239, 239, 239, .94));
    color:  #858585;
    text-transform:  uppercase;
    letter-spacing:  1px;
}
.footer-part  {
    min-width:  0;
    min-height:  22px;
    padding:  3px 7px;
    display:  flex;
    align-items:  center;
}
.footer-part:first-child  {
    justify-content:  flex-start;
}
.footer-part:first-child a  {
    margin-left:  5px;
}
.footer-part:nth-child(2)  {
    justify-content:  center;
    min-width:  100px;
    margin:  0 6px;
    border-left:  1px dotted #c9c9c9;
    border-right:  1px dotted #c9c9c9;
    color:  #707070;
}
.footer-part:nth-child(2) img  {
    width:  auto;
    max-height:  13px;
    margin-right:  5px;
    filter:  grayscale(100%);
    opacity:  0.65;
}
.footer-part:last-child  {
    justify-content:  flex-end;
    text-align:  right;
}
#visitor-clock  {
    min-width:  54px;
    display:  inline-block;
    color:  #686868;
    letter-spacing:  1px;
}
@media (max-width: 720px)  {
    body  {
    padding:  32px 18px;
}
.wrapper  {
    width:  min(560px,  100%);
    padding:  10px;
}
.navigation  {
    grid-template-columns:  repeat(3,  1fr);
}
.site-window  {
    height:  auto;
    grid-template-columns:  1fr;
}
.scroll-column  {
    height:  330px;
    border-left:  0;
    border-bottom:  1px solid #d7d7d7;
}
.main-column  {
    grid-row:  1;
    height:  470px;
}
.left-column  {
    grid-row:  2;
}
.right-column  {
    grid-row:  3;
    border-bottom:  0;
}
.calendar  {
    width:  min(300px,  100%);
    font-size:  10px;
}
.calendar-nav  {
    grid-template-columns:  34px minmax(0,  1fr) 34px;
    gap:  5px;
    margin-bottom:  7px;
}
.calendar-nav button  {
    min-height:  28px;
}
.calendar-weekdays,  .calendar-days  {
    gap:  3px;
}
.calendar-weekdays  {
    margin-bottom:  3px;
}
.calendar-weekdays span  {
    padding:  4px 0;
}
.calendar-day  {
    min-height:  28px;
    display:  flex;
    align-items:  center;
    justify-content:  center;
    padding:  4px 1px;
    border-radius:  3px;
}
.footer-part:nth-child(2)  {
    min-width:  60px;
}
}
@media (max-width: 520px)  {
    .footer  {
    grid-template-columns:  1fr;
    gap:  0;
    padding:  2px 3px;
}
.footer-part,  .footer-part:first-child,  .footer-part:nth-child(2),  .footer-part:last-child  {
    justify-content:  center;
    margin:  0;
    border-left:  0;
    border-right:  0;
    text-align:  center;
}
}
@media (max-width: 430px)  {
    body  {
    padding:  24px 16px;
}
.wrapper  {
    width:  100%;
    padding:  8px;
}
.navigation  {
    grid-template-columns:  repeat(2,  1fr);
}
.navigation a  {
    padding:  5px 3px 4px;
}
.list-grid  {
    grid-template-columns:  1fr;
}
.signature  {
    flex-wrap:  wrap;
    gap:  5px 7px;
}
.miniblog-feed  {
    gap:  9px;
}
.miniblog-entry  {
    grid-template-columns:  27px minmax(0,  1fr);
    gap:  6px;
}
.miniblog-icon  {
    width:  25px;
    height:  25px;
    margin-top:  14px;
}
.miniblog-title-row  {
    margin-left:  2px;
    gap:  4px;
}
}