:root {
  --crust: oklch(91% 1% 265); /*catppuccin-crust*/
  --mantle: oklch(93% 1% 265); /*catppuccin-mantle*/
  --base: oklch(96% 1% 265); /*catppuccin-base*/
  --div-0: oklch(86% 1% 268); /*catppuccin-surface0*/
  --div-1: oklch(81% 2% 271); /*catppuccin-surface1*/
  --div-2: oklch(76% 2% 273); /*catppuccin-surface2*/
  --card-0: oklch(71% 2% 275); /*catppuccin-overlay0*/
  --card-1: oklch(65% 3% 278); /*catppuccin-overlay1*/
  --overlay: oklch(60% 3% 279); /*catppuccin-overlay2*/
  --subtext-0: oklch(55% 3% 279); /*catppuccin-subtext0*/
  --subtext-1: oklch(49% 4% 279); /*catppuccin-subtext1*/
  --text: oklch(44% 4% 279); /*catppuccin-text*/
  --accent-pink: oklch(88% 17% 338); /*catppuccin-pink + 15% lightness*/
  --accent-mauve: oklch(70% 25% 297); /*catppuccin-mauve + 15% lightness*/
  --cg-level-0: oklch(0.9 0.01 140.445); 
  --cg-level-1: oklch(0.9 0.08 140.445);
  --cg-level-2: oklch(0.85 0.12 140.445);
  --cg-level-3: oklch(0.72 0.15 140.445);
  --cg-level-4: oklch(0.625 0.177 140.445); /*used catppuccin-green for hue*/
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--card-0) var(--base);
  height: 100%;
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--base);
}
::-webkit-scrollbar-thumb {
  background: var(--card-0);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--card-1);
}
html,
body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--base);
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.headersection {
  .sitetitle {
    color: var(--text);
    background-color: var(--crust);
    font-size: 48px;
    font-weight: bold;
    text-align: center;
    margin: 0px auto 10px;
    padding: 0.6%;
  }
  .navbar {
    border-radius: 40px;
    background-color: var(--accent-pink);
    display: flex;
    justify-content: space-around;
    overflow: auto;
    .navbar_item {
      border-color: oklch(from var(--accent-pink) calc(l - 0.1) c h);
      border-width: 0px 0.5px;
      border-style: solid;
      padding: 5px 15px;
      flex: 1;
      text-align: center;
      color: var(--text);
      text-decoration: none;
      font-weight: semi-bold;
    }
    .navbar_item.active{
      background-color: oklch(from var(--accent-mauve) calc(l + 0.15) c h);
    }
    .navbar_item:hover, .navbar_item.active:hover{
      background-color: var(--accent-mauve);
      }
    :first-child {
      border-left: 0px;
    }
    :last-child {
      border-right: 0px;
    }
    width: 60%;
    margin: 1% auto;
    scale: 120%;
  }
}
.hero {
  background-color: var(--div-0);
  border-radius: 40px;
  padding: 20px;
  margin: 2% auto;
  width: 85%;
  text-align: center;
  img{
    max-width: 70%;
    min-width: 4%;
    border-radius: 40px;
  }
}
.footersection {
  .linksections {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    .linksection {
      flex: 0 0 auto;
      text-align: left;
      color: var(--text);
      text-decoration: none;
      font-weight: semi-bold;
      display: flex;
      flex-direction: column;
      a {
        display: flex;
        align-items: center;
        padding: 2px 0;
        color: var(--subtext-0);
        text-decoration: none;
        &:hover {
          color: var(--accent-mauve);
        }
      }
      .socialicon {
        max-width: 1.5em;
        max-height: 1.5em;
        margin-right: 5px;
      }
    }
    grid-area: linksections;
    padding-bottom: 10px;
  }
  .copyright {
    grid-area: copyright;
    text-align: center;
    color: var(--subtext-0);
  }
  .themeswitcher {
    grid-area: themeswitcher;
    display: flex;
    flex-direction: row;
    justify-content: flex-begin;
    align-items: center;
    background-color: var(--div-0);
    border-radius: 50px;
    padding: 4px;
    gap: 2px;
    width: fit-content;
    margin-left: auto;
    margin-right: 20px;
    .theme-button {
      background: none;
      border: none;
      border-radius: 50px;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background-color 0.2s;
      &.active {
        background-color: var(--base);
      }
      &:hover:not(.active) {
        background-color: var(--div-1);
      }
      .theme-icon {
        width: 16px;
        height: 16px;
      }
    }
  }
  background-color: var(--mantle);
  margin-top: auto;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "linksections linksections linksections "
    ". copyright themeswitcher";
  align-items: center;
  justify-content: center;
}
/* Homepage styles */
.cta-buttons {
  .cta-button-1 {
    background-color: var(--accent-pink);
    color: var(--text);
    border: none;
    border-radius: 15px;
    padding: 10px 20px;
    margin: 0.5%;
    font-size: 18px;
    cursor: pointer;
    text-decoration: none;
  }
  .cta-button-2 {
    background-color: var(--accent-mauve);
    color: var(--text);
    border: none;
    border-radius: 15px;
    padding: 10px 20px;
    margin: 0.5%;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
  }
}
.trackercards {
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 85%;
  margin: 0 auto;
  margin-bottom: 20px;
  .trackercard {
    background-color: var(--card-0);
    border-radius: 20px;
    padding: 5%;
    width: 30%;
    .githubtracker{
      #gh-tracker {
        max-width: 480px;
        background: var(--div-1) ;
        border: 1px solid var(--crust);
        border-radius: 12px;
        padding: 1.25rem;
        color: var(--text);
      }
      #gh-tracker h3 {
        margin: 0 0 0.75rem;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
      }
      #gh-tracker h3 .gh-updated {
        font-size: 0.75rem;
        font-weight: 400;
        color: var(--subtext-0);
      }
      .gh-event {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--crust);
        font-size: 0.875rem;
      }
      .gh-event:last-child { border-bottom: none; }
      .gh-event-repo { color: var(--accent-pink); font-weight: 600; text-decoration: none; }
      .gh-event-meta { color: var(--subtext-0); white-space: nowrap; }
      .gh-loading, .gh-error { color: var(--subtext-0); font-size: 0.875rem; }
    }
    .commitgraph{
      #cg-card {
        max-width: 780px;
        background-color: var(--div-1);
        border: 1px solid var(--crust);
        border-radius: 12px;
        padding: 1.5rem;
      }
      #cg-header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
      }
      #cg-title { font-size: 1rem; font-weight: 600; }
      #cg-updated { font-size: 0.75rem; color: var(--subtext-0); }
      #cg-scroll {
        overflow-x: auto;
        padding-bottom: 0.25rem;
        scrollbar-width: thin;
        scrollbar-color: var(--crust) transparent;
        border-radius: 10px;
      }
      #cg-scroll::-webkit-scrollbar {
        height: 6px;
        border-radius: 10px;
      }
      #cg-scroll::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 10px;
      }
      #cg-scroll::-webkit-scrollbar-thumb {
        background: var(--card-0);
        border-radius: 10px;
      }
      #cg-scroll::-webkit-scrollbar-thumb:hover {
        background: var(--card-1);
        border-radius: 10px;
      }
      #cg-months {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 12px;
        font-size: 0.7rem;
        color: var(--subtext-0);
        margin-bottom: 0.25rem;
        height: 14px;
      }
      #cg-grid-wrap {
        display: flex;
        gap: 0.35rem;
      }

      #cg-daylabels {
        display: grid;
        grid-template-rows: repeat(7, 12px);
        gap: 3px;
        font-size: 0.65rem;
        color: var(--subtext-0);
        line-height: 12px;
      }
      #cg-grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 12px;
        grid-template-rows: repeat(7, 12px);
        gap: 3px;
      }
      .cg-day {
        width: 11px;
        height: 11px;
        border-radius: 2px;
        background: var(--cg-level-0);
      }
      .cg-day[data-level="1"] { background: var(--cg-level-1); }
      .cg-day[data-level="2"] { background: var(--cg-level-2); }
      .cg-day[data-level="3"] { background: var(--cg-level-3); }
      .cg-day[data-level="4"] { background: var(--cg-level-4); }
      #cg-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.75rem;
        font-size: 0.75rem;
        color: var(--subtext-0);
      }
      #cg-legend { display: flex; align-items: center; gap: 3px; }
      #cg-legend .cg-day { cursor: default; }
      .cg-loading, .cg-error { color: var(--subtext-0); font-size: 0.875rem; }
    }
    .hackatimedashboard{
        #hd-dashboard {
          max-width: 560px;
          margin: 0 auto;
        }
        #hd-dashboard h1 {
          font-size: 1.25rem;
          margin-bottom: 0.25rem;
        }
        #hd-updated {
          font-size: 0.8rem;
          color: var(--subtext-0);
          margin-bottom: 1.25rem;
        }
        .hd-tabs {
          display: flex;
          gap: 0.4rem;
          margin-bottom: 1rem;
          flex-wrap: wrap;
        }
        .hd-tab {
          font-size: 0.8rem;
          padding: 0.35rem 0.75rem;
          border-radius: 999px;
          border: 1px solid var(--crust);
          background: transparent;
          color: var(--subtext-0);
          cursor: pointer;
        }
        .hd-tab.active {
          background: var(--accent-mauve);
          color: var(--div-1);
          border-color: var(--accent-mauve);
        }
        .hd-card {
          background: var(--div-1);
          border: 1px solid var(--crust);
          border-radius: 12px;
          padding: 1.5rem;
        }
        .hd-total {
          font-size: 2rem;
          font-weight: 700;
          margin-bottom: 0.25rem;
        }
        .hd-total-label {
          font-size: 0.8rem;
          color: var(--subtext-0);
          margin-bottom: 1.25rem;
        }
        .hd-projects-heading {
          font-size: 0.8rem;
          color: var(--subtext-0);
          margin-bottom: 0.5rem;
          text-transform: uppercase;
          letter-spacing: 0.03em;
        }
        .hd-project {
          display: flex;
          justify-content: space-between;
          gap: 1rem;
          padding: 0.5rem 0;
          border-bottom: 1px solid var(--crust);
          font-size: 0.9rem;
        }
        .hd-project:last-child { border-bottom: none; }
        .hd-project-time { color: var(--subtext-0); white-space: nowrap; }
        .hd-note {
          font-size: 0.8rem;
          color: var(--subtext-0);
          font-style: italic;
        }
        .hd-loading, .hd-error {
          color: var(--subtext-0);
          font-size: 0.9rem;
        }
    }
  }
}
/*About page styles*/
.overview{
  background-color: var(--div-0);
  border-radius: 40px;
  padding: 20px;
  margin: 2% auto;
  width: 85%;
  text-align: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "sectionheader sectionheader"
    "overviewtext gallery";
  align-items: start;
  overflow: auto;
  .sectionheader{
    grid-area: sectionheader;
    padding-bottom: 2%;
    align-self: center;
  }
  .overviewtext{
    grid-area: overviewtext;
    background-color: var(--div-1);
    margin: 40px;
    padding: 20px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .gallery{
  grid-area: gallery;
  background-color: var(--div-1);
  margin: 40px;
  padding: 20px;
  border-radius: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
  .carousel{
    display: flex;
    align-items: center;
    gap: 10px;
    .carouseltrackwrap{
      overflow: hidden;
      border-radius: 20px;
      flex: 1;
    }
      .carouseltrack{
        display: flex;
        transition: transform 0.4s ease;
        .carouselimg{
          max-width: 100%;
          flex: 0 0 100%;
          height: 220px;
          object-fit: cover;
        }
      }
      .carouselbtn{
        background-color: var(--card-0);
        color: var(--text);
        border: none;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        font-size: 16px;
        cursor: pointer;
        &:hover{
          background-color: var(--accent-pink);
        }
      }
    }
    .carouseldots{
      display: flex;
      justify-content: center;
      gap: 6px;
      margin-top: 10px;
      .dot{
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: var(--div-2);
        cursor: pointer;
        &.active{
          background-color: var(--accent-pink);
        }
      }
    }
  }
}
.tools{
  background-color: var(--div-0);
  border-radius: 40px;
  padding: 20px;
  margin: 2% auto;
  width: 85%;
  text-align: center;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "sectionheader sectionheader sectionheader"
    "toolsection1 toolsection3 toolsection4 "
    "toolsection2 toolsection3 toolsection5";
  align-items: start;
  overflow: auto;
  ul{
    list-style: none;
    padding: 0;
    margin: 0;
    h3{
      font-size: larger;
      margin: 10px auto;
    }
    h4{
      font-weight: 600;
      font-size: medium;
      margin: 5px auto;
    }
  }
  .sectionheader{
    grid-area: sectionheader;
    padding-bottom: 2%;
    align-self: center;
  }
  .toolsection1{
    grid-area: toolsection1;
    background-color: var(--div-1);
    margin: 40px;
    padding: 20px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .toolsection2{
    grid-area: toolsection2;
    background-color: var(--div-1);
    margin: 40px;
    padding: 20px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .toolsection3{
    grid-area: toolsection3;
    background-color: var(--div-1);
    margin: 40px;
    padding: 20px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .toolsection4{
    grid-area: toolsection4;
    background-color: var(--div-1);
    margin: 40px;
    padding: 20px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .toolsection5{
    grid-area: toolsection5;
    background-color: var(--div-1);
    margin: 40px;
    padding: 20px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
/*Projects page styles */
.projectssection{
  padding: 20px;
  margin: 2% auto;
  width: 85%;
  text-align: center;
  color: var(--text);
  background-color: var(--div-0);
  padding: 20px;
  border-radius: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  .filtercontrols{
    background-color: var(--card-0);
    padding: 20px;
    border-radius: 20px;
    margin: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    .sorttoggle{
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.85rem;
        padding: 0.3rem 0.8rem;
      border-radius: 20px;
      background: var(--div-2);
      color: var(--text);
      cursor: pointer;
      &:hover{
        background-color: var(--accent-mauve);
      }
    }  
    .tagfilter {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      justify-content: center;
    }
    .tagpill {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.85rem;
      padding: 0.3rem 0.8rem;
      border-radius: 20px;
      background: var(--div-2);
      color: var(--text);
      cursor: pointer;
      &:hover{
        background-color: var(--accent-mauve);
      }
      &.active{
        background: var(--accent-pink);
        color: var(--text);
      }
      .tagicon{
        width: 14px;
        height: 14px;
      }
    }
  }
  .projectscardcontainer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 30px;
    grid-gap: 40px;
    a{
      text-decoration: none;
      color: var(--text);
    }
    .projectcard div{
      background-color: var(--div-1);
      border-radius: 20px;
      padding: 10px;
      .cardimage{
        max-height: 10vh;
        margin: 10px auto;
        border-radius: 20px;
      }
      .cardtags{
        background-color: var(--div-2);
        border-radius: 20px;
        padding: 10px;
        padding-left: 20px;
        padding-right: 20px;
        max-width: 80%;
        margin: 10px auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center; 
        text-align: center;
        align-items: center;
        gap: 0.3rem;
        .tagpill {
          display: inline-flex;
          align-items: center;
          gap: 0.35rem;
          font-size: 0.85rem;
          padding: 0.3rem 0.8rem;
          border-radius: 20px;
          background: var(--div-2);
          color: var(--text);
          cursor: pointer;
        }
        .tagpill{
          .tagicon{
            width: 14px;
            height: 14px;
          }
        }
      }
      .projecttitle{
        a{
          color: var(--text);
          text-decoration: none;;
        }
      }
      .description{
        padding: 5px;
        margin-top: -10px;

      }
      .projectdate{
        color: var(--subtext-0);
        font-size: smaller;
        padding: 10px;
      }
    }
  }
}
/*Blog page styles */
.blogarea{
  padding: 20px;
  margin: 2% auto;
  width: 85%;
  text-align: center;
  color: var(--text);
  background-color: var(--div-0);
  padding: 20px;
  border-radius: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  .filtercontrols{
    background-color: var(--card-0);
    padding: 20px;
    border-radius: 20px;
    margin: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    .sorttoggle{
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.85rem;
      padding: 0.3rem 0.8rem;
      border-radius: 20px;
      background: var(--div-2);
      color: var(--text);
      cursor: pointer;
      &:hover{
        background-color: var(--accent-mauve);
      }
    }  
    .tagfilter {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      justify-content: center;
    }
    .tagpill {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.85rem;
      padding: 0.3rem 0.8rem;
      border-radius: 20px;
      background: var(--div-2);
      color: var(--text);
      cursor: pointer;
      &:hover{
        background-color: var(--accent-mauve);
      }
      &.active{
        background: var(--accent-pink);
        color: var(--text);
      }
      .tagicon{
        width: 14px;
        height: 14px;
      }
    }
  }
  .blogcardcontainer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 30px;
    grid-gap: 40px;
    a{
      text-decoration: none;
      color: var(--text);
    }
    .blogcard div{
      background-color: var(--div-1);
      border-radius: 20px;
      padding: 10px;
      text-decoration: none;
      .cardimage{
        max-height: 10vh;
        margin: 10px auto;
        border-radius: 20px;
      }
      .cardtags{
        background-color: var(--div-2);
        border-radius: 20px;
        padding: 10px;
        padding-left: 20px;
        padding-right: 20px;
        max-width: 80%;
        margin: 10px auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center; 
        text-align: center;
        align-items: center;
        gap: 0.3rem;
        .tagpill {
          display: inline-flex;
          align-items: center;
          gap: 0.35rem;
          font-size: 0.85rem;
          padding: 0.3rem 0.8rem;
          border-radius: 20px;
          background: var(--div-2);
          color: var(--text);
        }
        .tagpill{
          .tagicon{
            width: 14px;
            height: 14px;
          }
        }
      }
      .blogposttitle{
        a{
          color: var(--text);
          text-decoration: none;;
        }
      }
      .description{
        padding: 5px;
        margin-top: -10px;

      }
      .blogpostdate{
        color: var(--subtext-0);
        font-size: smaller;
        padding: 10px;
      }
    }
  }
}
/*Contact page styles */
.contactsection{
  padding: 20px;
  margin: 2% auto;
  width: 85%;
  text-align: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
  color: var(--text);
  grid-template-areas: "contactform contactinfo";
  .contactform{
    grid-area: contactform;
    background-color: var(--div-0);
    margin: 40px;
    padding: 20px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    .formgroups{
      background-color: var(--div-1);
      border-radius: 20px;
      padding: 10px;
      .formgroup{
        margin: 10px;
        display: grid;
        grid-template-columns: 0.5fr 1fr;
        input, textarea{
          border-radius: 10px;
          background-color: var(--card-0);
        }
      }
      .submitbtn{
        border-radius: 20px;
        background-color: var(--card-2);
        color: var(--subtext-1);
        padding: 5px;
        cursor: pointer; 
        transition: background-color 0.3;
        &:hover{
          background-color: var(--accent-pink);
        }
      } 
    }
  }
  .contactinfo{
    grid-area: contactinfo;
    background-color: var(--div-0);
    margin: 40px;
    padding: 20px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    flex: 0 0 auto;
    text-align: center;
    color: var(--text);
    text-decoration: none;
    font-weight: semi-bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    a {
      display: flex;
      align-items: center;
      padding: 2px 0;
      color: var(--subtext-0);
      text-decoration: none;
      &:hover {
        color: var(--accent-mauve);
      }
      .socialicon {
          max-width: 1.5em;
          max-height: 1.5em;
          margin-right: 5px;
        }
    }   
  }
}
/*changes for other screen sizes*/
/* Tablet: drop card grids from 3 columns to 2 */
@media (max-width: 1024px) {
  .blogarea .blogcardcontainer,
  .projectssection .projectscardcontainer {
    grid-template-columns: 1fr 1fr;
  }

  .tools {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "sectionheader sectionheader"
      "toolsection1 toolsection3"
      "toolsection2 toolsection4"
      ".            toolsection5";
  }

  .trackercards {
    flex-wrap: wrap;
    .trackercard {
      width: 45%;
    }
  }
}

/* Mobile: everything drops to a single column */
@media (max-width: 640px) {
  .headersection {
    .sitetitle {
      font-size: 32px;
    }
    .navbar {
      width: 92%;
      scale: 100%;
      flex-wrap: wrap;
      .navbar_item {
        flex: 1 1 40%;
      }
    }
  }

  .hero img {
    max-width: 90%;
  }

  .blogarea .blogcardcontainer,
  .projectssection .projectscardcontainer {
    grid-template-columns: 1fr;
    padding: 15px;
    grid-gap: 20px;
  }

  .overview {
    grid-template-columns: 1fr;
    grid-template-areas:
      "sectionheader"
      "overviewtext"
      "gallery";
    .overviewtext,
    .gallery {
      margin: 15px 0;
    }
  }

  .gallery .carousel .carouseltrack .carouselimg {
    height: 160px;
  }

  .tools {
    grid-template-columns: 1fr;
    grid-template-areas:
      "sectionheader"
      "toolsection1"
      "toolsection2"
      "toolsection3"
      "toolsection4"
      "toolsection5";
    ul {
      margin: 15px 0 !important;
    }
  }

  .trackercards {
    flex-direction: column;
    .trackercard {
      width: 90%;
      margin-bottom: 20px;
    }
  }

  .contactsection {
    grid-template-columns: 1fr;
    grid-template-areas:
      "contactform"
      "contactinfo";
    .contactform,
    .contactinfo {
      margin: 15px 0;
    }
    .formgroup {
      grid-template-columns: 1fr !important;
    }
  }

  .footersection {
    grid-template-columns: 1fr;
    grid-template-areas:
      "linksections"
      "copyright"
      "themeswitcher";
    .themeswitcher {
      margin: 10px auto;
    }
  }
}