@layer reset, layout, components;
@layer reset {
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
}
@layer layout {
  :root {
    --background-gradient: linear-gradient(180deg, #2d2d2d, #2a2424, #201919);
    --box-shadow-side: 2px 0px 6px rgba(0,0,0,0.3);
    --background: #1c1c1c;
    --surface: #262424;
    --text: #F5E8D8;
    --text-accent: #aa9f91;
    --text-field-background: #3d3b3b;
    --text-field-hover: #635f5f;
    --text-field-focus: var(--text);
    --box-shadow-side: 2px 0px 2px rgba(0,0,0,0.3);
    --box-shadow-normal: 0px 1px 2px rgba(0,0,0.3);
    --accent1: #ff6f61;
    --accent1-hover: #a5463d;
    --accent2: #108f80;
    --accent2-hover: #07554c;
    --accent3: #FF4500;
    --accent3-hover: #a12c02;
    --gradient: linear-gradient(90deg, hsl(0, 40%, 90%) 15%, hsl(0, 20%, 50%) 25%, hsl(0, 40%, 90%) 40%, hsl(0, 20%, 50%) 60%, hsl(0, 40%, 90%) 70%, hsl(0, 20%, 50%) 80%, hsl(0, 40%, 90%) 100%);
  }
}
@layer layout {
  @font-face {
    font-family: "startingletter";
    src: url("/Romantiqueinitials-K7wX.ttf");
  }
  :root {
    font-size: 16px;
  }
  a.linkColored {
    color: var(--accent1);
    text-decoration: none;
  }
  a.linkColored:hover {
    color: var(--accent1-hover);
  }
  h1, h2, h3, h4, h5, h6, .title {
    font-family: "Macondo Swash Caps", cursive, serif;
    color: var(--text);
  }
  p, span, button, input, li, a .button, label {
    font-family: "Quicksand", sans-serif;
    font-size: 1rem;
    color: var(--text);
  }
  .title {
    color: var(--text);
    font-family: "Quicksand", sans-serif;
  }
  .subtext {
    color: var(--text-accent);
  }
  h1 {
    font-size: 1.7rem;
  }
  h2 {
    font-size: 1.3rem;
  }
  h3 {
    font-size: 1.2rem;
  }
  h4 {
    font-size: 1.1rem;
  }
  h5 {
    font-size: 1.1rem;
  }
  h6 {
    font-size: 1rem;
  }
}
@layer layout {
  footer {
    background: var(--surface);
    padding-block: 20px;
    padding-inline: 20px;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
  footer ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
    list-style-type: none;
  }
  footer ul a {
    text-decoration: none;
    color: var(--text);
  }
  footer ul a:hover {
    color: var(--text-accent);
  }
  @media (max-width: 1000px) {
    footer h2 {
      text-align: center;
    }
    footer ul {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
      grid-template-rows: repeat(auto-fill, 1fr);
      gap: 10 px;
      column-gap: 20px;
    }
  }
  .hamburger {
    display: none;
  }
  @media (max-width: 1000px) {
    .hamburger {
      display: block;
      position: fixed;
      top: 1rem;
      right: 1rem;
      cursor: pointer;
      z-index: 10;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .hamburger:hover div {
      transition: transform 0.2s, opacity 0.2s;
      background-color: var(--accent1-hover);
      opacity: 1;
    }
    .hamburger.show > div:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }
    .hamburger.show > div:nth-child(2) {
      opacity: 0;
    }
    .hamburger.show > div:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg); /* total container height (2+5+2+5+2=16) - bar height (2px). / 2 = 7. */
    }
    .hamburger > div {
      width: 2rem;
      height: 2px;
      background-color: var(--accent1);
    }
  }
  .navbar#navbar {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    background: var(--background-gradient);
    box-shadow: var(--box-shadow-side);
    height: 100dvh; /* always shows 100% of the screen, no matter where you are. And overflow inside the box is just scroll inside this box, so just fine. */
    /* and since we are not scrolling alongside the content here, we are fine. */
    /*         box-shadow: var(--box-shadow-side);
     */
    position: relative; /* to bring back box-shadow, lol. */
    display: flex;
    flex-direction: column;
    padding: 20px 18px 30px 20px;
  }
  @media (max-width: 1000px) {
    .navbar#navbar {
      display: none;
    }
    .navbar#navbar.show {
      display: flex;
    }
  }
  .navbar#navbar ul {
    list-style-type: none;
  }
  .navbar#navbar a {
    text-decoration: none;
  }
  .navbar#navbar {
    /*         > div, > ul:is(:not(:last-child)) {
                border-bottom: 1px solid var(--border);
                padding-block: 18px;
            } */
  }
  .navbar#navbar .primary {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--accent1);
  }
  .navbar#navbar .links, .navbar#navbar .primary {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
  }
  .navbar#navbar .links span.errormsg, .navbar#navbar .primary span.errormsg {
    color: var(--text);
  }
  .navbar#navbar .links a, .navbar#navbar .primary a {
    display: block;
    width: 100%;
    padding-block: 10px;
    gap: 0px;
    font-size: 1rem;
    color: var(--text);
    border-radius: 16px;
    transition: padding-inline 0.2s, color 0.2s, background-color 0.2s;
  }
  .navbar#navbar .links a:hover, .navbar#navbar .primary a:hover {
    padding-inline: 10px;
    position: relative;
    color: var(--text-accent);
    background-color: var(--surface);
  }
  .navbar#navbar .logo-con {
    border-bottom: 2px solid var(--accent1);
    padding-bottom: 10px;
  }
  .navbar#navbar .logo-con .logo > a {
    color: var(--text);
    text-decoration: none;
    transition: color 0.2s;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
  }
  .navbar#navbar .logo-con .logo > a:hover {
    color: var(--text-accent);
  }
  .navbar#navbar .side {
    margin-top: auto; /* eats the last space, lol. */
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .navbar#navbar .side .btns {
    display: flex;
    flex-direction: row;
    gap: 10px;
  }
  .navbar#navbar .side .btns > button {
    flex: 1;
    border-radius: 4px;
    outline: none;
    border: 1px solid transparent;
    padding-inline: 8px;
    padding-block: 8px;
    cursor: pointer;
    transition: background-color 0.2s, background-color 0.2s;
    background-color: var(--accent2);
  }
  .navbar#navbar .side .btns > button a {
    color: var(--text);
  }
  .navbar#navbar .side .btns > button:hover {
    /*                         color: var(--text-accent);
     */
    background-color: var(--accent2-hover);
  }
  .navbar#navbar .side .btns > button:last-child {
    background-color: var(--accent2);
  }
  .navbar#navbar .side .btns > button:last-child:hover {
    background-color: var(--accent2-hover);
  }
  /*     .app {
          height: 100dvh; */ /* scroll controlled by content div and such. */
  /*         width: 100%;


          display: grid;
          grid-template-columns: minmax(200px, 250px) 1fr;
          grid-template-rows: auto;



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


      .content {

          margin-block: 15px;
          margin-inline-end: 15px;
          border-radius: 20px;

          background-color: var(--surface);


          overflow-x: hidden; */
  /* overflow-y: auto; */ /* auto determines based on content lenght. */
  /*         scrollbar-width: auto; */
  /* differentiated background for nice border effect when padding or margin is added appropriately. */
  /*      main {
           width: min(95%, calc(100% - 30px));
           background-color: var(--surface);

           margin: 20px auto 0px auto;

       }



       footer {
           width: min(95%, calc(100% - 30px));
           margin: 20px auto 0px auto;
           background-color: var(--background); 
       }

   }



   .gradient {
       height: 1px;

       margin-block: 12px;

       background: var(--gradient);
       width: 100%;



       &.bigger {
           height: 2px;
       }
   } */
  body {
    min-height: 100dvh;
  }
  .content {
    height: 100dvh;
    width: 100%;
    background-color: var(--background);
    display: grid;
    grid-template-columns: minmax(250px, 300px) 1fr;
    grid-template-rows: 100%;
  }
  @media (max-width: 1000px) {
    .content {
      grid-template-columns: 1fr;
    }
  }
  .content > main {
    /*              margin-block: 20px;
                margin-inline: 20px;
                border-radius: 20px;
                */
    /*             padding-block: 20px;
                padding-inline: 20px; */
    background: linear-gradient(to bottom, var(--background));
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
  }
  .content .maincon {
    width: min(1000px, 100% - 40px);
    margin: 0 auto;
  }
  .content .maincon:has(.con404) {
    height: 100%;
  }
}
@layer components {
  .banner {
    background-color: var(--accent3);
    color: var(--text);
    padding-block: 5px;
    padding-inline: 10px;
    font-size: 1rem;
    width: 100%;
    position: relative;
  }
  .banner .close {
    top: 5px;
    right: 10px;
    cursor: pointer;
    position: absolute;
  }
  .banner .text {
    display: block;
    text-align: center;
  }
  .banner .text a {
    text-decoration: underline;
    color: var(--text);
  }
  .banner .text a:hover {
    color: var(--text-accent);
  }
}
@layer components {
  content: "";
  position: absolute;
  bottom: 0px;
  right: 0px;
  left: 0px;
  height: 1px;
  width: 100%;
  background: var(--gradient);
  .newsletter#newsletter h1:has(+ p) {
    margin-bottom: 10px;
  }
  .newsletter#newsletter h1 + p {
    margin-bottom: 10px;
  }
  .newsletter#newsletter .erroremail {
    display: none;
    padding: 15px 15px;
    text-align: center;
    background-color: rgb(128, 5, 5);
    box-shadow: var(--box-shadow-normal);
  }
  .newsletter#newsletter.mistake .erroremail {
    display: block;
  }
  .basicInputBar button {
    transition: box-shadow 0.2s;
  }
  .basicInputBar button:focus {
    box-shadow: var(--box-shadow-normal);
  }
  .basicInputBar input[type=submit] {
    border: 1px solid var(--accent1);
    border-left: 0px;
    border-radius: 0px 4px 4px 0px;
    background-color: var(--accent1);
    color: var(--text);
    padding-block: 8px;
    padding-inline: 6px;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
  }
  .basicInputBar input[type=submit]:hover {
    background-color: var(--accent1-hover);
    border: 1px solid var(--accent1-hover);
    border-left: 0px;
    /*                 box-shadow: var(--box-shadow-normal);
     */
  }
  .basicInputBar input[type=text] {
    outline: none;
    border-radius: 4px 0px 0px 4px;
    padding-block: 8px;
    padding-inline: 8px;
    border: 1px solid var(--accent1);
    border-right: 0px;
    transition: background-color 0.2s, box-shadow 0.2s;
    background-color: var(--text-field-background);
    color: var(--text);
  }
  .basicInputBar input[type=text]::placeholder {
    transition: color 0.2s;
    color: var(--text-accent);
  }
  .basicInputBar input[type=text]:hover {
    background-color: var(--text-field-hover);
  }
  .basicInputBar input[type=text]:focus {
    background-color: var(--text);
    color: var(--background);
    box-shadow: var(--box-shadow-normal);
  }
  .basicInputBar {
    display: flex;
    flex-direction: row;
    padding-top: 10px;
  }
  .basicInputBar input {
    width: 100%;
  }
  .basicInputBar input[type=text]:has(+ input[type=text]) { /* anyone that has an input after it. */
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  .basicInputBar input[type=text] + input[type=text] { /* anyone after an input.  */
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
  .basicInputBar input[type=submit] {
    flex: 1;
  }
  .basicInputBar input[type=text] {
    flex: 2;
  }
  input[type=submit] {
    border: 1px solid var(--accent1);
    border-left: 0px;
    border-radius: 0px 4px 4px 0px;
    background-color: var(--accent1);
    color: var(--text);
    padding-block: 8px;
    padding-inline: 6px;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
  }
  input[type=submit]:hover {
    background-color: var(--accent1-hover);
    border: 1px solid var(--accent1-hover);
    border-left: 0px;
    /*                 box-shadow: var(--box-shadow-normal);
     */
  }
  input.styled {
    outline: none;
    border-radius: 4px 4px 4px 4px;
    padding-block: 8px;
    padding-inline: 8px;
    border: 1px solid var(--accent1);
    /*             border-right:0px;
     */
    transition: background-color 0.2s, box-shadow 0.2s;
    background-color: var(--text-field-background);
    color: var(--text);
  }
  input.styled::placeholder {
    transition: color 0.2s;
    color: var(--text-accent);
  }
  input.styled:hover {
    background-color: var(--text-field-hover);
  }
  input.styled:focus {
    background-color: var(--text);
    color: var(--background);
    box-shadow: var(--box-shadow-normal);
  }
  .sec {
    padding-block: 20px;
    position: relative;
    scroll-margin-top: 50px;
  }
  .sec::after {
    content: "";
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    height: 1px;
    width: 100%;
    background: var(--gradient);
  }
  .sec.without-border::after {
    display: none;
  }
  .potentialpic {
    height: 300px;
    margin-bottom: 10px;
  }
  .potentialpic img {
    height: 100%;
  }
  .article {
    width: min(800px, 100%);
    margin: 0 auto;
  }
  .article a {
    text-decoration: none;
    color: var(--accent1);
  }
  .article a:hover {
    color: var(--accent1-hover);
  }
  .article h1 {
    color: var(--accent1);
    text-align: center;
    text-align: start;
  }
  .article h1.headtitle {
    text-align: center;
    display: block;
    padding-block-end: 10px;
    position: relative;
    width: min(800px, 100%);
    margin: 0 auto;
  }
  .article h1.headtitle::after {
    bottom: 0px;
    right: 0px;
    left: 0px;
    height: 1px;
    width: 100%;
    content: "";
    position: absolute;
    background: var(--gradient);
  }
  .article article {
    padding-block-start: 10px;
  }
  .article article p:first-of-type:first-letter {
    color: var(--accent3);
    initial-letter: 3; /* maybe something with lh instead and display property or inline or span, idk. */
    /* Especially if in a nice, decorative font. */
    font-family: "startingletter", cursive;
    position: relative;
    padding: 0px 10px;
    /*         background-image: url("/ornate.svg");
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover; */
  }
  @media (max-width: 500px) {
    .article article p:first-of-type:first-letter {
      font-size: 1rem;
    }
  }
  .article p + p {
    margin-top: 10px;
  }
  .article article p {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.5;
  }
  @media (max-width: 500px) {
    .article article p {
      font-size: 0.8rem;
    }
  }
  .cats {
    display: grid; /* so overflowing child has a defined width, smh. */
    padding-block: 15px 10px;
  }
  .cats > .catscon {
    padding-block: 15px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 300px);
    grid-auto-rows: 1fr;
    gap: 20px;
    overflow-x: auto;
  }
  .cats > .catscon > article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-block: 20px;
    padding-inline: 15px;
    border-radius: 10px;
    box-shadow: var(--box-shadow-normal);
    background-color: var(--surface);
    color: var(--text);
    cursor: pointer;
  }
  .cats > .catscon > article:hover h3 {
    color: var(--text-accent);
  }
  .cats > .catscon > article h3 {
    transition: color 0.2s;
    text-align: center;
  }
  .cats > .catscon > article a {
    text-decoration: none;
  }
  .latests {
    display: grid; /* so overflowing child has a defined width, smh. */
    padding-block: 15px 10px;
  }
  .latests > .latestscon {
    padding-block: 15px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    grid-template-rows: auto;
    grid-auto-rows: repeat(auto-fill, 1fr);
    gap: 20px;
    overflow-x: auto;
  }
  .latests > .latestscon > article {
    padding-block: 20px;
    padding-inline: 15px;
    border-radius: 10px;
    box-shadow: var(--box-shadow-normal);
    background-color: var(--surface);
    color: var(--text);
    cursor: pointer;
  }
  .latests > .latestscon > article:hover h3 {
    color: var(--text-accent);
  }
  .latests > .latestscon > article h3 {
    transition: color 0.2s;
    text-align: start;
  }
  .latests > .latestscon > article .subtext {
    padding-block: 6px;
  }
  .latests > .latestscon > article a {
    text-decoration: none;
  }
  .latests > .latestscon > article a {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    display: flex;
    height: 100%;
  }
  .latests > .latestscon > article p:last-of-type {
    margin-top: auto;
  }
  .faq .faqbox {
    margin-top: 10px;
    /*             width: min(300px, 100%);
     */
    background-color: var(--surface);
    border-radius: 12px;
    /* 
                display: grid;
                grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
                grid-template-columns: repeat(2, minmax(300px, 1fr)); */
  }
  @media (max-width: 800px) {
    .faq .faqbox {
      display: block;
    }
  }
  .faq .faqbox > article {
    padding-block: 15px;
    padding-inline: 10px;
    border-bottom: 1px solid var(--text-field-background);
  }
  .faq .faqbox > article:last-of-type {
    border-bottom: 0px;
  }
  .faq .faqbox > article:not(:first-of-type) {
    /*                     padding-block-start: 5px;
     */
  }
  .faq .faqbox > article p {
    display: none;
    color: var(--text-accent);
    padding-top: 7px;
  }
  .faq .faqbox > article p:is(.show) {
    display: block;
  }
  .faq .faqbox > article .top {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  @media (max-width: 1000px) {
    .faq .faqbox > article .top {
      grid-template-columns: 2fr 1fr;
    }
  }
  .faq .faqbox > article .top {
    cursor: pointer;
  }
  .faq .faqbox > article .top svg {
    color: var(--accent1);
    height: 25px;
    width: auto;
    cursor: pointer;
    margin-left: auto;
    margin-right: 0px;
  }
  .faq .faqbox > article .top h3 {
    text-align: start;
  }
  .articlepic {
    height: 200px;
    width: 100%;
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: var(--box-shadow-normal);
  }
  .articlepic:is(img) {
    object-fit: cover;
  }
  .articlepic:is(div) {
    background: linear-gradient(to bottom right, var(--accent1), var(--accent2-hover));
  }
  .featured a {
    text-decoration: none;
  }
  .featured .subtext {
    padding-bottom: 10px;
    padding-top: 0px;
  }
  .featured a > article {
    background-color: var(--surface);
    border-radius: 10px;
    box-shadow: var(--box-shadow-normal);
    padding-block: 15px;
    padding-inline: 20px;
    color: var(--text);
    width: min(300px, 100%);
  }
  .searchtitle {
    margin-top: 20px;
    font-size: 1.3rem;
  }
  .searchtitle span {
    font-size: 1.3rem;
  }
  .searchresults {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 10px;
  }
  @media (max-width: 500px) {
    .searchresults {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
  }
  .searchresults > article {
    background-color: var(--surface);
    box-shadow: var(--box-shadow-normal);
    padding-block: 15px;
    padding-inline: 12px;
    border-radius: 12px;
  }
  .searchresults > article a {
    text-decoration: none;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .searchresults > article .subtext {
    padding-block: 6px;
  }
  .searchresults > article p:is(:not(.subtext)) {
    margin-top: auto;
  }
  .support .supportcontent {
    padding-block-start: 5px;
    background-color: var(--background);
  }
  .support .supportcontent ul {
    /*                 list-style-type: square;
                    list-style-image: linear-gradient(to bottom, var(--accent1)); */
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .support .supportcontent {
    /*  .banner {
         background-color: var(--surface);
         border-radius: 12px;

         width: min(600px, 100%);



         margin-top: 10px;


         box-shadow: var(--box-shadow-normal);

         padding-block: 15px;
         padding-inline: 12px; */
    /* 
                form {
                    display: flex;
                    flex-direction: column;
                    gap: 15px;
                    padding-top: 15px;


                    .erroremail {
                        display:none;

                        padding: 15px 15px;

                        text-align: center;

                        background-color: rgb(128, 5, 5);

                        box-shadow: var(--box-shadow-normal);
                    }

                    &.mistake {

                        .erroremail {
                            display:block;
                        }


                    }

                }

                .slider {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;


                    label {
                        color: var(--text);
                    }

                    input[type="range"] {
                        flex: 1;

                            box-shadow: var(--box-shadow-normal);
                            border-radius: 12px;
                            appearance: none;
                            padding-inline: 8px;


                            height: 2px;
                            background-color: var(--accent1);

                            &:focus {
                                appearance: none;
                                outline:none;
                            }


                        &::-webkit-slider-thumb {
                            appearance: none;

                            width: 1rem;
                            height: 1rem;
                            cursor: pointer;

                            border-radius: 100px;

                            transition: background-color 0.2s, border-color 0.2s;


                            background-color: var(--accent1);
                            border: 3px solid var(--surface);
                            box-shadow: 0px 0px 0px 1px var(--accent1);

                            &:hover, &:focus {
                                background-color: var(--accent1-hover);
                            }

                        }


                        &::-moz-range-thumb {
                            appearance: none;

                            width: 1rem;
                            height: 1rem;
                            cursor: pointer;

                            border-radius: 100px;

                            transition: background-color 0.2s, border-color 0.2s;


                            background-color: var(--accent1);
                            border: 3px solid var(--surface);
                            box-shadow: 0px 0px 0px 1px var(--accent1);

                            &:hover, &:focus {
                                background-color: var(--accent1-hover);
                            }

                        }

                        &::-webkit-slider-runnable-track {
                            cursor: pointer;
                            height: 1rem;      

                        }


                        &::-moz-range-track {
                            cursor: pointer;
                            height: 1rem;      
                        }

                    }

                    label {
                        flex: 1;
                    }

                }


                .radio {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    gap: 10px;

                    @media(max-width: 1000px) {
                        flex-direction: column;
                    }


                    div {
                        display: flex;
                        flex-direction: row;
                        gap: 10px;
                        align-items: center;
                    }

                    input[type="radio"] {
                        appearance: none;
                        height: 0.8rem;
                        width: 0.8rem;
                        border-radius: 100%;
                        border: 1px solid var(--accent1);
                        position: relative;
                        display: grid;
                        place-content: center;

                        &::before {
                            content: "";



                            transition: 0.2s background-color, 0.2s height, 0.2s width;
                            height: 0rem;
                            width: 0rem;
                            border-radius: 100%;
                            background-color: var(--accent1);
                        }

                        &:checked {
                            &::before {
                                height: 0.5rem;
                                width: 0.5rem;
                            }
                        }
                    }


                }


                button {
                        border-radius: 4px;
                        outline:none;
                        border: 1px solid transparent;
                        padding-inline: 8px;
                        padding-block: 8px;
                        cursor: pointer;
                        transition: background-color 0.2s, background-color 0.2s;

                        background-color: var(--accent3);
                        box-shadow: var(--box-shadow-normal);

                        width: 100%;

                        a {
                                                color: var(--text);
                                                text-decoration: none;
                                                height: 100%;
                                                width: 100%;
                                                display: block;
                        }

                         &:hover {*/
    /*                         color: var(--text-accent);
    background-color: var(--accent3-hover);
    }
    }
    */
  }
  .aboutsec .subtext {
    padding-block-end: 6px;
  }
  .categoryoverviewsec > div {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-template-rows: repeat(auto-fill, 1fr);
    gap: 20px;
  }
  @media (max-width: 500px) {
    .categoryoverviewsec > div {
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
  }
  .categoryoverviewsec > div article {
    background-color: var(--surface);
    box-shadow: var(--box-shadow-normal);
    padding-block: 20px;
    padding-inline: 15px;
  }
  .categoryoverviewsec > div article a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
  }
  .categoryoverviewsec > div article a p:last-of-type {
    margin-top: auto;
  }
}

/*# sourceMappingURL=main.css.map */