:root {
   --offwhite: whitesmoke;
   --white: white;
   --firered: rgb(215 84 68);
   --smokered: rgb(143, 56, 44);
   --smokered-06: rgba(215, 84, 68, 0.6);
   --crimson: crimson;
   --pad3: 3rem;
   --pad6: calc(2 * var(--pad3));
   --linkred: rgb(226, 124, 144);
   --techblue: rgba(221, 230, 247, 0.76);
   --techblue-85: rgba(221, 230, 247, 0.85);
}

html {
   background: var(--white);
}

body {
   margin: 0;
   display: grid;
   grid-template-columns: 1fr;
   width: 100%;
   height: 100%;
   justify-content: center;
   align-items: center;
   font-size: 1.25rem;
   position: absolute;
   font-family: 'Open Sans', sans-serif;
}

h2,
h4 {
   margin: 0;
}

h4 {
   margin-top: 1rem;
}

a {
   display: block;
}

main {
   max-width: 100dvw;
   background: url('../images/tech.avif') no-repeat center calc(0% - 3.5dvw);
   background-size: 100% auto;
   justify-self: center;
   align-self: start;
   display: grid;
   align-items: start;
   position: absolute;
   z-index: 1;
   transition: all 200ms ease;

   &.hue {
      &:hover {
         filter: hue-rotate(45deg);
      }
   }

   >.main-wrapper {
      display: grid;
      grid-template-columns: 1fr;
      width: calc(100% - var(--pad6));


      >.logo {
         width: calc(100% - var(--pad6));
         padding: 2rem 0 0 var(--pad3);
      }

      section {
         padding: 2rem 3rem;

         .published {
            text-align: right;
            display: inline;
            font-size: 0.8rem;
            padding: 1rem 0 0 0;
            font-style: italic;
            color: var(--crimson);

            >time {
               display: inline;
            }
         }




         &.inbox-link {
            display: grid;
            justify-content: center;
            background: rgba(255, 255, 255, 0.733);


            >a {
               margin-top: 2rem;
               display: grid;
               justify-content: center;

               >img {
                  width: 100%;
                  transition: filter 200ms ease;
                  will-change: filter;

                  &:hover {
                     filter: sepia(0.6) hue-rotate(10deg);
                  }
               }
            }
         }
      }


      >.text-section {
         display: grid;
         background: var(--techblue-85);



         >h2 {
            font-size: 1.3rem;
         }

         &:first-of-type {
            margin-top: 22dvw;
         }

         >ul {
            >li {
               margin-left: -1.5rem;
               font-size: 1.1rem;
            }
         }


         &.careers {
            background: rgba(255, 255, 255, 0.9);
            background-image: url(careers.avif);
            background-repeat: no-repeat;
            background-position: right bottom;
            background-size: auto 70%;
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto 1fr;
            min-height: 30rem;

            >h2 {
               color: var(--firered);
               margin-bottom: 1rem;
            }

            >p {
               font-size: 1rem;
               width: 55%;
            }

            >span {
               font-size: 0.8rem;

               >h3 {
                  margin: 1rem 0;
                  display: inline-block;
                  font-size: 1.35rem;
               }

               >span {
                  color: var(--firered);
                  padding: 0 0.5rem;
               }
            }


            >ul {
               height: auto;
               width: 60%;

               >li {
                  color: var(--firered);
                  margin: 0 0 2rem 0;

               }
            }

            & div {
               display: grid;
               align-items: center;
               justify-content: center;

               &:first-of-type {
                  display: grid;

                  >p {
                     font-size: 0.9rem;
                     margin: 0;
                  }
               }

               &:last-of-type {
                  display: none;
                  grid-column: 1 / 3;
               }
            }
         }

      }
   }
}

