:root {
--font: #506994;
--outline: #e1e6f0;
--border: #b0bcd4;
--boxshadow: rgba(77, 91, 128, 0.4);
--bg: white;
}
html {
cursor: url("../img/cursor/curs.png"), auto;
}
a,
a:hover,
a:active {
cursor: url("../img/cursor/pointer.png"), pointer !important;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "MS UI Gothic", "Times New Roman", Times, serif;
color: var(--font);
font-size: 12px;
background:
url(../writings/img/mayura.png) right top / 500px auto no-repeat,
#fff url(../writings/img/blog.jpg) 0 0 repeat-x;
line-height:16px;
text-underline-offset: 1px;
}
.container {
display: flex;
flex-direction: column;
max-width: 810px;
margin: 0 auto;
background: transparent;
}
header {
position: relative;
padding: 80px;
background: transparent;
background-image: url(../writings/img/header.png);
background-size: cover;
background-position: center;
text-align: center;
font-weight: bold;
border: 1px solid var(--border);
border-top:none;
border-bottom: 1px solid var(--border);
box-shadow:
-2px 0 2px -2px var(--boxshadow),
2px 0 2px -2px var(--boxshadow); 
}
.main {
display: flex;
flex: 1;
box-shadow: 0 0 4px var(--boxshadow);
}
.sidebar {
display: flex;
flex-direction: column;
width: 195px;
padding: 10px;
padding-top: 11px;
flex-shrink: 0;
border-left: 1px solid var(--border);
background: linear-gradient(to bottom, #fff 0px, #fff 370px, #dae0e6 750px), #dae0e6;
border-bottom: 1px solid var(--border);
}
.sidebar about {
padding: 14px;
height: 123px;
overflow: hidden;
margin-bottom: 13px;
border: 1px solid var(--border);
outline: 1px solid var(--outline);
outline-offset: -4px;
background-color: var(--bg);
}
.sidebar calendartop {
padding: 10px;
height: 150px;
overflow: hidden;
margin-bottom: 16px;
border: 1px solid var(--border);
outline: 1px solid var(--outline);
outline-offset: -4px;
background-color: var(--bg);
border-bottom: none;
border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;
}
.photo {
height: 127px;
width: 152px;
filter: opacity(1);
border: 1px solid var(--border);
outline: 1px solid rgba(255, 255, 255, 0.7);
outline-offset: -2px;
background-image: url(../writings/img/photo.png);
background-size: cover;
background-position: right;
}
.content {
flex: 1;
padding: 10px;
padding-top: 11px;
border-left: none;
overflow: visible;
border-right: 1px solid var(--border);
border-left: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: linear-gradient(to bottom, #fff 0px, #fff 370px, #dae0e6 750px), #dae0e6;
min-height:880px;
max-width: 615px;
}
.mayura {
position: fixed;
right: 100px;
bottom: 0;
height: 600px;
z-index: 99999;
}
.blog-list {
width: 100%;
max-width: 630px;
display: flex;
flex-direction: column;
gap: 12px;
}
.post-card {
padding: 15px;
padding-right: 18px;
font-size: 12px;
border: 1px solid var(--border);
outline: 1px solid var(--outline);
outline-offset: -4px;
position: relative;
background-color: var(--bg);
}
.post-card h2 {
margin: 5px 0px;
font-family: Times;
}
.post-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.title {
font-family: Times;
font-size: 17px;
font-style:italic;
margin: 0;
color: transparent;
font-weight:bold;
background-clip: text;
background-image: linear-gradient(#bdc7db, #003187);
background-color:black;
padding: 3px 0px;
margin-top:-2px;
user-select: none;
}
.title:hover {
color: rgba(21, 29, 59,0.2);
}
.title:active {
color: rgba(21, 29, 59,0.4);
}
.date {
font-size: 13px;
font-family: Times;
color: #adbddb;
text-align:right;
font-style: italic;
user-select: none;
}
.excerpt {
line-height: 16px;
font-size: 12px;
font-family: "MS UI Gothic", "Times New Roman", Times, serif;
}
@media (max-width: 700px) {
.main {
flex-direction: column;
}
.mayura {
display: none;
}
.sidebar {
display:none;
}
}.post-body {
display: flex;
align-items: flex-start;
gap: 12px;
}
.post-body img {
margin-left: auto;
height: 50px;
margin-top: -22px;
border: 1px solid var(--border);
outline: 1px solid var(--border);
outline-offset: 1px;
user-select:none;
pointer-events: none;
}
.post-header {
margin-bottom: 6px;
}
.writings {
font-family:Times New Roman;
font-size:48px;
position:absolute;
background-clip: text;
color:transparent;
background-image: linear-gradient(#d1d9e8, #003187);
top:85px;
margin-left:20px;
line-height:1.4;
font-style:italic;
user-select: none;
}
.writings:hover {
background-image: linear-gradient(#94acda, #163c80);
text-decoration: none;
}
.writings:active {
background-image: linear-gradient(#163c80, #0c3276);
}
.wsmall {
font-family: Times New Roman;
font-size: 14px;
position: absolute;
color: #2f5699;
top: 130px;
margin-left: 623px;
padding: 7px;
line-height: 1.4;
font-style: italic;
text-shadow:
-1px -1px 0 white,
0px -1px 0 white,
1px -1px 0 white,
-1px  0px 0 white,
1px  0px 0 white,
-1px  1px 0 white,
0px  1px 0 white,
1px  1px 0 white;
user-select:none;
pointer-events: none;
}
::selection {
background: #e6f0ff;
color: inherit;
}
a {
color: #2f5699; 
text-decoration: underline dotted #91abd9;
}
a:hover {
color: #163c80;
text-decoration: underline dotted #91abd9;
}
a:active {
color: #0c3276;
}
.post-link,
.post-link:hover,
.post-link:visited,
.post-link:active {
text-decoration: none;
}
a:hover {
}.post-header a {
display: flex;
justify-content: space-between;
align-items: center;
}.post-header {
display: flex;
margin-bottom: 6px;
}
.post-meta {
display: flex;
align-items: baseline;
justify-content: space-between;
width: 100%;
padding-right: 65px;
}.post-body {
display: flex;
align-items: flex-start;
gap: 16px;
}
.post-body img {
margin-left: auto;
height: 50px;
margin-top: -22px;
}
.picture {
display: block;
margin: 15px auto;
max-width: 100%;
height: auto;
border: 1px solid #b0bcd4;
outline: 1px solid #b0bcd4;
outline-offset: 1px;
margin-bottom:15px;
}
#s-m-t-tooltip{
z-index: 10;
margin: 24px 14px 7px 12px;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(1px);
color: #fff;
background: linear-gradient(
  180deg,
  rgba(150, 170, 210, 0.8) 0%,
  rgba(80, 95, 160, 0.8) 100%
);
font-size: 12px;
font-family: "MS UI Gothic", "Times New Roman", Times, serif;
padding: 8px 8px;
white-space: normal;
max-width: 280px;
word-wrap: break-word;
outline: 1px solid var(--outline);
outline-offset: -1px;
line-height:14px;
box-shadow:
0 0 0 1px var(--border),   
1px 1px 0 #000;
border: 1px solid white;
}
.hiddentext {
text-decoration: underline dotted #91abd9 !important;
}
.nav {
display:flex;
justify-content:space-between;
align-items:center;
margin:0px 7px;
margin-top:13px;
color: var(--border);
user-select:none;
}
.home {
margin:7px 7px;
user-select:none;
}