/* VARIABLES */

html {
  --dark:   #222D3F;  /* var(--dark); */
  --darkish:#335941;  /* var(--darkish); */
  --medium: #4f8c6c;  /* var(--medium); */
  --bright: #77A756;  /* var(--bright); */
  --light:  #99BE7F;  /* var(--light); */
  /* --dark:   rgb(34, 45, 63); */
  /* --darkish:rgb(51, 89, 65); */
  /* --medium: rgb(79, 140, 108); */
  /* --bright: rgb(119, 167, 86); */
  /* --light:  rgb(153, 190, 127); */

/* #ADD9F4 */
/* #FFFFFF */


  --sf: Garamond,
        "Garamond Antiqua",
        serif;
  --ssf: "Century Gothic",
         "Avant Garde Gothic",
         "Avant Garde",
         sans-serif;

  scroll-behavior: smooth;
}






body {
  background: var(--medium);
  margin: 0;
  font-family: var(--ssf);
  position: relative;
  overflow-x: hidden;
}
.title, .brexit {
  height: 50vh;
}
.title { 
  color: var(--light);
  background-color: var(--dark);
}
.brexit { 
  color: var(--dark);
  background-color: var(--light);
}
.int_menu, .ext_menu {
  color: var(--light);
  background: var(--darkish);
  width: 100%;
  height: 25vh;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  text-align: center;
  z-index: 1;
  position: absolute;
  transition: all 0.5s ease-in-out;
}
.int_menu {
  top: -50vh;
}
.ext_menu {
  top: -25vh;
}
.int_menu > *, .ext_menu > * {
  width: calc(100vw / 7);
}
svg[class*="fa-"] {
  font-size: 2em;
  fill: var(--light);
  stroke: var(--light);
}
svg[class*="fa-glitch"] {
  fill: unset;
  stroke: unset;
}
.link, a, a:visited, a i[class*="fa-"], a svg[class*="fa-"] {
  /* color: var(--bright); */
  color: #435D2C;
  cursor: pointer;
  word-break: break-all;
}
a i[class*="fa-"], a svg[class*="fa-"]  {
  color: var(--bright);
  fill: var(--bright);
  stroke: var(--bright);
}
a svg[class*="fa-glitch"]  {
  fill: unset;
  stroke: unset;
}


.content a:hover {
  background: linear-gradient(90deg, var(--bright), var(--dark), var(--bright));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: wave 1s ease-in-out infinite alternate;
  color: rgba(26, 184, 247, 0.295);
  color: rgba(26, 96, 247, 0.295);
  color: rgba(207, 247, 26, 0.295);

}
@keyframes wave {
  0%  { background-position:   0%  50% }
  100% { background-position:  100%  50% }
}

a i[class*="fa-hand-spock"], a svg[class*="fa-hand-spock"],
label[for="cats_button"] a svg[class*="fa-"],
label[for="secret_button"] a svg[class*="fa-"] 
{
  color: var(--light);
  stroke: var(--light);
  fill: var(--light);
  cursor: default;
}
.spiral {
  width: 2em;
  animation: spin 4000ms infinite linear;
}
@keyframes spin { 
  from { transform: rotate(360deg); } 
  to   { transform: rotate(0deg); }
}
.haskell {
  width: 2em;
}
.home {
  transition: all 1s ease-in-out;
}
.brexit {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.brexit img {
  width: calc(100% - 60px);
  max-width: 500px;
  max-height: 500px;
}
.brexit #cat {
  display: none;
}
.brexit #cat:hover, 
.brexit img:hover ~ #cat {
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  top: calc(50% - 80px);
  width: 160px;
  height: 160px;
  object-fit: cover;
}
.title {
  font-size: 5em;
  line-height: 50vh;
  text-align: center;
}
.content {
  min-height: 100vh;
  padding: 2em 1em;
  background: white;
  max-width: 900px;
  margin: 0 auto;
}
h1 {
  text-align: right;
  color: var(--medium);
  font-size: 2.5em;
  /* border-bottom: 10px solid; */
  /* border-bottom: 10px solid; */
  border-width: 0 0 10px 0;
  border-style: none none solid none;
  border-image-source: linear-gradient(to right, var(--light), var(--dark));
  border-image-slice: 1;
}
h2, h3 {
  color: var(--dark);
  margin-top: 2em;
}
p[title^="last"] {
  text-align: right;
}
#date, .date {
  color: var(--medium);
  font-weight: bold;
}
.date {
  margin: 0;
  display: none;
}
.zalgo {
  margin: 4em 2em;
}
#goren {
  width: 90%;
  padding: 1em 5%;
}
#goren text {
  font-family: monospace;
  white-space: pre;
  fill: var(--light);
}

