/*
   Written in 2019 by Write.as


   To the extent possible under law, the author(s) have dedicated all
   copyright and related and neighboring rights to this software to the
   public domain worldwide. This software is distributed without any
   warranty.

   You should have received a copy of the CC0 Public Domain Dedication
   along with this software. If not, see
   http://creativecommons.org/publicdomain/zero/1.0
*/

/* MODIFIED BY uhpc*/

h1 {
font-weight: thin !important;
}

body, #blog-title a, header p.description {
font-family: monospace, sans-serif, “kaiti”;
font-weight: thin !important;
}

body {
/* background-image: url(“https://seaswallow.me/media/3d9418e4c64156e97f3ff3c0c58aede6fbcdcec14f61f9930e17d2527ad37090.png");*/
  background-attachment: fixed;
  background-position: justify;
  /background-repeat: no-repeat;/
  background-size: auto;

}

body, article {
    font-family: monospace, sans-serif, “kaiti” !important;
    color: #0d0d0d;
     margin-top:1rem !important;
}

/* tabs */
header nav a, a {
font-family: monospace, “kaiti”;
font-size: 1.2rem;
}

#blog-title a {
background: url('https://seaswallow.me/media/421fe1c7733ecb09e941cd2e921aaeb5a4793adfc42e885ce7f2ebf6d58c67ea.png') no-repeat bottom left;
padding-left: 42px;
font-family: monospace, “kaiti”;
}

/* Add a hover effect (black border) */

img:hover {
 -webkit-filter: none; /* Safari 6.0 – 9.0 /
  filter: none;
  z-index: 7!important;
 /filter: invert(65%);*/
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create two equal columns that sits next to each other */
.column {
  flex: 50%;
  padding: 0 0px;
}

.column img {
  margin-top: 20px;
  vertical-align: middle;

}

::-moz-selection { /* Code for Firefox */
  color: white;
  background: black;
}

::selection {
  color: white;
  background: black;
}

/*

a:hover {
  border-color: black;
  border-width: 1px;
  color: red;
}*/
{
cursor: url(https://seaswallow.me/media/9e0ebb6b8bb44004c2f4a3d8099c0c165030ec0e7c49bc2eb82ed880f3c7219c.png), auto !important;



}

/* unvisited link */
a:link, a:visited {
  color: grey !important;
}

/* mouse over link /
a:hover {
  color: red!important;
  text-decoration: none!important;
  text-shadow: 2px 6px 8px red;
/ border: 1.5px solid red !important;*/
    -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
  cursor: url(https://seaswallow.me/media/b9ebd021e676d8c92722b3b5dd5b4127141c8d47b9a77da01069f407a179ad8b.png), auto!important;
}

/* blur image by default*/

img {
    transition:transform 0.15s ease;
   /* border: 1.5px solid black;*/
     filter: blur(12px);
}

/* enlarge image on click and hold/
img:active {
    -webkit-transform:scale(2); / or some other value */
    transform:scale(2);
    z-index: 7!important;
}

.imageEnlarger > img:active {
    -webkit-transform:scale(1.75); /* or some other value */
    transform:scale(1.75);
}
{
box-sizing: border-box;
}

/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 2px;
  background-color: black;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -1px;
}

/* Container around content */
.container {
  padding: 10px 40px;
  position: relative;
  background-color: transparent;
  width: 50%;
}

/* The circles on the timeline */
.container::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  right: -17px;
  background-color: white;
  border: 2px solid black;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.left {
  left: 0;
}

/* Place the container to the right */
.right {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
  content: “ “;
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid black;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent black;
}

/* Add arrows to the right container (pointing left) */
.right::before {
  content: “ “;
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid black;
  border-width: 10px 10px 10px 0;
  border-color: transparent black transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
  left: -12px;
}

/* The actual content */
.content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 0px;
}

/* Media queries – Responsive timeline on screens less than 600px wide /
@media screen and (max-width: 600px) {
/ Place the timelime to the left */
  .timeline::after {
    left: 31px;
  }

/* Full-width containers */
  .container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

/* Make sure that all arrows are pointing leftwards */
  .container::before {
    left: 60px;
    border: medium solid black;
    border-width: 10px 10px 10px 0;
    border-color: transparent black transparent transparent;
  }

/* Make sure all circles are at the same spot */
  .left::after, .right::after {
    left: 15px;
  }

/* Make all right containers behave like the left ones */
  .right {
    left: 0%;
  }
}

/———————————/

/* tabs */
#collection .pinned {
    color: red;
    font-size: 1.5rem;
}

#post .pinned {
    color: red;
    font-size: 1.5rem;
}