* {
    font-family:Hermit,Hack,monospace;
}
:root {
  --bg-opacity:rgba(255,255,255,0.9);
  --bg-opacity-2:rgba(255,255,255,0.3);
  --box-shadow:0 0 2em #eee;
    --bg-opacity:rgba(0,0,0,0.9);
    --bg-opacity-2:rgba(0,0,0,0.3);
    --box-shadow:0 0 2em #111;
    --accent:#d3c610;
  --bg:#101024;
  --text:#eee;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg-opacity:rgba(0,0,0,0.9);
    --bg-opacity-2:rgba(0,0,0,0.3);
    --box-shadow:0 0 2em #111;
    --accent:#d3c610;
  }
}
body {
  max-width: 65rem;
}
a {
  text-decoration:none;
  transition:all 0.5s;
}
a:hover {
  color:var(--text);
}
header {
  padding:0;
  background:var(--bg);
}
body.home header {
  /*animation: lower-in;
  animation-duration: 2s;*/
}
body.home footer {
  margin-top:4em;
}
body.section footer,
body.page footer {
  margin-top:2em;
}
header section {
  overflow:hidden;
}
header section, footer section {
  max-width: 65rem;
  margin:auto;
}
header section nav {
  float:right;
}
header section nav a {
  border:0;
  margin:0;
}
header section nav a::after {
  content:"";
  position:relative;
  width:60%;
  display:block;
  transition: width 0.5s,border-color 0.5s, transform 0.5s;
  border-bottom:2px solid var(--text);
  float:right;
}
header section nav a:hover::after {
  width:100%;
  border-color:var(--accent) !important;
  transform: rotate(5deg) scale(120%);
}
header section nav a:nth-child(odd):hover::after {
  transform: rotate(-5deg) scale(120%);
}
body main {
  position:relative;
}
body.home main {
  animation:fade-in-left;
  animation-duration:2s;
}
body.home div.main.homepage {
    margin:1em;
}
footer {
  text-align:left;
  border-color:rgba(200,200,200,0.15);
}

body.section .main, body.page .main {
  padding:1em 4em;
}
.row {
  width:100%;
  height:auto;
  display:block;
  overflow:hidden;
}
.row div.cell-2,
.row div.cell-3,
.row div.cell-4,
.row div.cell-5 {
  float:left;
}
.row div.cell-2 {
  width:50%;
}
.row div.cell-2.margin {
  width:48%;
  margin-right:2%;
}
.row div.cell-3 {
  width:33.3333333%;
}
.row div.cell-3.margin {
  width:31.3333333%;
  margin-right:2%;
}
.row div.cell-4 {
  width:25%;
}
.row div.cell-4.margin {
  width:23%;
  margin-right:2%;
}
.row div.cell-5 {
  width:20%;
}
.row div.cell-5.margin {
  width:18%;
  margin-right:2%;
}
.row div.margin:last-child{
  margin-right:0;
}

.row::after {
  clear:both;
}
.intro {
  margin-top:10em;
  margin-bottom:5em;
}
.me {
  text-align:right;
  margin:2em;
  margin-left: 0.6em;
}
.me .my-name h1 {
  text-align:left;
  float:none;
  /*margin-left:1.2em;*/
}
.me .my-name h1::before {
    content:"#\0020";
    color:var(--accent);
}
.me h1 {
  overflow:hidden;
}
.me h1 .letter {
  animation: type;
  animation-fill-mode: forwards;
  animation-duration: 0.2s;
  width:0;
  visibility: collapse;
  display: inline-block;
}
.me h1 .letter:nth-child(1) {
  animation-delay: 1.6s;
}
.me h1 .letter:nth-child(2) {
  animation-delay: 1.8s;
}
.me h1 .letter:nth-child(3) {
  animation-delay: 2.0s;
}
.me h1 .letter:nth-child(4) {
  animation-delay: 2.10s;
}
.me h1 .letter:nth-child(5) {
  animation-delay: 2.16s;
}
.me h1 .letter:nth-child(6) {
  animation-delay: 2.22s;
}
.me h1 .letter:nth-child(7) {
  animation-delay: 2.6s;
}
.me h1 .letter:nth-child(8) {
  animation-delay: 2.8s;
}
.me h1 .letter:nth-child(9) {
  animation-delay: 2.86s;
}
.me h1 .letter:nth-child(10) {
  animation-delay: 2.92s;
}
.me h1 .letter:nth-child(11) {
  animation-delay: 3.0s;
}
.me h1 .cursor {
  animation:cursor-blink;
  animation-duration: 1.5s;
  animation-iteration-count: 3;
  visibility:hidden;
  opacity:0;
}

.me .my-image {
  width:12.5em;
  float:none;
/*  margin: auto;*/
}
.me .my-image img {
  max-width:8em;
  margin-left:3.2em;
  display:block;
  position:relative;
  transition:all 0.5s;
  opacity:1;
}
.me .my-image img:hover {
  transform:scale(1.2) rotate(5deg);
}
.me .my-name {
  width:100%;
  overflow:hidden;
  display:block;
}