.content img {
  width: 100%;
  max-width: 700px;
}
.content figcaption {
  text-align: center;
}
.content figure video {
  width: 100%;
  max-width: 700px;
}
.content > div, .content > aside, .content > article {
  border: 0;
  /* max-width: 900px; */
  /* margin: 0 auto; */
  /* max-width: 800px; */
}
#cheats.content > article {
  margin: 0;
}
.murakami {
  display: flex;
}

.content .rowOf8 {
  width: 100%;
  max-width: 100%;
}



.gallery_grid {
  min-height: 100vh;
  /* background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%); */
  /* background-image: url("../images/favicons/spiral-gallery.svg"); */
  /* background-size: calc(217px + 5px) calc(200px + 10px); */
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 1fr 1fr;
  margin-top: 2em;
}
/* .gallery_img, .gallery_img img, picture img, picture source { */
img.gallery_img {
  object-fit: cover;
  height: 250px;
  max-height: 100%;
  max-width: 100%;
  /* background-image: url("../images/favicons/spiral-gallery.svg"); */
  /* background-size: 205px 205px; */
}
.landscape {
  grid-column: span 1;
}
.portrait {
  grid-row: span 1;
}
.panorama {
  grid-column: span 1;
}
.square, .faves {
  grid-row: span 1;
  grid-column: span 1;
}




#images .filter_category {
  display: inline-block;
  padding-right: 1em;
  width: 100px;
  margin: 0;
  color: var(--medium);
}
#secret .filter_category {
  display: inline-block;
  padding-right: 1em;
  width: 50px;
  margin: 0;
  color: var(--medium);
}

/* image modals */
#modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* text-align: center; */
  background-color: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
  flex-direction: column-reverse;
  display: flex;
  z-index: 9999;
}
#modal ul {
  color: white;
  list-style-type: none;
}
#modal img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}

/* image filters */ 
#images label, #secret label, #cheats label {
  font-family: 'Arial Narrow', Arial, sans-serif;
  padding: 0 5px;
  margin: 5px 5px;
  cursor: pointer;
  line-height: 1.5em;
  font-size: 0.8em;
  text-transform: uppercase;
  color: white;
  display: inline-block;
}
#images [class*="filter"] + label,
#secret [class*="filter"] + label {
  border-radius: 3px;
  border: 1px solid var(--dark);
}
#images label:hover,
#secret label:hover {
  background-color: var(--light);
}
#images [class*="filter"]:checked + label,
#secret [class*="filter"]:checked + label {
  background-color: var(--dark);
}
#images [class*="filter"]:not(:checked) + label,
#secret [class*="filter"]:not(:checked) + label {
  color: var(--dark);
}

/* hide photos first */
#images [class*="gallery_img"],
#secret [class*="gallery_img"] {
  display: none;
}

/* but then show selected categories */
#images .filter-trees:checked ~ .gallery_grid [class*="trees"],
#images .filter-water:checked ~ .gallery_grid [class*="water"],
#images .filter-sky:checked ~ .gallery_grid [class*="sky"],
#images .filter-sunset:checked ~ .gallery_grid [class*="sunset"],
#images .filter-heritage:checked ~ .gallery_grid [class*="heritage"],
#images .filter-flowers:checked ~ .gallery_grid [class*="flowers"],
#images .filter-animals:checked ~ .gallery_grid [class*="animals"],
#images .filter-art:checked ~ .gallery_grid [class*="art"],
#images .filter-night:checked ~ .gallery_grid [class*="night"],
#images .filter-city:checked ~ .gallery_grid [class*="city"],
#images .filter-stone:checked ~ .gallery_grid [class*="stone"],
#images .filter-beach:checked ~ .gallery_grid [class*="beach"],
#images .filter-patterns:checked ~ .gallery_grid [class*="patterns"],
#images .filter-faves:checked ~ .gallery_grid [class*="faves"],

#images .filter-y2011:checked ~ .gallery_grid [src*="2011"],
#images .filter-y2013:checked ~ .gallery_grid [src*="2013"],
#images .filter-y2017:checked ~ .gallery_grid [src*="2017"],
#images .filter-y2018:checked ~ .gallery_grid [src*="2018"],
#images .filter-y2019:checked ~ .gallery_grid [src*="2019"],
#images .filter-y2022:checked ~ .gallery_grid [src*="2022"],
#images .filter-y2023:checked ~ .gallery_grid [src*="2023"],
#images .filter-y2024:checked ~ .gallery_grid [src*="2024"],

