
:root {
	--fg: #ffffff;
	--href: var(--fg);
	--bg: #1b1b1b ;
	--bgcode: #030303;
}

  * {
    color: #ddddff;
    font-size: 19px;
    font-family: "AcariSans", sans-serif;
  }
  
  html {
    /* background:
    linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)
    ),
    url(/images/background/bg3.jpg); */
    background-position:center; 
    background-size: cover;
    font-family: sans-serif;
    font-size: 18px;
    line-height: 1.4;
  }

  .field {
    background:
    linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)
    ),
    url(/images/background/John_Howe_-_Panorama.jpg);
  }
  
  body {
    background-color:#282828;
    width: 1200px;
    margin: auto;
  }

  footer svg {
    padding: 5px;
  }
  
  footer p {
    margin: 0;
  }
  
  footer {
    text-align: center;
    margin-bottom: 100px;
  }
  
  img {
    display: block;
    margin: auto;
    margin-bottom: 10px;
    max-width: 100%;
  }

  .webpin {
    float: left;
    margin: 2px;
  }

  .avatar {
    border-radius: 5px;
    float: right;
    display: block;
    margin: 0 0 1em 1em;
    max-width: 25%;
  }

  .pubdate {
    font-style: italic;
  }
  
  .pubdate time {
    text-decoration: underline;
    text-decoration-style: dotted;
  }
  
  figure {
    max-width: 400px;
  }
  
  figcaption {
    font-style: italic;
  }

  #tagcloud {
    margin: auto;
    list-style: none;
    max-width: 400px;
    padding: 0;
    text-align: center;
    border-radius: 5px;
    border: 1px var(--fg) dashed;
  }
  
  #tagcloud li {
    display: inline-block;
    padding: 10px;
  }
  
  code {
    font-size: 14px;
    font-style: monospace;
    font-weight: normal;
    /* background: var(--bgcode); */
    padding: 0 0px;
  }
  
  .full-img {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  iframe {
    display: block;
    margin: auto;
  }

  nav ul {
    text-align: center;
    list-style: none;
    font-size: 24px;
    padding: 0;
    margin: 0;
  }
  
  nav ul li {
    display: inline-block;
    padding: 5px;
  }
  
  @media (max-width: 620px) {
    body {
      max-width: 100%;
    }
  
    header a {
      font-size: 24px;
    }
  
    main, footer {
      padding-left: 1em;
      padding-right: 1em;
    }
  
    img {
      max-width: 80%;
    }
  
    figure img, .webbuttons img, .full-img {
      max-width: 100%;
    }
  
    .avatar {
      float: none;
      margin: auto;
      padding: 0;
      margin-bottom: 1em;
      max-width: 50%;
    }
  
    nav ul li {
      padding-bottom: 10px;
    }
  }
  
  @media (prefers-color-scheme: dark) {
    :root {
      --fg: #fff;
      --href: var(--fg);
      --bg: #1b1b1b;
      --bgcode: #333;
    }
  }



  
  hr {
    border: 0;
    background: var(--fg);
    height: 1px;
  }
  
  pre {
    margin-left: 16px;
    margin-right: 16px;
    overflow-x: auto;
    padding: 6px;
    padding-right: 6px;
    border: 1px solid #ddddff;
    background-color: #000000;
  }
  
  ul>li {
    list-style: square;
  }
  
  .crypto {
    font-size: x-small ;
  }

  .publised_date {
    font-size: small ;
  }

  a {
    text-decoration: underline;
    text-decoration-style: dotted;
    color: var(--fg);
  }
  
  a:hover {
    text-decoration: none;
  }
  
  input {
    background-color: #fff;
    border-color: #b4bac0;
    color: #000000;
  }
  
  button {
    border-color: #666666;
    color: #000000;
    background-color: #efefef;
    border: 1px solid transparent;
    cursor: pointer;
  }
  
  button:hover {
    border-color: #11a3ea;
    color: #0f4987;
  }
  
  button:focus {
    border-color: #d31141;
    color: #d31141;
    background-color: #d2d2d2;
  }
  
  /* Navigation styles. */
  .nav-list {
    /* position: fixed; */
    text-align: center;
    list-style: none;
    font-size: 24px;
    padding: 0;
    margin: 0;
  }
  
  .nav-item {
    
    display: inline;
    font-size: 0px;
  }
  
  .nav-link {
    color: #ddddff;
    font-size: 26px;
    font-weight: bold;
    text-decoration: none;
    transition-property: background-color, box-shadow;
    transition-duration: 400ms;
    margin-right: 20px;
  }
  
  .nav-link:hover {
    color: #eeeeff;
    text-shadow: 0px 0px 20px rgba(245, 245, 255, 60%);
  }
  
  #nav-mobile {
    display: none;
  }
  
  details {
    margin-left: auto;
  }
  
  summary {
    padding-top: 6px;
    padding-right: 16px;
    padding-left: 16px;
    color: #ddddff;
    font-size: 26px;
    font-weight: bold;
    list-style: none;
  }
  
  summary:hover {
    cursor: pointer;
  }
  

  /* Content styles. */
  #main {
    width: 70%;
    max-width: 1100px;
    text-align: left;
    line-height: 1.35;
    padding-top: 40px;
    padding-bottom: 200px;
  }
  
  @media only screen and (max-width: 800px) {
    #main {
      margin-left: -10%;
      margin-right: 0%;
      width: 90%;
    }
  }
  
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #e6e647;
  }
  
  h2 {
    font-size: 26px;
  }
  
  h3 {
    font-size: 23px;
  }
  
  /* Heading styles */

  header a {
    text-align: center;
    color: var(--fg);
    text-decoration: none;
    font-size: 24px;
    word-break: break-word;
  }

  
  h2 a {
    font-size: 26px;
  }
  
  h3 a {
    font-size: 23px;
  }
  
  a.heading {
    color: #e6e647;
    text-decoration: none;
  }
  
  a.heading:hover {
    text-decoration: underline;
  }
  
  /* Image styles. */
  #content img {
    max-width: 100%;
  }
  
  .link {
    color: #5cb3ff;
    text-decoration: none;
  }
  
  .link:hover {
    text-decoration: underline;
  }
  

  /* Table styles. */
  #content table,
  #content th,
  #content td {
    border-collapse: collapse;
    border: 1px solid #ddddff;
    padding: 4px;
  }
  
  .site-table table ul {
    margin: 4px;
    padding: 4px;
    list-style: none;
    text-align: left;
  }
  
  .table-block table {
    border-collapse: collapse;
  }
  
  /* Article feed styles. */
  .blog-heading {
    margin: 0px;
  }
  
  .feed-icon {
    padding-top: 6px;
    padding-left: 8px;
  }
  
  .h-entry {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  
  .p-name {
    margin: 0px;
    margin-left: 4px;
    margin-right: 4px;
  }
  
  .p-name a {
    font-size: 19px;
    text-decoration: none;
  }
  
  .p-name a:hover {
    text-decoration: underline;
  }
  
  .p-summary {
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: 30px;
    margin-right: 30px;
  }
  
  .p-dates {
    margin-left: 30px;
    margin-right: 30px;
    padding-top: 2px;
    padding-bottom: 1px;
  }
  
  .dt-description-published,
  .dt-description-modified {
    font-size: 16px;
    padding-right: 4px;
  }
  
  .dt-published,
  .dt-modified {
    font-size: 16px;
    color: #fafa4d;
  }
  
  .dt-separator {
    font-size: 16px;
    padding-left: 7px;
    padding-right: 7px;
  }
  
  @media only screen and (max-width: 500px) {
  
    .dt-description-modified,
    .dt-modified,
    .dt-separator {
      display: none;
    }
  
    .p-dates tr {
      display: flex;
      flex-wrap: wrap;
    }
  }
  
  /* Article styles. */
  .figure {
    max-width: 100%;
    margin: 8px;
  }
  
  .figure img {
    margin-top: 8px;
  }
  
  .audcaption,
  .figcaption,
  .vidcaption {
    margin-top: 0px;
  }
  
  .audcaption i,
  .figcaption i,
  .vidcaption i {
    font-size: 16px;
  }
  
  .next-article {
    float: right;
  }
  
  .article-separator {
    display: none;
  }
  
  .block-title {
    margin-top: 4px;
    margin-bottom: 4px;
  }
  
  .note p {
    margin-top: 4px;
    margin-bottom: 4px;
  }
  
  .note td {
    padding: 6px;
  }
  
  .note table {
    border-collapse: collapse;
    background-color: #000050;
  }
  
  blockquote {
    border-left: 4px solid #ddddff;
    border-top: 1px solid #ddddff;
    border-right: 1px solid #ddddff;
    border-bottom: 1px solid #ddddff;
    font-style: italic;
  }
  
  blockquote p {
    padding: 6px;
    padding-left: 10px;
    margin: 0px;
    font-size: 17px;
  }
  
  .spoiler {
    background-color: #000000;
    color: #000000;
  }
  
  .spoiler:hover {
    color: #ddddff;
  }
  
  @media only screen and (max-width: 500px) {
    #article-nav {
      text-align: center;
    }
  
    .article-separator {
      display: unset;
    }
  
    .next-article {
      float: unset;
      margin-top: 8px;
    }
  }
  
  /* Source code styles */
  pre,
  pre.code {
    overflow: auto;
    background: #000000;
    color: #ffffff;
    border: 1px solid #ddddff;
    font-family: "CourierPrime", monospace;
    font-style: normal;
    font-size: 16px;
    direction: ltr;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    margin: 0px;
    padding: 10px;
    line-height: 1.1;
  }
  
  pre.code code {
    color: #ffffff;
  }
  
  pre.code * {
    font-family: "CourierPrime", monospace;
    font-size: 16px;
  }
  
  /* Ref styles. */
  sup a {
    text-decoration: none;
  }
  
  sup a:hover {
    text-decoration: underline;
  }
  
  sup span {
    color: #5cb3ff;
  }
  
  /* Text styles. */
  .red-text {
    color: #ff423e;
  }
  
  .orange-text {
    color: #ff892f;
  }
  
  .yellow-text {
    color: #fafa4d;
  }
  
  .green-text {
    color: #42e649;
  }
  
  .teal-text {
    color: #34de97;
  }
  
  .blue-text {
    color: #4970f9;
  }
  
  .purple-text {
    color: #bc4eff;
  }
  
  .white-text {
    color: #eeeeff;
  }
  
  /* Webring styles. */
  .webring-group {
    text-align: center;
    font-size: 26px;
  }
  
  .link-anchor {
    padding: 4px;
    text-decoration: none;
  }
  
  .link-description {
    margin: 0px;
    text-align: center;
  }
  
  .link-container,
  .link-container-clearnet,
  .link-container-onion,
  .link-container-i2p,
  .link-container-freenet,
  .link-container-yggdrasil,
  .link-container-ipfs,
  .link-container-offline {
    width: 250px;
    min-height: 150px;
    border-radius: 4px;
    margin: 8px;
    padding: 4px;
    padding-top: 8px;
    transition-property: background-color, box-shadow;
    transition-duration: 400ms;
  }
  
  @media only screen and (max-width: 1300px) {
  
    .webring-links,
    .webring-links tr {
      display: flex;
      flex-direction: column;
    }
  
    .link-container,
    .link-container-clearnet,
    .link-container-onion,
    .link-container-i2p,
    .link-container-freenet,
    .link-container-yggdrasil,
    .link-container-ipfs,
    .link-container-offline {
      display: flex;
      flex-direction: column;
      width: 95%;
    }
  
    .link-anchor,
    .link-description {
      margin: auto;
    }
  }
  
  .link-container-clearnet {
    border: 1px solid #eeeeff;
    background-color: #eeeeff40;
    box-shadow: 0px 0px 12px #eeeeff;
  }
  
  .link-container-clearnet:hover {
    background-color: #eeeeff59;
    box-shadow: 0px 0px 20px #eeeeff;
  }
  
  .link-container-onion {
    border: 1px solid #bc4eff;
    background-color: #bc4eff40;
    box-shadow: 0px 0px 12px #bc4eff;
  }
  
  .link-container-onion:hover {
    background-color: #bc4eff59;
    box-shadow: 0px 0px 20px #bc4eff;
  }
  
  .link-container-i2p {
    border: 1px solid #ff892f;
    background-color: #ff892f40;
    box-shadow: 0px 0px 12px #ff892f;
  }
  
  .link-container-i2p:hover {
    background-color: #ff892f59;
    box-shadow: 0px 0px 20px #ff892f;
  }
  
  .link-container-freenet {
    border: 1px solid #4970f9;
    background-color: #4970f940;
    box-shadow: 0px 0px 12px #4970f9;
  }
  
  .link-container-freenet:hover {
    background-color: #4970f959;
    box-shadow: 0px 0px 20px #4970f9;
  }
  
  .link-container-yggdrasil {
    border: 1px solid #42e649;
    background-color: #42e64940;
    box-shadow: 0px 0px 12px #42e649;
  }
  
  .link-container-yggdrasil:hover {
    background-color: #42e64959;
    box-shadow: 0px 0px 20px #42e649;
  }
  
  .link-container-ipfs {
    border: 1px solid #34de97;
    background-color: #34de9740;
    box-shadow: 0px 0px 12px #34de97;
  }
  
  .link-container-ipfs:hover {
    background-color: #34de9759;
    box-shadow: 0px 0px 20px #34de97;
  }
  
  .link-container-offline {
    border: 1px solid #ff423e;
    background-color: #ff423e40;
    box-shadow: 0px 0px 12px #ff423e;
  }
  
  .link-container-offline:hover {
    background-color: #ff423e59;
    box-shadow: 0px 0px 20px #ff423e;
  }
  
  .link-clearnet {
    border: 1px solid #eeeeff;
  }
  
  .link-onion {
    border: 1px solid #bc4eff;
  }
  
  .link-i2p {
    border: 1px solid #ff892f;
  }
  
  .link-freenet {
    border: 1px solid #4970f9;
  }
  
  .link-yggdrasil {
    border: 1px solid #42e649;
  }
  
  .link-ipfs {
    border: 1px solid #34de97;
  }
  
  .link-offline {
    border: 1px solid #ff423e;
  }
  
  /* 404 styles. */
  #not-found {
    margin-top: 200px;
  }

