@font-face {
    font-family: 'Alef';
    src: url('/fonts/Alef-Regular.ttf'); /*URL to font*/
    font-display: swap;
}
/* color schemes */
/* dark */
:root {
  --out-gradient: #081829;
  --out-gradient2: black;

  --header-bg-color: #081829;
  --header-link-color: #ffa95e;
  --header-shadow-color: #935a0f;
  --header-shadow-hover-color: #f79226;

  --bg-color: #0f0f15;
  --border-color: #fecb87;

  --content-color: #e2d2bf;
  --code-content-color: #c8d0d5;
  --quote-color: #8bb5e8;

  --link-text-color: #f9f9f9;
  --link-color: #f79226;
  --link-hover-color: #ffcd56;

  --selection-front-color: #efe9ef;
  --selection-back-color: #223a58;
}

/* light */
[data-theme="light"] {
  --out-gradient: #2a2930;
  --out-gradient2: #46425e;

  --header-bg-color: #ffb0a3;

  --header-link-color: #46425e;
  --header-shadow-color: white;
  --header-shadow-hover-color: white;

  --bg-color: #fec;
  --border-color: #46425e;

  --code-content-color: #45488c;
  --content-color: #46425e;
  --quote-color: #15788c;

  --link-color: #15788c;
  --link-hover-color: #00b9be;

  --selection-front-color: #efe9ef;
  --selection-back-color: #381527;
}
.stars {
  overflow: hidden;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

.stars {
  background-image:
    radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
    radial-gradient(3px 3px at 160px 170px, #ddd, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 140px 75px, #fff, rgba(0,0,0,0)),
    radial-gradient(3px 3px at 100px 120px, #ddd, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* colors */
body {
  background-image: radial-gradient(farthest-corner at top, var(--out-gradient), var(--out-gradient2));
  text-underline-offset: 3px;
  color: var(--content-color);
}
header, nav {
  background-color: var(--header-bg-color);
}
footer {
  background-color: var(--header-bg-color);
  color: var(--header-link-color);
  font-family: monospace;
  direction: ltr;
}
main {
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  box-shadow: 0px 0px 20px 8px var(--out-gradient);
}

nav, section, aside, content {
  background-color: var(--bg-color);
  color: var(--content-color);
}
section, article, nav {
  border: 1px solid var(--border-color);
}
aside {
  border-right: 1px solid var(--border-color);
}
content pre, blockquote, q, abbr, cite, bdo, address { color: var(--quote-color); }
.image { border: 1px solid var(--quote-color); }
.image p { color: var(--quote-color); }

a { text-underline-offset: 4px; }
header a {
  color: var(--header-link-color);
  text-shadow: 0 0 8px var(--header-shadow-color);
  text-decoration: none;
}
nav    a { color: var(--link-color); }
.main  a { color: var(--link-text-color); text-decoration-color: var(--link-color); }

.main h1 a { color: var(--link-color); }
.main h2 a { color: var(--link-color); }
.main h3 a { color: var(--link-color); }
.main h4 a { color: var(--link-color); }
.main h5 a { color: var(--link-color); }
.main h6 a { color: var(--link-color); }

header a:hover { color: var(--link-hover-color); text-shadow: 0 0 8px var(--header-shadow-hover-color); }
nav    a:hover { color: var(--link-hover-color); }
.main  a:hover { color: var(--link-hover-color); }

::selection {
  color: var(--selection-front-color);
  background: var(--selection-back-color);
}

/* layout */
html {
  height: 95%;
  font-size: 100%;
}

body {
  height: 100%;
  margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
  padding: 8px;
}

main {
  margin: auto;
  max-width: 1000px;
  min-width: 300px;
  margin-bottom: 8px;
}

header {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  padding: 10px;
}
header .website-text {
  flex: 1 1 auto;
  display: table;
}
header .website-text a {
  display: table-cell;
  vertical-align: middle;
}
header .logo img {
  flex: 0 1 auto;
  max-height: 1.5em;
  vertical-align: top;
  border-radius: 12px;
  transition: border-radius 0.2s linear;
  vertical-align: middle;
}
header .logo img:hover {
  border-radius: 6px;
  transition: border-radius 0.2s linear;
}

.main {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-items: stretch;
  padding: 20px;
  /*
  text-align: justify;
  text-justify: distribute;
  */
}

.main aside {
  padding: 16px;
}

.main content article {
  padding: 20px;
  margin: 20px 0px;
}
.main content {
  flex: 999 1 auto;
  flex-basis: 0px;
  min-inline-size: 50%;
  padding: 10px;
}
.main aside {
  flex: 1 1 auto;
  flex-basis: 260px;
  padding-right: 20px;
  margin-right: 20px;
}

nav {
    padding: 8px;
}

nav ul {
  list-style: none;
  padding-left: 0;
  padding-right: 0;
  margin: 0px;
  margin-right: 5px;
  font-size: 20px;
}
nav ul li {
  padding: 8px;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  text-decoration: none;
}
nav ul li a:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}

footer {
  padding: 10px;
}
footer p {
  text-align: center;
  margin: 0px;
}

dt { margin-bottom: 4px; }
dd { margin-right: 12px; margin-bottom: 20px; }


.main img, .main video {
  max-width: 100%;
  display: block;
  margin: auto;
}

.image {
  max-width: 70%;
  display: block;
  margin: auto;
  padding: 8px;
  text-align: center;
}

.blog-image {
  max-height: 200px;
  min-width: 80px;
  max-width: 100px;
  display: block;
  margin: auto;
  margin-top: 20px;
  border: 1px dashed var(--border-color);
  padding: 10px 15px;
  flex: 100px 80px 200px;
}
.blog-description {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.blog-description div {
    flex: 1 250px;
    min-width: 200px;
}

.image p {
  text-align: center;
  margin-bottom: 0px;
  margin-top: 10px;
}

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 10px;
  gap: 16px;
}

.gallery img {
  max-width: 100%;
  display: block;
}

h1 { margin: 10px; }
h2 { text-decoration: underline; text-underline-offset: 5px; }
h2, h3, h4, h5 { margin: 10px; margin-left: 0px; margin-right: 0px; color: var(--border-color); }

ol, ul {
  padding-left: 16px;
  padding-right: 16px;
  margin: 0px;
}

/* fonts */
html { font-family: 'Alef',sans-serif; }
h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
p  { font-size: 18px; }
ul { font-size: 18px; }
dt { font-size: 18px; }
dd { font-size: 18px; }

@media screen and (max-width: 500px) {
  .main { padding: 10px; }

  .main content {
    padding-left: 14px;
    padding-right: 14px;
  }

  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  h3 { font-size: 22px; }
  h4 { font-size: 18px; }
  h5 { font-size: 16px; }
  p  { font-size: 16px; }
  ul { font-size: 16px; }
  dt { font-size: 16px; }
  dd { font-size: 16px; }
}


/* fallen star */

.falling-star {
    position: absolute;
    top:50%;
    left:50%;
    width: 0px;
    height: 0px;
    background: #fff;
    border-radius: 50%;
    animation: animate 10s linear infinite;
}
.falling-star::before{
    content:'';
    position: absolute;
    top: 50%;
    transform: translateY(-90%);
    width: 200px;
    height: 1px;
    background: linear-gradient(90deg,#fff,transparent);
}
@keyframes animate
{
    0%
    {
        transform: rotate(330deg) translateX(0);
        opacity: 1;
    }
    70%
    {
        opacity: 1;
    }
    100%
    {
        transform: rotate(330deg) translateX(-8000px) ;
        opacity: 0;
    }
}
.falling-star:nth-child(1){
    top: -400px;
    right: -1400px;
    left: initial;
    animation-delay: 0s;
    animation-duration: 30s;
}
.falling-star:nth-child(2){
    top: -500px;
    right: -800px;
    left: initial;
    animation-delay: 0s;
    animation-duration: 30s;
}
.falling-star:nth-child(3){
    top: -1500px;
    right: -2000px;
    left: initial;
    animation-delay: 0s;
    animation-duration: 30s;
}
.falling-star:nth-child(4){
    top: -800px;
    right: -1600px;
    left: initial;
    animation-delay: 0s;
    animation-duration: 30s;
}

pre {
    direction: ltr !important;
    text-align: left;
}
code {
    background-color: var(--bg-color) !important;
    color: var(--code-content-color);
}
code, .en {
    direction: ltr;
    unicode-bidi: bidi-override;
}

input, textarea {
    background-color: var(--bg-color);
    color: var(--border-color);
}
input::placeholder, textarea::placeholder {
    color: var(--content-color);
}

.comment-user {
    var(--link-text-color);
}

.whats-new {
    display: block;
    overflow: hidden;
    max-height: 75vh;
}
.scroll-fit {
    display: block;
    max-height: 95%;
    overflow-y: scroll;
    padding: 10px;
}