#secret .filter-y03:checked ~ .gallery_grid [class*="y03"],
#secret .filter-y04:checked ~ .gallery_grid [class*="y04"],
#secret .filter-y05:checked ~ .gallery_grid [class*="y05"],
#secret .filter-y06:checked ~ .gallery_grid [class*="y06"],
#secret .filter-y07:checked ~ .gallery_grid [class*="y07"],
#secret .filter-y08:checked ~ .gallery_grid [class*="y08"],
#secret .filter-y09:checked ~ .gallery_grid [class*="y09"],
#secret .filter-y10:checked ~ .gallery_grid [class*="y10"],
#secret .filter-y11:checked ~ .gallery_grid [class*="y11"],
#secret .filter-y13:checked ~ .gallery_grid [class*="y13"],
#secret .filter-y17:checked ~ .gallery_grid [class*="y17"],
#secret .filter-y18:checked ~ .gallery_grid [class*="y18"],
#secret .filter-y19:checked ~ .gallery_grid [class*="y19"],
#secret .filter-y22:checked ~ .gallery_grid [class*="y22"],
#secret .filter-y23:checked ~ .gallery_grid [class*="y23"],
#secret .filter-y24:checked ~ .gallery_grid [class*="y24"],

#images .filter-crete:checked ~ .gallery_grid [src*="crete"],
#images .filter-sydney:checked ~ .gallery_grid [src*="sydney"],
#images .filter-iceland:checked ~ .gallery_grid [src*="iceland"],
#images .filter-england:checked ~ .gallery_grid [src*="england"],
#images .filter-england:checked ~ .gallery_grid [class*="england"],
#images .filter-germany:checked ~ .gallery_grid [src*="germany"],
#images .filter-japan:checked ~ .gallery_grid [src*="japan"],
#images .filter-miami:checked ~ .gallery_grid [src*="miami"]
{
  display: block;
}


#images h2 {
  display: inline-block;
  margin: 0 10px 1em 0;
}

#images [for="show_filters"],
#images [for="hide_filters"] {
  color: gray;
}

#images #show_filters:checked + label, 
#images #hide_filters:checked + label
{
  color: var(--dark);
  text-decoration: underline;
}
#images #show_filters:checked ~ .filter_breaks,
#images #show_filters:checked ~ .filter_category, 
#images #show_filters:checked ~ [class^="filter-"] + label 
{
  display: inline-block;
}
#images #hide_filters:checked ~ .filter_breaks,
#images #hide_filters:checked ~ .filter_category, 
#images #hide_filters:checked ~ [class^="filter-"] + label 
{
  display: none;
}



/* PORTFOLIO */

#portfolio #portfolio_inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#portfolio #portfolio_inner article {
  width: 95%;
  height: 500px;
  border: none;
  border-radius: 5px;
  background: var(--dark);
  margin: 10px;
}
#portfolio #portfolio_inner figure {
  width: 100%;
  height: 280px;
  margin: 0;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
}

#portfolio #portfolio_inner figure a img {
  object-fit: cover;
  height: 280px;
  max-height: 280px;
  display: block;
}

#portfolio #portfolio_inner figcaption {
  box-sizing: border-box;
  line-height: 1.5em;
  padding: .25em;
  background: rgba( 255, 255, 255, .6 );
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transform: translateY(0);
  transition: transform .5s;
  /* the below is awaiting full CSS support */
  /* display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5; */
}

#portfolio #portfolio_inner figure:hover figcaption {
  transform: translateY(-100%);
  /* transition: all .5s; */
}


#portfolio #portfolio_inner h3 {
  color: var(--light);
  text-align: center;
  margin: .5em;
}
#portfolio #portfolio_inner p {
  color: #ccc;
  margin: .5em;
}

















details {
  padding: 0 0 10px 10px;
}
details li {
  list-style: none;
}
/* details[open] summary,
details[open] summary h3 {
  background: var(--dark);
  color: white;
} */
summary:hover {
  cursor: pointer;
  color: var(--bright);
}
summary h3 {
  display: inline-block;
  margin: 1em 0;
}
/* summary h3::after {
  content: "§";
} */
summary:focus {
  outline: none;
}
#cheats summary h3 a {
  padding-left: .75em;
}
#cheats summary h3 a:hover {
  color: var(--dark);
}
#cheats header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
#cheats h2 {
  margin: 1em 10px .5em 0;
}
#cheatsNav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 2em;
}
#cheatsNav a {
  padding-right: 1em;
  padding: 10px;
}
#cheatsNav a:hover {
  color: var(--dark);
}
#cheats label,
#cheats label[for="show_cheatsNa"],
#cheats label[for="hide_cheatsNav"] {
  color: gray;
  margin-bottom: -10px;
}
#cheats #show_cheatsNav:checked + label, 
#cheats #hide_cheatsNav:checked + label
{
  color: var(--dark);
  text-decoration: underline;
}
#cheats #show_cheatsNav:checked ~ #cheatsNav
{
  display: flex;
}
#cheats #hide_cheatsNav:checked ~ #cheatsNav
{
  display: none;
}