.my-things {
  margin:2em;
  margin-left:6em;
  text-align:right;
}
.poem-info {
  font-size:0.6em;
}
.section-list {
  display:flex;
  flex-wrap: wrap;
  overflow:hidden;
}
.item,
.tech .item,
.recipes .item {
  border:1px solid #aaa;
  border-radius: 0.2em;
  transition: background 0.5s;
  overflow:hidden;
  box-sizing: border-box;
  margin-right:1em;
  margin-bottom:1em;
}
.item:hover,
.tech .item:hover {
  background:#b2ecFb;
}

.recipes .item:hover {
  background:#ffff00;
}
.item a,
.tech .item a,
.recipes .item a {
    padding:2em;
    text-align: center;
    color: var(--text);
    display:block;
}

.item h3,
.tech .item h3,
.recipes .item h3 {
  margin-top:0;
}
#website-list .item {
  width:49%;
  margin-right:1%;
  min-height:15em;
  transition: opacity 1.25s;
  transition-delay: 0s;
  pointer-events: auto;
  overflow: hidden;
  position: relative;
  display: block;
}
#website-list .item:hover {
  background:none;
}
#website-list .item .website-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover !important;
  border: 0;
  height: 100%;
  left: 0;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  width: 100%;
  outline: currentcolor none 0px;
  transition: all 3s, filter 1.5s;
  transform-origin: top center;
  filter: grayscale(0.5);
}
#website-list .item:hover .website-image,
#website-list .item:active .website-image  {
  transform: scale(1.5);
  filter: grayscale(0);
}
#website-list .item .web-summary p {
  font-size:0.8em;
  padding-left:1em;
  padding-right:1em;
  color:var(--text);
}
#website-list .item a {
  border:1px solid var(--border);
  display:block;
  width:max-content;
  margin:auto;
  margin-bottom:0.5em;
  padding:0.5em 1em;
  color:var(--text);
}
#website-list .item a:hover {
  background:var(--bg);
}
#website-list .item:hover .web-summary,
#website-list .item:active .web-summary  {
  transform: translateY(1%);
  background:var(--bg-opacity);
}
#website-list .item .web-summary {
  bottom:0;
  position:absolute;
  text-align:center;
  margin: auto;
  width:101%;
  height:auto;
  background:var(--bg-opacity-2);
  transition: all 2s;
  transform: translateY(100%);
  box-shadow: var(--box-shadow);
}
#website-list .item h3 {
  padding-top:0.5em;
  margin-bottom:0;
}


.light-text {
  color:#ddd !important;
}
.dark-text {
  color:#222 !important;
}
.item .row,
.tech .row,
.recipes .row  {
  margin-bottom:1em;
}
footer div.inline {
  float:left;
}
footer div.inline:last-child {
  float:right;
}
footer .footer-links ul
{
  float:left;
}
footer .footer-links ul li
{
    padding-bottom:0.5em;
  list-style-type: none;
}
footer .footer-links ul li a
{

  color:var(--text);
  text-decoration: none;
}
footer .footer-links ul li a:hover {
  color:var(--accent);
}
footer .footer-links ul li a::after
{
  content:"";
  position:relative;
  width:20%;
  display:block;
  transition: width 0.5s, border-color 0.5s, transform 0.5s;
  border-bottom:2px solid var(--text);
}
footer .footer-links ul li a:hover::after
{
  width:75%;
  border-bottom:2px solid var(--accent);
  transform: rotate(-5deg) scale(120%);
}
footer .footer-links ul li:nth-child(odd) a:hover::after {
  transform: rotate(5deg) scale(120%);

}
footer .footer-links::after
{
  clear: both;
}
footer .social-links {
  padding-right:3rem;
  text-align:right;
  overflow: hidden;
  
}
footer .social-links a {
    margin-left:0.6em;
}
footer .social-links img {
  height:auto;
  width:2em;
  filter: grayscale(1);
  transition: transform 0.5s, filter 0.5s;
  margin-top:1em;
}
footer .social-links img:hover {
  height:auto;
  transform: scale(120%) rotate(15deg);
  filter: grayscale(0);
}

ul.pagination {
  list-style-type: none;
  margin:auto;
  text-align:center;
  padding-left:0;

}
ul.pagination li {
  display:inline-block;
  margin-right:0.5em;
  border-radius: 0.2em;
  transition:all 0.5s;
}
ul.pagination li:hover {
  background:#ccc;
}
ul.pagination li a {

  padding:0.2em 0.5em;
  color:var(--text);
}
ul.pagination li:hover a {
  color:#555;
}
ul.pagination li.active a {
  font-weight: bold;
}
ul.pagination li.disabled a {
  color:#ccc;
}
ul.pagination li.disabled:hover {
  background: none;
  color:var(--text) !important;
}
a.nocolouring {
  text-decoration:none;
  color:var(--text);
}
#lastmod{
  float:left;
  position:relative;
  max-width:50%;
}
#taglist{
  float:right;
  position:relative;
  max-width:50%;
}