.neobox {
  font-size: 16px;
  line-height: 1.4;
  /* max-width: 1200px;
  max-height: 900px; */
  padding: 15px 25px 15px 35px;
  /* background: linear-gradient(to bottom right, #1c2b4242, #000050d1); */
  /* border: 1px solid #ffffff; */
  overflow: auto;
  /* box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.3), inset 0px 2px 1px rgba(255, 255, 255, 0.3), inset 0px -2px 1px rgba(0, 0, 0, 0.4); */
}

.infobox {
  font-size: 16px;
  /* max-width: 1200px;
  max-height: 900px; */
  padding: 15px 25px 15px 35px;
  /* background: linear-gradient(to bottom right, #1c2b4242, #000050d1); */
  border: 1px solid #ffffff;
  overflow: auto;
  /* box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.3), inset 0px 2px 1px rgba(255, 255, 255, 0.3), inset 0px -2px 1px rgba(0, 0, 0, 0.4); */
}


#subtitle {
  text-align: center;
  color: #ff0;
  text-shadow: 1px 1px 0px #000;
  position: relative;
  /* left: 300px;
  bottom: -20px; */
  -webkit-animation: subtitle 0.25s;
          animation: subtitle 0.25s;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
@-webkit-keyframes subtitle {
  0% {
    transform: scale(0.875) rotate(-0deg);
  }
  100% {
    transform: scale(1) rotate(-4deg);
  }
}

