@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Oswald:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&family=Noto+Serif+Display:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --background-color: white;
  --text-color: black;

  --max-width: 1200px;

  /*font-family: "Noto Sans Display", sans-serif;*/
}

*, *::before, *::after {
    box-sizing: border-box;
    /*font-family: "Noto Sans Display", sans-serif;*/
}

p {
  max-width: 600px;
}

body {
  /*background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 255, 0.5),rgba(128, 0, 255, 0.5), rgba(255, 0, 255, 0.5));*/
  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 255, 0.5),rgba(128, 0, 255, 0.5), rgba(255, 0, 255, 0.5)), url('/images/tentical-dark-lense-720x1080.png');
  /*background-image: linear-gradient(rgba(0, 0, 128, 0.5), rgba(128, 0, 128, 0.5)), url('/images/tentical-dark-lense-720x1080.png');*/
  background-size: cover;
  background-position: center;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: rgb(13, 17, 23); /* black; */
    --text-color: rgb(230, 237, 243); /*white;*/
    --good-red: rgb(255,1,88);
  }

  a,
  a:link,
  a:visited,
  a:active {
    color: rgb(68, 147, 248); /*#4bb8d3;*/
  }

  index a,
  index a:link,
  index a:visited,
  index a:active {
    color: #fd9b30;
  }

  index a:hover {
    color: #fdbf7c;
  }

  aside nav a,
  aside nav a:link,
  aside nav a:visited,
  aside nav a:active {
    color: #fd9b30;
  }

  aside nav a:hover {
    color: #fdbf7c;
  }

}

h1 {
  /*
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  font-style: normal;
  */
  /*margin: 0px;
  padding: 0px;*/
}

h2 {
  /*
  color: #ffd900;
  color: #01ffb2;
  */
}

q {}

header {
  border-bottom: 1px solid rgb(68, 68, 68);
}

footer {
  border-top: 1px solid rgb(68, 68, 68);
  padding-top: 8px;
}

aside {
  grid-area: aside;
    padding-right: 8px;
}

aside table {
  grid-area: table;

  padding-top: 12px;

  display: inline-block;
  max-width: 60%;
}

aside ul {
  
clear: both;
  
  
}

aside nav {
  
}

aside p {
  
}

aside img#profile {
  

  border: 1.5px solid var(--text-color);
  border-radius: 50px;
  float: left;
  margin-top: 16px;
  margin-right: 6px;
  margin-bottom: 12px;
}

/*
a {
  background-color: var(--background-color);
  color: var(--text-color);
}
*/
body {
  font-family: "Montserrat", sans-serif;
  font-size: 12pt;

  background-color: var(--background-color);
  color: var(--text-color);
}

body {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width);
  display: grid;
  padding: 12px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.01fr auto auto auto auto auto auto auto auto auto auto auto auto auto 0.2fr;
  /*grid-template-rows: repeat(12, 1fr);*/

  /*
  grid-template-areas:
    "header header header header"
    "picture overview overview overview"
    "picture main main main"
    "social main main main"
    "encryption-key main main main"
    "index main main main"
    "quote main main main"
    "license main main main"
    "footer footer footer footer";
*/
  grid-template-areas:
    "header header header header"
    "aside main main main"
    "footer footer footer footer";

  grid-gap: 0.2rem;
  grid-gap: 0;

  grid-auto-flow: dense;
}





a {
  text-decoration: underline;
}



a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

main article img {
    border: 1px solid #333333;
    border-radius: 8px;
}





strong {
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    bottom: -0.125rem;
    left: -0.5rem;
    right: -0.5rem;
    height: 0.75rem;

    z-index: -1;

    /*
    background-image: url('/images/underline.svg');
    background-repeat: no-repeat;
    background-size: cover;
    */
    mask-image: url('/images/underline.svg');
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: rgb(255,1,88);
  }
}

p > strong {
  font-weight: 400;  

  &::after {
    
    bottom: -0.2rem;
    height: 0.5rem;
    left: -0.25rem;
    right: -0.25rem;
  }
}