#cheats pre {
  background: #e1e7de;
  padding: 4px;
  margin-left: 25px;
  overflow: auto;
}
#cheats li pre {
  margin-left: 25px;
}
#cheats code {
  background: #e1e7de;
  padding: 0 4px;
}
#cheats ul {
  padding-inline-start: 0;
}
#cheats em {
  font-weight: bold;
}
#cheats .inlineImg img {
  width: 500px;
}

#cheats li:not(.mac)::before,
#cheats li:not(.linux)::before,
#cheats li:not(.win)::before,
#cheats li:not(.null)::before {
  width: 25px;
  color: var(--medium);
  content: "*"; 
  display: inline-block;
}

#cheats li.linux:before, li.win::before, li.mac:before, 
#cheats li.info:before, li.null:before {
  color: var(--medium);
  display: inline-block;
  width: 15px;
  padding-right: 15px;
}
#cheats li.win::before {
  width: 15px;
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMzMzU5NDEiIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBkPSJNMCA5My43bDE4My42LTI1LjN2MTc3LjRIMFY5My43em0wIDMyNC42bDE4My42IDI1LjNWMjY4LjRIMHYxNDkuOXptMjAzLjggMjhMNDQ4IDQ4MFYyNjguNEgyMDMuOHYxNzcuOXptMC0zODAuNnYxODAuMUg0NDhWMzJMMjAzLjggNjUuN3oiLz48L3N2Zz4="); 
}
#cheats li.mac::before {
  width: 15px;
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMzMzU5NDEiIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48cGF0aCBkPSJNMzE4LjcgMjY4LjdjLS4yLTM2LjcgMTYuNC02NC40IDUwLTg0LjgtMTguOC0yNi45LTQ3LjItNDEuNy04NC43LTQ0LjYtMzUuNS0yLjgtNzQuMyAyMC43LTg4LjUgMjAuNy0xNSAwLTQ5LjQtMTkuNy03Ni40LTE5LjdDNjMuMyAxNDEuMiA0IDE4NC44IDQgMjczLjVxMCAzOS4zIDE0LjQgODEuMmMxMi44IDM2LjcgNTkgMTI2LjcgMTA3LjIgMTI1LjIgMjUuMi0uNiA0My0xNy45IDc1LjgtMTcuOSAzMS44IDAgNDguMyAxNy45IDc2LjQgMTcuOSA0OC42LS43IDkwLjQtODIuNSAxMDIuNi0xMTkuMy02NS4yLTMwLjctNjEuNy05MC02MS43LTkxLjl6bS01Ni42LTE2NC4yYzI3LjMtMzIuNCAyNC44LTYxLjkgMjQtNzIuNS0yNC4xIDEuNC01MiAxNi40LTY3LjkgMzQuOS0xNy41IDE5LjgtMjcuOCA0NC4zLTI1LjYgNzEuOSAyNi4xIDIgNDkuOS0xMS40IDY5LjUtMzQuM3oiLz48L3N2Zz4=");
}
#cheats li.linux::before {
  width: 15px;
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMzMzU5NDEiIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBkPSJNMjIwLjggMTIzLjNjMSAuNSAxLjggMS43IDMgMS43IDEuMSAwIDIuOC0uNCAyLjktMS41LjItMS40LTEuOS0yLjMtMy4yLTIuOS0xLjctLjctMy45LTEtNS41LS4xLS40LjItLjguNy0uNiAxLjEuMyAxLjMgMi4zIDEuMSAzLjQgMS43em0tMjEuOSAxLjdjMS4yIDAgMi0xLjIgMy0xLjcgMS4xLS42IDMuMS0uNCAzLjUtMS42LjItLjQtLjItLjktLjYtMS4xLTEuNi0uOS0zLjgtLjYtNS41LjEtMS4zLjYtMy40IDEuNS0zLjIgMi45LjEgMSAxLjggMS41IDIuOCAxLjR6TTQyMCA0MDMuOGMtMy42LTQtNS4zLTExLjYtNy4yLTE5LjctMS44LTguMS0zLjktMTYuOC0xMC41LTIyLjQtMS4zLTEuMS0yLjYtMi4xLTQtMi45LTEuMy0uOC0yLjctMS41LTQuMS0yIDkuMi0yNy4zIDUuNi01NC41LTMuNy03OS4xLTExLjQtMzAuMS0zMS4zLTU2LjQtNDYuNS03NC40LTE3LjEtMjEuNS0zMy43LTQxLjktMzMuNC03MkMzMTEuMSA4NS40IDMxNS43LjEgMjM0LjggMCAxMzIuNC0uMiAxNTggMTAzLjQgMTU2LjkgMTM1LjJjLTEuNyAyMy40LTYuNCA0MS44LTIyLjUgNjQuNy0xOC45IDIyLjUtNDUuNSA1OC44LTU4LjEgOTYuNy02IDE3LjktOC44IDM2LjEtNi4yIDUzLjMtNi41IDUuOC0xMS40IDE0LjctMTYuNiAyMC4yLTQuMiA0LjMtMTAuMyA1LjktMTcgOC4zcy0xNCA2LTE4LjUgMTQuNWMtMi4xIDMuOS0yLjggOC4xLTIuOCAxMi40IDAgMy45LjYgNy45IDEuMiAxMS44IDEuMiA4LjEgMi41IDE1LjcuOCAyMC44LTUuMiAxNC40LTUuOSAyNC40LTIuMiAzMS43IDMuOCA3LjMgMTEuNCAxMC41IDIwLjEgMTIuMyAxNy4zIDMuNiA0MC44IDIuNyA1OS4zIDEyLjUgMTkuOCAxMC40IDM5LjkgMTQuMSA1NS45IDEwLjQgMTEuNi0yLjYgMjEuMS05LjYgMjUuOS0yMC4yIDEyLjUtLjEgMjYuMy01LjQgNDguMy02LjYgMTQuOS0xLjIgMzMuNiA1LjMgNTUuMSA0LjEuNiAyLjMgMS40IDQuNiAyLjUgNi43di4xYzguMyAxNi43IDIzLjggMjQuMyA0MC4zIDIzIDE2LjYtMS4zIDM0LjEtMTEgNDguMy0yNy45IDEzLjYtMTYuNCAzNi0yMy4yIDUwLjktMzIuMiA3LjQtNC41IDEzLjQtMTAuMSAxMy45LTE4LjMuNC04LjItNC40LTE3LjMtMTUuNS0yOS43ek0yMjMuNyA4Ny4zYzkuOC0yMi4yIDM0LjItMjEuOCA0NC0uNCA2LjUgMTQuMiAzLjYgMzAuOS00LjMgNDAuNC0xLjYtLjgtNS45LTIuNi0xMi42LTQuOSAxLjEtMS4yIDMuMS0yLjcgMy45LTQuNiA0LjgtMTEuOC0uMi0yNy05LjEtMjcuMy03LjMtLjUtMTMuOSAxMC44LTExLjggMjMtNC4xLTItOS40LTMuNS0xMy00LjQtMS02LjktLjMtMTQuNiAyLjktMjEuOHpNMTgzIDc1LjhjMTAuMSAwIDIwLjggMTQuMiAxOS4xIDMzLjUtMy41IDEtNy4xIDIuNS0xMC4yIDQuNiAxLjItOC45LTMuMy0yMC4xLTkuNi0xOS42LTguNC43LTkuOCAyMS4yLTEuOCAyOC4xIDEgLjggMS45LS4yLTUuOSA1LjUtMTUuNi0xNC42LTEwLjUtNTIuMSA4LjQtNTIuMXptLTEzLjYgNjAuN2M2LjItNC42IDEzLjYtMTAgMTQuMS0xMC41IDQuNy00LjQgMTMuNS0xNC4yIDI3LjktMTQuMiA3LjEgMCAxNS42IDIuMyAyNS45IDguOSA2LjMgNC4xIDExLjMgNC40IDIyLjYgOS4zIDguNCAzLjUgMTMuNyA5LjcgMTAuNSAxOC4yLTIuNiA3LjEtMTEgMTQuNC0yMi43IDE4LjEtMTEuMSAzLjYtMTkuOCAxNi0zOC4yIDE0LjktMy45LS4yLTctMS05LjYtMi4xLTgtMy41LTEyLjItMTAuNC0yMC0xNS04LjYtNC44LTEzLjItMTAuNC0xNC43LTE1LjMtMS40LTQuOSAwLTkgNC4yLTEyLjN6bTMuMyAzMzRjLTIuNyAzNS4xLTQzLjkgMzQuNC03NS4zIDE4LTI5LjktMTUuOC02OC42LTYuNS03Ni41LTIxLjktMi40LTQuNy0yLjQtMTIuNyAyLjYtMjYuNHYtLjJjMi40LTcuNi42LTE2LS42LTIzLjktMS4yLTcuOC0xLjgtMTUgLjktMjAgMy41LTYuNyA4LjUtOS4xIDE0LjgtMTEuMyAxMC4zLTMuNyAxMS44LTMuNCAxOS42LTkuOSA1LjUtNS43IDkuNS0xMi45IDE0LjMtMTggNS4xLTUuNSAxMC04LjEgMTcuNy02LjkgOC4xIDEuMiAxNS4xIDYuOCAyMS45IDE2bDE5LjYgMzUuNmM5LjUgMTkuOSA0My4xIDQ4LjQgNDEgNjguOXptLTEuNC0yNS45Yy00LjEtNi42LTkuNi0xMy42LTE0LjQtMTkuNiA3LjEgMCAxNC4yLTIuMiAxNi43LTguOSAyLjMtNi4yIDAtMTQuOS03LjQtMjQuOS0xMy41LTE4LjItMzguMy0zMi41LTM4LjMtMzIuNS0xMy41LTguNC0yMS4xLTE4LjctMjQuNi0yOS45cy0zLTIzLjMtLjMtMzUuMmM1LjItMjIuOSAxOC42LTQ1LjIgMjcuMi01OS4yIDIuMy0xLjcuOCAzLjItOC43IDIwLjgtOC41IDE2LjEtMjQuNCA1My4zLTIuNiA4Mi40LjYtMjAuNyA1LjUtNDEuOCAxMy44LTYxLjUgMTItMjcuNCAzNy4zLTc0LjkgMzkuMy0xMTIuNyAxLjEuOCA0LjYgMy4yIDYuMiA0LjEgNC42IDIuNyA4LjEgNi43IDEyLjYgMTAuMyAxMi40IDEwIDI4LjUgOS4yIDQyLjQgMS4yIDYuMi0zLjUgMTEuMi03LjUgMTUuOS05IDkuOS0zLjEgMTcuOC04LjYgMjIuMy0xNSA3LjcgMzAuNCAyNS43IDc0LjMgMzcuMiA5NS43IDYuMSAxMS40IDE4LjMgMzUuNSAyMy42IDY0LjYgMy4zLS4xIDcgLjQgMTAuOSAxLjQgMTMuOC0zNS43LTExLjctNzQuMi0yMy4zLTg0LjktNC43LTQuNi00LjktNi42LTIuNi02LjUgMTIuNiAxMS4yIDI5LjIgMzMuNyAzNS4yIDU5IDIuOCAxMS42IDMuMyAyMy43LjQgMzUuNyAxNi40IDYuOCAzNS45IDE3LjkgMzAuNyAzNC44LTIuMi0uMS0zLjIgMC00LjIgMCAzLjItMTAuMS0zLjktMTcuNi0yMi44LTI2LjEtMTkuNi04LjYtMzYtOC42LTM4LjMgMTIuNS0xMi4xIDQuMi0xOC4zIDE0LjctMjEuNCAyNy4zLTIuOCAxMS4yLTMuNiAyNC43LTQuNCAzOS45LS41IDcuNy0zLjYgMTgtNi44IDI5LTMyLjEgMjIuOS03Ni43IDMyLjktMTE0LjMgNy4yem0yNTcuNC0xMS41Yy0uOSAxNi44LTQxLjIgMTkuOS02My4yIDQ2LjUtMTMuMiAxNS43LTI5LjQgMjQuNC00My42IDI1LjVzLTI2LjUtNC44LTMzLjctMTkuM2MtNC43LTExLjEtMi40LTIzLjEgMS4xLTM2LjMgMy43LTE0LjIgOS4yLTI4LjggOS45LTQwLjYuOC0xNS4yIDEuNy0yOC41IDQuMi0zOC43IDIuNi0xMC4zIDYuNi0xNy4yIDEzLjctMjEuMS4zLS4yLjctLjMgMS0uNS44IDEzLjIgNy4zIDI2LjYgMTguOCAyOS41IDEyLjYgMy4zIDMwLjctNy41IDM4LjQtMTYuMyA5LS4zIDE1LjctLjkgMjIuNiA1LjEgOS45IDguNSA3LjEgMzAuMyAxNy4xIDQxLjYgMTAuNiAxMS42IDE0IDE5LjUgMTMuNyAyNC42ek0xNzMuMyAxNDguN2MyIDEuOSA0LjcgNC41IDggNy4xIDYuNiA1LjIgMTUuOCAxMC42IDI3LjMgMTAuNiAxMS42IDAgMjIuNS01LjkgMzEuOC0xMC44IDQuOS0yLjYgMTAuOS03IDE0LjgtMTAuNHM1LjktNi4zIDMuMS02LjYtMi42IDIuNi02IDUuMWMtNC40IDMuMi05LjcgNy40LTEzLjkgOS44LTcuNCA0LjItMTkuNSAxMC4yLTI5LjkgMTAuMnMtMTguNy00LjgtMjQuOS05LjdjLTMuMS0yLjUtNS43LTUtNy43LTYuOS0xLjUtMS40LTEuOS00LjYtNC4zLTQuOS0xLjQtLjEtMS44IDMuNyAxLjcgNi41eiIvPjwvc3ZnPg==");
}
#cheats li.info::before {
  width: 15px;
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMzMzU5NDEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjU2IDUxMkEyNTYgMjU2IDAgMSAwIDI1NiAwYTI1NiAyNTYgMCAxIDAgMCA1MTJ6TTIxNiAzMzZoMjRWMjcySDIxNmMtMTMuMyAwLTI0LTEwLjctMjQtMjRzMTAuNy0yNCAyNC0yNGg0OGMxMy4zIDAgMjQgMTAuNyAyNCAyNHY4OGg4YzEzLjMgMCAyNCAxMC43IDI0IDI0cy0xMC43IDI0LTI0IDI0SDIxNmMtMTMuMyAwLTI0LTEwLjctMjQtMjRzMTAuNy0yNCAyNC0yNHptNDAtMjA4YTMyIDMyIDAgMSAxIDAgNjQgMzIgMzIgMCAxIDEgMC02NHoiLz48L3N2Zz4=");
}
/* li.null::before {
  content: ""; 
} */
#cheats li.null::before {
  content: "*"; 
  /* list-style-type: disc; */
}