main {
   >.main-wrapper {
      transition: all 800ms ease;
      width: 100%;

      >:is(svg, section) {
         transition: all 400ms ease;
      }

      >.contact {
         background: rgba(66, 71, 94, 0.623);
         backdrop-filter: invert(1) contrast(0.5);
         color: rgb(255, 255, 255);
         text-shadow: #222 0.1rem 0.1rem 0.1rem;
         overflow-x: hidden;

         >address {
            display: grid;
            justify-content: start;
            padding-top: 1rem;

            >a {
               text-align: left;


               &:link,
               &:visited {
                  color: white;
                  text-decoration: none;
               }

               &:hover {
                  color: rgb(202, 248, 202);
               }
            }
         }


         >.em {
            padding-top: 1rem;
            overflow-x: hidden;
            display: grid;
            justify-items: start;

            >a {
               word-wrap: break-word;
               display: block;

               &:visited,
               &:link {
                  color: white;
                  text-decoration: none;
               }
            }

         }

      }
   }

   &:hover {
      >.main-wrapper {
         >section:not(.inbox-link, .contact) {
            filter: hue-rotate(45deg);
         }
      }
   }
}

a:link {
   color: var(--smokered);
   text-align: right;
   display: block;
   position: relative;
   float: right;
}


a:visited {
   color: var(--smokered);
}


a:hover {
   color: #333;
}


a:active {
   color: blue;
}


canvas {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
}

.lower-section {
   width: calc(100% - var(--pad6));
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(16%, 1fr));
   grid-template-rows: 1fr;
   grid-auto-flow: row;
   gap: 0.5rem;
   justify-items: start;
   margin-top: 0;
   margin-bottom: 0;
   display: none;

   >h3 {
      grid-column: 1 / -1;
      margin-bottom: 10px;
   }

   >a {
      height: 0;

      >svg {
         width: 100%;
         height: fit-content;
         display: block;
         aspect-ratio: 1/1;
      }

      >img {
         width: 100%;
      }
   }
}



footer {
   height: 4rem;
   position: relative;
   /* width: calc(100% - var(--pad6)); */
   bottom: 0;
   top: auto;
   color: white;
   margin-top: 4rem;
   /* left: var(--pad3); */




   >.triangle {
      clip-path: polygon(0% 100%, 100% 100%, 98% 30%, 0% 0%);
      background: #c6cbde;
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: -1;
      top: 0;
      left: 0;
   }

   .foot {
      height: 4rem;
      align-content: center;
      bottom: 0;
      left: 2rem;
      top: auto;
      position: absolute;
      display: grid;

      grid-auto-flow: column;
      grid-auto-columns: fit-content;
      /* grid-template-columns: auto auto auto; */

      >a {
         text-decoration: none;
         margin: 0.5rem 1.8rem 0 0;
         font-size: 1.1rem;



         &:link {
            color: var(--crimson);
         }

         &:active {
            color: var(--firered);
         }

         &:visited {
            color: var(--crimson);
         }

         &:hover {
            color: var(--linkred);
         }
      }
   }
}



/* TABLET AND DESKTOP */
@media (width > 40em) {
   main {
      width: 50%;

      >.main-wrapper {
         >.logo {
            width: auto;
            padding: 1rem 1rem;
         }

         >.text-section {
            background: var(--techblue);

            &.contact {
               background: rgba(66, 71, 94, 0.623);
            }

            >h2 {
               font-size: revert;
            }

            >ul {
               >li {
                  margin-left: 0;
                  font-size: 1.25rem;
               }
            }
         }
      }
   }

   .lower-section {
      width: 100%;
      grid-template-columns: repeat(auto-fill, minmax(8%, 1fr));
   }

   footer {
      .foot {

         >a {
            margin: 0.5rem 2.4rem 0 0;
            font-size: 1.25rem;

         }
      }
   }
}

/* TABLET ONLY */
@media (width >=40em) and (width <=64em) {
   main {
      width: 65%;

      >.main-wrapper {
         /* >.logo {
            width: auto;
            padding: 1rem 1rem;
         } */

         >.text-section {
            >h2 {
               font-size: 1.4rem;
            }
         }
      }
   }
}