@import url('https://fonts.googleapis.com/css?family=DM+Mono|Trirong|Jacquard 12|Geo');

* {
   --header-height: 100px;
   --nav-height: 100px; /* when in mobile */
   --footer-height: 100px;
   --content-margin: 10%;
   --content-depth: 1000px; /*lower = more extreme effect*/

   /* box params */
   --margin: 2px;
   --border: 1px;
   --padding: 15px;
   --fillet: 5px;
   --animation-duration: 0.3s;
   
   perspective: var(--content-depth);
}

html, body {
   margin: 0px; 
   padding: 0px;
}
html {
   max-width: 100%;
   min-height: 100%;
   overflow-x: hidden;
   overflow-y: hidden;
}
body {
   background-color: var(--bg-color, gainsboro);
   background-image: url(https://bettysgraphics.neocities.org/images/backgrounds/stars%201.gif); /* temp */
   /* background-size: 64px; */
   background-repeat: repeat;
   background-attachment: fixed;
   backdrop-filter: invert();
   animation: bgScroll 20s linear infinite;

   /* FONT */
   font: 16px "garamond", serif; /* garamond, dm mono, trirong, geo */
   color: black;
}
@keyframes bgScroll {
  0% {background-position: 0px 0px}
  100% {background-position: 0px 234px}
}
::selection {
   background-color: var(--accent-color);
   color: lch(from var(--accent-color) round((100 - l), 100) 0 0);
}

header {
   height: var(--header-height, 100px);
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   background: radial-gradient(at 50% 0%, white, transparent);
   /* background-color: white; */
   /* box-shadow: inset 0px 0px 15px 3px rgba(0, 0, 0, 0.30); */
   font: 60px "garamond", monospace; /* jacquard 12, garamond */
   font-variant: small-caps;
}

main {
   height: calc(100vh - var(--header-height) - var(--footer-height));
   margin: 0 var(--content-margin) 0 var(--content-margin);
   display: grid;

   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

   > .box {
      margin: var(--margin);
      border: var(--border) solid var(--accent-color, black);
      color: var(--text-color, black);
      padding: var(--padding);
      box-sizing: border-box;
      scrollbar-color: var(--accent-color) var(--bg-color);
      scrollbar-width: thin;

      border-radius: var(--fillet, 0);

      background-color: var(--color, white);
      box-shadow: 0px 0px var(--accent-color);
      transition: var(--animation-duration);

      text-align: justify;
      hyphens: auto;

      z-index: var(--z, 0);

      overflow-y: auto;

      &>img {
         object-fit: contain;
      }}

      > .box:hover {
         /*scale: 1.05; effect 1*/

         /* translate: -5px -5px;*/
         box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.30);

         z-index: calc(var(--z, 0) + 2);
      }

   /* Used to add height */
   > .space {
      margin: calc(var(--margin) + var(--border));
      padding: var(--padding);
      box-sizing: border-box;

      user-select: none;
   }

   /* here, x0 starts in the middle! positive is left and negative is right */
   > .float {
      position: absolute; 

      top: var(--y0, 200px);
      left: var(--x0, 0); 
      right: 0; 
      width: var(--x);
      margin: auto;
      z-index: var(--z, 1);
   }

   > .a {grid-area: a;}
   > .b {grid-area: b;}
   > .c {grid-area: c;}
   > .d {grid-area: d;}
   > .e {grid-area: e;}
   > .f {grid-area: f;}
   > .g {grid-area: g;}
   > .h {grid-area: h;}
   > .i {grid-area: i;}
   > .j {grid-area: j;}
   > .k {grid-area: k;}
   > .l {grid-area: l;}
   > .m {grid-area: m;}
   > .n {grid-area: n;}
   > .o {grid-area: o;}
   > .p {grid-area: p;}
   > .q {grid-area: q;}
   > .r {grid-area: r;}
   > .s {grid-area: s;}
   > .t {grid-area: t;}
   > .u {grid-area: u;}
   > .v {grid-area: v;}
   > .w {grid-area: w;}
   > .x {grid-area: x;}
   > .y {grid-area: y;}
   > .z {grid-area: z;}
}

/* mobile display */
@media (max-width: 600px) {
   main {
     margin: 0;
     height: calc(100vh - var(--header-height) - var(--footer-height) - var(--nav-height));
   }
   nav {
      height: var(--nav-height)
   }
   .bookmark { /* add properties for mobile-display nav here. ie bookmarks at top instead of sides */
      position: static;
      left: auto;
      right: auto;
   }
}

img {
   /* shape-outside parameterized in html element style attribute */
   shape-margin: var(--padding);
}

nav {
   .bookmark {
      position: fixed;
      top: 5vh;
      height: 75px;
      width: 250px;
      transition: var(--animation-duration);
      z-index: 3;
   }

   .left {left: calc(var(--content-margin) * -0.5);}

   .right {right: calc(var(--content-margin) * -0.5);}

   .left:hover {left: calc(var(--content-margin) * 0.5);}

   .right:hover {right: calc(var(--content-margin) * 0.5);}
}

footer {
   height: var(--footer-height, 100px);
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   background: radial-gradient(at 50% 100%, white, transparent);
}