main {
  grid-area: main;
}


#playlist-link {
  font-size: smaller;
}


.pgp-key {
  border-collapse: collapse;
  font-size: smaller;
}

.pgp-key {
  grid-area: encryption-key;
  margin-top: 12px;
}

.pgp-key a:visited {
  /*color: var(--text-color);*/
}

.pgp-key a:active {
  /*color: var(--text-color);*/
}

.pgp-key a:hover {
  /* color: var(--text-color); */
}

.pgp-key table {
  border-collapse: collapse;
}

.pgp-key table tr td {
  margin: 0;
  padding: 0;
}

.pgp-key table tr td.icon {
  padding-right: 2px;
  vertical-align: text-bottom;
}

.pgp-key table tr td.text {
  vertical-align: top;
}

.pgp-key table tr td.text a {
  color: var(--text-color);
}





index {
  grid-area: index;
}



footer {
  grid-area: footer;
  font-size: smaller;
}

footer p {
  margin: 0;
  padding: 0;
}

footer p img {
  vertical-align: middle;
}

footer copyright {
  margin-left: auto;
  margin-right: auto;
}

copyright {}

copyright a {
  color: var(--text-color)
}

copyright a:visited {
  color: var(--text-color)
}

copyright a:active {
  color: var(--text-color)
}

copyright a:hover {}









.thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 0;
}

.thumb {
  width: 1fr;
}

.thumb-wide {
  width: 3fr;
  grid-column: 1 / span 3;
}

.thumb img {
  width: 100%;
}

.thumb {
  padding-top: 2px;
  padding-bottom: 2px;
}

.thumb h4 a {
  text-decoration: none;
}

.thumb h4 {
  margin: 0;
  padding: 0;
}

.thumb p {
  margin: 0;
  padding: 0;
  padding-top: 2px;
  padding-bottom: 2px;
}



/*
h1 {
  font-family: Oswald, sans-serif;
  font-weight: 500;
  margin: 0;
  padding: 0;
}

h4 {
  font-family: Oswald, sans-serif;
  font-weight: 500;
  margin: 0;
  padding: 0;
}
*/

acronym {
  text-decoration: none;
}

header {
  grid-area: header;
}

header nav,
footer nav {
  margin-left: auto;
  margin-right: auto;
  /*max-width: --max-width;*/
  /*grid-area: nav;*/
  overflow-x: hidden;
}

header nav a,
footer nav a {
  /*color: var(--text-color);*/
}

header nav a:visited,
footer nav a:visited {
  /*color: var(--text-color);*/
}

header nav ul,
footer nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  position: relative;
  left: -1px;
  padding: 0;
}

header nav ul li,
footer nav ul li {
  margin: 0;
  padding: 0;
  display: inline-block;
  line-height: 1;
  padding: 0 0.5em;
  padding-right: 4px;
  margin-bottom: 1em;
  border-left: 1px solid;
  font-size: 10pt;
}

header nav ul li:first-child,
footer nav ul li:first-child {
  padding: 0;
  padding-left: 2px;
  padding-right: 4px;
}

.columns2 {
  column-count: 2;
}

.image-wrap {
    width: 60%;
            float: left;
            margin-right: 20px;
            margin-bottom: 10px;
        }
        .image-wrap img {
            width: 100%;
            max-width: 520px;
            height: auto;
        }

        #resolution-display {
          position: fixed;
          bottom: 10px;
          right: 10px;
          background-color: rgba(0, 0, 0, 0.7);
          color: white;
          padding: 5px 10px;
          border-radius: 5px;
          font-family: Arial, sans-serif;
          font-size: 14px;
          z-index: 9999;
      }


@media only screen and (max-width: 1115px) {

  aside table {
    padding-top: 0px;
    max-width: 100%;
  }

  aside img#profile {
  
    margin-top: 16px;
    margin-bottom: 0px;
  }
}