#inlinelinker {
  font-size: x-large;
}

#buttondiv {
	text-align: center ;
}

#buttonlist {
	padding-left: 0 ;
}

#buttonlist li {
	display: inline-block ;
	height: 150px ;
	width: 150px ;
	position: relative ;
	margin: auto ;
}

#buttonlist img {
	height: 80% ;
	width: 80% ;
	max-height: none ;
	max-width: none ;
	position: absolute ;
	left: 50% ;
	transform: translateX(-50%);
}



#linklist {
	text-align: center ;
}


#linklist {
	padding-left: 0 ;
}

#linklist li {
	display: inline-block ;
	height: 150px ;
	width: 150px ;
	position: relative ;
}

#linklist li a {
	height: 100% ;
	width: 100% ;
	display: block ;
}

#linklist img {
	height: 80% ;
	width: 80% ;
	max-height: none ;
	max-width: none ;
	position: absolute ;
	left: 50% ;
	transform: translateX(-50%);
}


#linklist .title {
	font-size: xx-large ;
	background-color: rgba(3,3,3,0.6) ;
}



.menuurl {
	color: green ;
}

.articlelist {
	font-size: 125% ;
}

.articlelist li {
	padding-bottom: .25em ;
}

#inlinelinker {
	font-size: large ;
}

#inlinelinker .desc {
	display: inline-block ;
	color: gold ;
}



#iconmenu {
	list-style: none ;
	text-align: center ;
	font-size: 48pt ;
	margin: 0 ;
}

#iconmenu li {
	display: inline ;
	padding: .1em ;
	margin: .1em ;
}

/* Style for unchecked tasks */
ul input[type="checkbox"]:not(:checked) {
  width: 20px;
  height: 20px;
  border: 2px solid #333;
  border-radius: 4px;
  background-color: transparent;
  cursor: pointer;
  vertical-align: middle;
}

/* Style for checked tasks */
ul input[type="checkbox"]:checked {
  width: 20px;
  height: 20px;
  border: 2px solid green;
  border-radius: 4px;
  background-color: green;
  cursor: pointer;
  
  vertical-align: middle;
}

/* Optional: Style for task labels */
ul li {
  list-style-type: none;
  padding-left: 0px;
}

ul li label {
  cursor: pointer;
  font-size: 16px;
}

/* Hover effect for task items */
ul li:hover {
  background-color: #8a3b3b;
}