.up {
  text-align: right;
  margin-top: 10px;
  color: var(--medium);
}
footer {
  padding: 1em;
  text-align: center;
  color: var(--dark);
  background: white;
  box-shadow: 0 -10px 20px rgba(79, 140, 108, 0.2);
}
footer p {
  margin: 0;
}
footer i[class*="fa-"],
footer svg[class*="fa-"], 
i.fa-thumbs-up,
svg.fa-thumbs-up {
  font-size: 1em;
}









/* RADIOBUTTON HACK */

/* hide all sections initially */
.content, [class*='home'], 
input[type="radio"], input[type="checkbox"] {
  display: none;
}
/* show the one that is selected */
input#home_button:checked ~ [class$=' home'],
input[id^='about']:checked ~ [id='about'],
input[id^='portfolio']:checked ~ [id='portfolio'],
input[id^='cheats']:checked ~ [id='cheats'],
input[id^='images']:checked ~ [id='images'],
input[id^='cats']:checked ~ [id='cats'],
input[id^='secret']:checked ~ [id='secret'] 
{
  display: flex;
  flex-direction: column;
}




/* hide and show mobile menu */
label[for="menu_button"] {
  position: absolute;
  display: flex;
  justify-content: center;
  /* left: calc(50vw - 15px); */
  left: 0;
  top: 0;
  text-align: center;
  width: 100%;
  z-index: 2;
  /* font-size: 3em; */
  color: var(--bright);
  cursor: pointer;
  font-weight: 900;
  transition: all 0.5s ease-in-out;
}
input#menu_button:checked ~ .int_menu {
  transform: translate(0,50vh);
}
input#menu_button:checked ~ .ext_menu {
  transform: translate(0,49vh);
}
label[for="menu_button"]::before {
  /* content: "\f107";  arrow_down */
  content: url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiM3N0E3NTYiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjMzLjQgNDA2LjZjMTIuNSAxMi41IDMyLjggMTIuNSA0NS4zIDBsMTkyLTE5MmMxMi41LTEyLjUgMTIuNS0zMi44IDAtNDUuM3MtMzIuOC0xMi41LTQ1LjMgMEwyNTYgMzM4LjcgODYuNiAxNjkuNGMtMTIuNS0xMi41LTMyLjgtMTIuNS00NS4zIDBzLTEyLjUgMzIuOCAwIDQ1LjNsMTkyIDE5MnoiLz48L3N2Zz4=');  /* arrow_down */
  width: 7%;
}
input#menu_button:checked ~ label[for="menu_button"]::before {
  /* content: "\f106";  arrow_up */
  content: url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiM3N0E3NTYiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjMzLjQgMTA1LjRjMTIuNS0xMi41IDMyLjgtMTIuNSA0NS4zIDBsMTkyIDE5MmMxMi41IDEyLjUgMTIuNSAzMi44IDAgNDUuM3MtMzIuOCAxMi41LTQ1LjMgMEwyNTYgMTczLjMgODYuNiAzNDIuNmMtMTIuNSAxMi41LTMyLjggMTIuNS00NS4zIDBzLTEyLjUtMzIuOCAwLTQ1LjNsMTkyLTE5MnoiLz48L3N2Zz4=');  /* arrow_up */
  width: 7%;
}
input#menu_button:checked ~ label[for="menu_button"] {
  top: 50vh;
  /* background: rgba(255,255,255,0.8); */
}