@media only screen and (max-width: 550px) {

  header ul li:nth-last-child(1),
  header ul li:nth-last-child(3),
  footer ul li:nth-last-child(1),
  footer ul li:nth-last-child(3) {
    display: none;
  }

  header {
    /*border-bottom: none;*/
  }

  body {
    grid-template-columns: 1fr 1fr;
    /*grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;*/
    grid-template-rows: auto;
    grid-template-areas:
      "header header"
      "main main"
      "aside aside"
      "license license"
      "footer footer";
  }

  header {}

  aside {
    border-top: 1px solid #333333;
  }

  aside table {
    padding-top: 16px;
    max-width: 70%;
  }
  aside img#profile {
    margin-bottom: 12px;
    margin-right: 12px;
  }

  aside ul {
      columns: 2;
      -webkit-columns: 2;
      -moz-columns: 2;
  }

  picture {
    text-align: center;
  }

  index {
    /*display: none;*/
  }

  main {
    /*display: none;*/
  }

  /*
  picture {
    display: none;
  }
  social {
    display: none;
  }
  */
  /*
  nav {
    display: none;
  }
*/
  thumbs {
    grid-template-columns: .5fr .5fr;
    grid-template-rows: auto;
  }

  thumb {
    width: .5fr;
  }

  thumb.wide {
    width: 1fr;
    grid-column: 1 / span 2;
  }

  thumb img {
    width: 100%;
  }

}

code {
  background-color: rgba(110, 118, 129, 0.4);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
box-sizing: border-box;
color: rgb(230, 237, 243);
color-scheme: dark;
display: inline;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
font-size: 13.6px;
height: auto;
line-height: 20.4px;
list-style-type: disc;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-wrap: break-word;
padding-bottom: 2.72px;
padding-left: 5.44px;
padding-right: 5.44px;
padding-top: 2.72px;
text-align: left;
text-size-adjust: 100%;
text-wrap: wrap;
white-space-collapse: break-spaces;
width: auto;
}



.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;

  z-index: -1;

  background: linear-gradient(0deg, #000000 0%, #1e0639 50%, #4b0f70 100%);
}

.scene {
  width: 100vmin;
  height: 100vmin;
  /*perspective: 1500px;*/
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-50vmin);
  animation: rotate 20s infinite linear;
}

.cube__face {
  position: absolute;
  width: 100vmin;
  height: 100vmin;
  border: 2px solid rgba(255,0,255,0.5); /*rgba(255,255,255,0.7);*/
  opacity: 0.7;
  background: transparent;
}

.cube__face--front  { transform: rotateY(  0deg) translateZ(50vmin); }
.cube__face--right  { transform: rotateY( 90deg) translateZ(50vmin); }
.cube__face--back   { transform: rotateY(180deg) translateZ(50vmin); }
.cube__face--left   { transform: rotateY(-90deg) translateZ(50vmin); }
.cube__face--top    { transform: rotateX( 90deg) translateZ(50vmin); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(50vmin); }

/* Adding diagonal lines for more detail */
/*
.cube__face::before,
.cube__face::after {
  content: '';
  position: absolute;
  width: 141.4%;
  height: 2px;
  background: rgba(255,255,255,0.5);
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
}
*/

.cube__face::before {
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.cube__face::after {
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

@keyframes rotate {
  0% { transform: translateZ(-50vmin) rotateX(  0deg) rotateY(  0deg); }
  100% { transform: translateZ(-50vmin) rotateX(360deg) rotateY(360deg); }
}

.grid1 {
  perspective: 500px;


  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image: 
      linear-gradient(to right, rgba(255,0,255,0.5) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,0,255,0.5) 1px, transparent 1px);
  background-size: 50px 50px;
  transform: rotateX(-60deg);
  transform-origin: left;
  
}

.grid2 {
  perspective: 500px;


  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image: 
      linear-gradient(to right, rgba(255,0,255,0.5) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,0,255,0.5) 1px, transparent 1px);
  background-size: 50px 50px;
  transform: rotateX(60deg);
  transform-origin: left;
  
}

/* define a background canvas container named container */

#container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
  z-index: -1;
}