.colours {
  display: flex;
  /* flex-direction: row; */
  /* justify-content: stretch; */
}
.colourSet {
  display: flex;
  flex-direction: column;
}
.colourSet div {
  width: 150px;
  height: 50px;
}




@media screen and (min-width: 700px) {

  /* input#home_button:checked ~ [class$=' home'],
  input[id^='about']:checked ~ [id='about'],
  input[id^='portfolio']:checked ~ [id='portfolio'],
  input[id^='cheats']:checked ~ [id='cheats'],
  input[id^='images']:checked ~ [id='images'],
  input[id^='cats']:checked ~ [id='cats'],
  input[id^='secret']:checked ~ [id='secret'] 
  {
    max-width: 800px;
  } */


  [class$=' home'] {
    position: fixed;
  }
  .title {
    display: inline-block;
    left: 0;
    width: calc(50% - 60px);
    height: 100vh;
    line-height: 100vh;
    margin-right: 60px;
    transition: all 0.5s ease-in-out;
  }
  .brexit {
    display: flex;
    right: 0;
    width: calc(50% - 60px);
    height: 100vh;
    margin-left: 60px;
    transition: all 0.5s ease-in-out;
  }
  label[for="menu_button"] {
    display: none;
  }
  .int_menu, .ext_menu {
    position: fixed;
    top: 0;
    width: 60px;
    height: 100vh;
    grid-template-columns: 1fr;
  }
  .int_menu {
    left: calc(50% - 80px);
    border-left: 20px solid var(--dark);
  }
  .ext_menu {
    right: calc(50% - 80px);
    border-right: 20px solid var(--light);
  }
  .int_menu > *, .ext_menu > * {
    width: 60px;
  }
  input[type="radio"]:checked:not(:default) ~ .int_menu,
  input[type="radio"]:checked:not(:default) ~ .title {
    transform: translateX(calc(-50vw + 80px));
  }
  input[type="radio"]:checked:not(:default) ~ .ext_menu,
  input[type="radio"]:checked:not(:default) ~ .brexit {
    transform: translateX(calc(50vw - 80px));
  }
  .content {
    padding: 2em 8em;
  }
  .brexit #cat:hover, 
  .brexit img:hover ~ #cat {
    top: calc(50% - 90px);
    width: 180px;
    height: 180px;
  }
  .content > div, .content > aside, .content > article {
    border: 2px solid;
    border-image-source: linear-gradient(to bottom right, white, 95%, #ccc);
    border-image-slice: 1;
    /* position: relative; */
  }
  /* #uparrow {
    position: absolute;
    bottom: 10px;
    right: -10px;
    color: #ccc;
  } */

  /* .content > div:hover::before, 
  .content > aside:hover::before, 
  .content > article:hover::before {
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f106";
    position: absolute;
    bottom: 0;
    right: -10px;
    color: #ccc;
    font-size: 2em;
  } */
  /* .content > div:hover #uparrow, 
  .content > aside:hover #uparrow, 
  .content > article:hover #uparrow {
    position: absolute;
    bottom: 200px;
    right: 200px;
  } */

  .gallery_grid {
    grid-auto-flow: dense;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: 200px;
  }
  .gallery_img, .gallery_img img {
    object-fit: cover;
    height: 100%;
    margin: 0;
    padding:  0;
  }
  .landscape {
    grid-column: span 2;
  }
  .portrait {
    grid-row: span 2;
  }
  .panorama {
    grid-column: span 4;
  }
  .square, .faves {
    grid-row: span 2;
    grid-column: span 2;
  }

}


@media screen and (min-width: 1000px) {

  #portfolio #portfolio_inner article {
    width: 47%;
  }

}


@media screen and (min-width: 1200px) {

  .gallery_grid {
    grid-gap: 10px;
  }


  .content > div, .content > aside, .content > article {
    width: 900px;
  }

  /* input#home_button:checked ~ [class$=' home'],
  input[id^='about']:checked ~ [id='about'],
  input[id^='portfolio']:checked ~ [id='portfolio'],
  input[id^='cheats']:checked ~ [id='cheats'],
  input[id^='images']:checked ~ [id='images'],
  input[id^='cats']:checked ~ [id='cats'],
  input[id^='secret']:checked ~ [id='secret'] 
  {
    display: inline-block;
  }

  .content div, .content aside, .content article {
    width: 45%;
    display: inline-block;
    margin: 2%;
  }


  .up {
    float: right;
  } */

}