/*
 ** CONTENTS
 **
 ** SETTINGS
 ** Html..........Scroll effect, overflow hidden.
 ** Body..........Font, BG Color, Text Color.
 ** Font..........Hero Light, Hero Thin.
 **
 ** TOP
 ** Logo..........Logo SVG on top left.
 ** Desktop Menu..........Desktop Menu.
 ** Mobile Menu..........Mobile Menu.
 ** Mobile Menu Button..........Button to open or close the Mobile Menu
 **
 ** BOTTOM
 ** Copyright..........Copyright Sign on bottom left.
 ** Github..........Github SVG on bottom right.
 ** LinkedIn..........LinkedIn SVG on bottom right.
 **
 ** INTRO
 ** Intro..........Introduction.
 **
 ** GRID
 ** Grid..........Grid dividing body into rows.
 ** Column..........Grid Column.
 **
 ** FORM
 ** Form..........Form for submitting tips.
 ** Input..........Input for submitting tips.
 ** Signing Input..........Input for signing tips.
 ** Form Button Group..........Button for (Github Login, Submit Tips).
 **
 ** POSTGRID
 ** PostGrid..........Grid for showing posts.
 ** Tip..........Column in PostGrid showing Tips fetched from DB.
 **
 ** CURSOR
 ** Cursor..........Custom Cursor.
 **
 ** EFFECTS
 ** Button Group follow cursor effect..........Button Group follow cursor effect.
 **
 ** HELPERS
 ** Helpers..........(h1,p, ul,..) styles.
 **
 */


 /*------------------------------------*\
   #SETTINGS
 \*------------------------------------*/

 * {
     margin: 0;
     padding: 0;
 }

 html {
     scroll-behavior: smooth;
     overflow-x: hidden;
 }

 body {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     color: #8b8b8d;
     height: 100vh;
 }

 @font-face {
     font-family: 'Hero';
     src: url('../font/Hero-Light.otf') format('opentype');
     font-style: normal;
 }

 @font-face {
     font-family: 'Hero Thin';
     src: url('../font/Hero-Thin.otf') format('opentype');
     font-style: normal;
 }

 /* S */
 @media screen and (max-width: 480px) {

     /*------------------------------------*\
       #TOP
     \*------------------------------------*/

     /* Top Section (Logo, Menu) */

     .top {
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         height: 10vh;
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 20px;
         z-index: 100;
     }


     /* Desktop Menu*/

     .top ul {
         display: none;
     }


     /* Mobile Menu */

     .minTopUlbtn {
         float: right;
         width: 49px;
         height: 49px;
         border: none;
         background: none;
         color: #8b8b8d;
         filter: invert(59%) sepia(6%) saturate(71%) hue-rotate(202deg) brightness(92%) contrast(90%);
     }


     .minTopUl {
         position: fixed;
         top: 0;
         right: -100vw;
         /* Off screen */
         width: 100vw;
         height: 100vh;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         border-radius: 100%;
         background-color: #ffffff;
         color: #8b8b8d;
         transition: right 0.7s ease-in-out, border-radius 0.7s ease-in-out;
     }


     .minTopUl.show {
         right: 0;
         border-radius: 0;
     }


     .minTopUl ul {
         display: flex;
         flex-direction: column;
         align-items: center;
         width: 20vw;
         height: 49vh;
     }


     .minTopUl ul li {
         display: flex;
         color: #8b8b8d;
         margin: 12.9px 0;
         width: 100%;
     }


     .minTopUl a {
         text-decoration: none;
         color: #8b8b8d;
     }


     .minTopUl .liCon {
         display: grid;
         grid-template-columns: 7px auto;
         gap: 4.9px;
         width: 100%;
         height: 20px;
         box-sizing: border-box;
     }


     .minTopUl .svgCon {
         display: flex;
         align-items: center;
         height: 20px;
         box-sizing: border-box;
     }


     .minTopUl svg {
         width: 4px;
         height: 8px;
     }


     /* Mobile Menu Button */

     .minTopUlClosingbtn {
         position: absolute;
         top: 20px;
         right: 20px;
         width: 49px;
         height: 49px;
         border: none;
         background: none;
         color: #8b8b8d;
     }


     .minTopUlClosingbtn img {
         filter: invert(59%) sepia(6%) saturate(71%) hue-rotate(202deg) brightness(92%) contrast(90%);
     }

     /*------------------------------------*\
       #BOTTOM
     \*------------------------------------*/

     .bottom {
         display: flex;
         align-items: center;
         justify-content: space-between;
         width: 100%;
     }

     .bottom ul {
         display: flex;
         align-items: center;
         margin: 0 10px;
     }

     .bottom li {
         font-size: 1.1rem;
         margin: 0 -2px 0 0;
     }

     /* Github SVG */
     .bottom img {
         width: 24px;
         height: 24px;
         filter: invert(59%) sepia(6%) saturate(71%) hue-rotate(202deg) brightness(92%) contrast(90%);
     }

     /* LinkedIn SVG */
     .bottom .lin img {
         width: 40px;
         height: 40px;
     }

     .bottom img:hover {
         filter: invert(72%) sepia(6%) saturate(60%) hue-rotate(201deg) brightness(102%) contrast(91%);
     }

     /* Copyright Sign */
     .copyrightsign {
         display: flex;
         align-items: center;
     }

     .copyrightsign img {
         width: 24px;
         height: 24px;
     }

     .copyrightsign img:hover {
         filter: invert(59%) sepia(6%) saturate(71%) hue-rotate(202deg) brightness(92%) contrast(90%);
     }

     /*------------------------------------*\
       #GRID
     \*------------------------------------*/

     .grid {
         display: grid;
         grid-template-rows: 10vh auto 10vh;
         width: 100vw;
         height: 100vh;
         -ms-overflow-style: none;
         scrollbar-width: none;
         overflow-x: hidden;
         overflow-y: scroll;
     }

     .grid::-webkit-scrollbar {
         display: none;
     }

     .mid {
         width: 70vw;
         margin: 0 auto;
         padding: 0 0 100px 0;
     }

     /*------------------------------------*\
       #POSTGRID
     \*------------------------------------*/

     .postGrid {
         display: flex;
         flex-direction: column;
         width: 70vw;
         color: #8b8b8d;
     }

     /* Tip */

     .tipCon {
         position: relative;
         display: flex;
         flex-direction: column;
         width: calc(100% - 1px);
         min-height: 100px;
         border: 1px solid #a9a9aa;
         border-radius: 10px;
         margin-bottom: 10px;
         margin: 0 0 20px 0;
         padding: 20px;
         box-sizing: border-box;
         overflow: hidden;
     }

     .tip {
         margin: 0 0 20px 0;
     }

     .github {
         position: absolute;
         left: 20px;
         bottom: 20px;
         cursor: pointer;
     }

     .github a {
         color: #8b8b8d;
         text-decoration: none;
     }

     /*------------------------------------*\
       #FORM
     \*------------------------------------*/

     form {
         display: flex;
         flex-direction: column;
     }

     /* logInput showing who is logging into Github */

     .logInput {
         color: #8b8b8d;
         margin: 10px 0;
     }

     .logInput a {
         color: #8b8b8d;
     }


     /* Input for submitting Tips */

     input {
         height: 22px;
         border: 1px solid #8b8b8d;
         border-radius: 10px;
         color: #8b8b8d;
         margin: 4px 0 10px 0;
         padding: 0 10px;
     }

     input:focus {
         outline: none;
     }

     .linput {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         width: calc(70vw - 1.9px);
         height: 60%;
         border: 1px solid;
         border-bottom: none;
         border-radius: 10px 10px 0 0;
         overflow: scroll;
         box-sizing: border-box;
     }

     .inputCon {
         position: relative;
         width: calc(70vw - 1px);
         height: 20vh;
     }

     /* signingInput for signing Tips */

     .signingInput {
         position: absolute;
         left: 0;
         right: 0;
         bottom: 0;
         width: calc(70vw - 1.9px);
         height: 40%;
         border: 1px solid #a9a9aa;
         border-top: none;
         border-radius: 0 0 10px 10px;
         background-color: #ffffff;
         cursor: url(img/pen.svg) 1 26;
         box-sizing: border-box;
     }

     .resetbtn {
         position: absolute;
         right: 10px;
         bottom: 10px;
         font-size: 0.8rem;
         border: none;
         background: none;
         color: #8b8b8d;
         padding: 4px 10px;
         cursor: pointer;
     }

     .resetbtn:hover {
         background: none;
         color: rgba(185, 185, 187, 0.7);
     }

     /*------------------------------------*\
       #EFFECTS
     \*------------------------------------*/

     /* Button Group follow cursor effect */

     .buttonGroup {
         display: flex;
         gap: 10px;
         width: fit-content;
         margin: 10px 7px;
     }

     .buttonGroup button {
         position: relative;
         height: 40px;
         border: 1px solid #ffffff;
         border-radius: 20px;
         background-color: #8b8b8d;
         color: #ffffff;
         padding: 10px 29px;
         cursor: pointer;
         overflow: hidden;
         transition: transform 0.2s ease-out, color 0.3s ease-out;
         z-index: 1;
     }

     .buttonGroup button span {
         display: inline-block;
         position: relative;
         transition: transform 0.1s ease-out, color 0.3s ease-out;
         z-index: 2;
     }

     /* Flying circle */
     .circle {
         position: absolute;
         bottom: -40px;
         left: 50%;
         width: 10px;
         height: 10px;
         border: 1px solid #b9b9bb;
         border-radius: 50%;
         background-color: #b9b9bb;
         transform: translateX(-50%) translateY(100%) scale(0);
         transition: transform 0.4s ease-out, width 0.4s ease-out, height 0.4s ease-out;
         z-index: 1;
     }

     /* Hover effect */
     .buttonGroup button:active .circle {
         transform: translateX(-50%) translateY(0) scale(8);
         width: 150px;
         height: 150px;
     }

     .buttonGroup button:active {
         color: #ffffff;
     }

     /*------------------------------------*\
       #HELPERS
     \*------------------------------------*/

     h1 {
         font-size: 1.2rem;
         margin: 100px 10px 10px 0;
     }

     a {
         text-decoration: none;
         color: #8b8b8d;
         cursor: pointer;
     }

     p {
         font-size: 1rem;
         margin: 4.9px 10px 20px 0;
     }

     ul {
         list-style-type: none;
     }

 }

 /* L */
 @media screen and (min-width: 480px) and (max-width: 900px) {

     /*------------------------------------*\
       #TOP
     \*------------------------------------*/

     /* Top Section (Logo, Menu) */

     .top {
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         height: 10vh;
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 20px;
         z-index: 100;
     }


     /* Desktop Menu*/

     .top ul {
         display: none;
     }


     /* Mobile Menu */

     .minTopUlbtn {
         float: right;
         width: 49px;
         height: 49px;
         border: none;
         background: none;
         color: #8b8b8d;
         filter: invert(59%) sepia(6%) saturate(71%) hue-rotate(202deg) brightness(92%) contrast(90%);
     }


     .minTopUl {
         position: fixed;
         top: 0;
         right: -100vw;
         /* Off screen */
         width: 100vw;
         height: 100vh;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         border-radius: 100%;
         background-color: #ffffff;
         color: #8b8b8d;
         transition: right 0.7s ease-in-out, border-radius 0.7s ease-in-out;
     }


     .minTopUl.show {
         right: 0;
         border-radius: 0;
     }


     .minTopUl ul {
         display: flex;
         flex-direction: column;
         align-items: center;
         width: 20vw;
         height: 49vh;
     }


     .minTopUl ul li {
         display: flex;
         color: #8b8b8d;
         margin: 12.9px 0;
         width: 100%;
     }


     .minTopUl a {
         text-decoration: none;
         color: #8b8b8d;
     }


     .minTopUl .liCon {
         display: grid;
         grid-template-columns: 7px auto;
         gap: 4.9px;
         width: 100%;
         height: 20px;
         box-sizing: border-box;
     }


     .minTopUl .svgCon {
         display: flex;
         align-items: center;
         height: 20px;
         box-sizing: border-box;
     }


     .minTopUl svg {
         width: 4px;
         height: 8px;
     }


     /* Mobile Menu Button */

     .minTopUlClosingbtn {
         position: absolute;
         top: 20px;
         right: 20px;
         width: 49px;
         height: 49px;
         border: none;
         background: none;
         color: #8b8b8d;
     }


     .minTopUlClosingbtn img {
         filter: invert(59%) sepia(6%) saturate(71%) hue-rotate(202deg) brightness(92%) contrast(90%);
     }

     /*------------------------------------*\
      #BOTTOM
    \*------------------------------------*/

     .bottom {
         display: flex;
         align-items: center;
         justify-content: space-between;
         width: 100%;
         padding: 10px 0 0 0;
     }

     .bottom ul {
         display: flex;
         align-items: center;
         margin: 0 10px;
     }

     .bottom li {
         font-size: 1.1rem;
         margin: 0 -2px 0 0;
     }

     /* Github SVG */
     .bottom img {
         width: 24px;
         height: 24px;
         filter: invert(59%) sepia(6%) saturate(71%) hue-rotate(202deg) brightness(92%) contrast(90%);
     }

     /* LinkedIn SVG */
     .bottom .lin img {
         width: 40px;
         height: 40px;
     }

     .bottom img:hover {
         filter: invert(72%) sepia(6%) saturate(60%) hue-rotate(201deg) brightness(102%) contrast(91%);
     }

     /* Copyright Sign */
     .copyrightsign {
         display: flex;
         align-items: center;
     }

     .copyrightsign img {
         width: 24px;
         height: 24px;
     }

     .copyrightsign img:hover {
         filter: invert(59%) sepia(6%) saturate(71%) hue-rotate(202deg) brightness(92%) contrast(90%);
     }

     /*------------------------------------*\
      #GRID
    \*------------------------------------*/

     .grid {
         display: grid;
         grid-template-rows: 10vh auto 10vh;
         width: 100vw;
         height: 100vh;
         -ms-overflow-style: none;
         scrollbar-width: none;
         overflow-x: hidden;
         overflow-y: scroll;
     }

     .grid::-webkit-scrollbar {
         display: none;
     }

     .mid {
         width: 70vw;
         margin: 0 auto;
         padding: 0 0 100px 0;
     }

     /*------------------------------------*\
      #POSTGRID
    \*------------------------------------*/

     .postGrid {
         display: flex;
         flex-direction: column;
         width: 70vw;
         color: #8b8b8d;
     }

     /* Tip */

     .tipCon {
         position: relative;
         display: flex;
         flex-direction: column;
         width: calc(100% - 1px);
         min-height: 100px;
         border: 1px solid #8b8b8d;
         border-radius: 10px;
         margin-bottom: 10px;
         margin: 0 0 20px 0;
         padding: 20px;
         box-sizing: border-box;
         overflow: hidden;
     }

     .tip {
         margin: 0 0 20px 0;
     }

     .github {
         position: absolute;
         left: 20px;
         bottom: 20px;
         cursor: pointer;
     }

     .github a {
         color: #8b8b8d;
         text-decoration: none;
     }

     /*------------------------------------*\
      #FORM
    \*------------------------------------*/

     form {
         display: flex;
         flex-direction: column;
     }

     /* logInput showing who is logging into Github */

     .logInput {
         color: #8b8b8d;
         margin: 10px 0;
     }

     .logInput a {
         color: #8b8b8d;
     }


     /* Input for submitting Tips */

     input {
         height: 22px;
         border: 1px solid #8b8b8d;
         border-radius: 10px;
         color: #8b8b8d;
         margin: 4px 0 10px 0;
         padding: 0 10px;
     }

     input:focus {
         outline: none;
     }

     .linput {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         width: calc(70vw - 1.9px);
         height: 60%;
         border: 1px solid;
         border-bottom: none;
         border-radius: 10px 10px 0 0;
         overflow: scroll;
         box-sizing: border-box;
     }

     .inputCon {
         position: relative;
         width: calc(70vw - 1px);
         height: 20vh;
     }

     /* signingInput for signing Tips */

     .signingInput {
         position: absolute;
         left: 0;
         right: 0;
         bottom: 0;
         width: calc(70vw - 1.9px);
         height: 40%;
         border: 1px solid #8b8b8d;
         border-top: none;
         border-radius: 0 0 10px 10px;
         background-color: #ffffff;
         cursor: url(img/pen.svg) 1 26;
         box-sizing: border-box;
     }

     .resetbtn {
         position: absolute;
         right: 10px;
         bottom: 10px;
         font-size: 0.8rem;
         border: none;
         background: none;
         color: #8b8b8d;
         padding: 4px 10px;
         cursor: pointer;
     }

     .resetbtn:hover {
         background: none;
         color: rgba(185, 185, 187, 0.7);
     }

     /*------------------------------------*\
      #EFFECTS
    \*------------------------------------*/

     /* Button Group follow cursor effect */

     .buttonGroup {
         display: flex;
         gap: 10px;
         width: fit-content;
         margin: 10px 7px;
     }

     .buttonGroup button {
         position: relative;
         height: 40px;
         border: 1px solid #ffffff;
         border-radius: 20px;
         background-color: #8b8b8d;
         color: #ffffff;
         padding: 10px 29px;
         cursor: pointer;
         overflow: hidden;
         transition: transform 0.2s ease-out, color 0.3s ease-out;
         z-index: 1;
     }

     .buttonGroup button span {
         display: inline-block;
         position: relative;
         transition: transform 0.1s ease-out, color 0.3s ease-out;
         z-index: 2;
     }

     /* Flying circle */
     .circle {
         position: absolute;
         bottom: -40px;
         left: 50%;
         width: 10px;
         height: 10px;
         border: 1px solid #b9b9bb;
         border-radius: 50%;
         background-color: #b9b9bb;
         transform: translateX(-50%) translateY(100%) scale(0);
         transition: transform 0.4s ease-out, width 0.4s ease-out, height 0.4s ease-out;
         z-index: 1;
     }

     /* Hover effect */
     .buttonGroup button:active .circle {
         transform: translateX(-50%) translateY(0) scale(8);
         width: 150px;
         height: 150px;
     }

     .buttonGroup button:active {
         color: #ffffff;
     }

     /*------------------------------------*\
      #HELPERS
    \*------------------------------------*/

     h1 {
         font-size: 1.2rem;
         margin: 100px 10px 10px 0;
     }

     a {
         text-decoration: none;
         color: #8b8b8d;
         cursor: pointer;
     }

     p {
         font-size: 1rem;
         margin: 4.9px 10px 20px 0;
     }

     ul {
         list-style-type: none;
     }

 }

 /* XL */
 @media screen and (min-width: 900px) {

     /*------------------------------------*\
       #TOP
     \*------------------------------------*/

     .top {
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         height: 10vh;
         display: flex;
         justify-content: space-between;
         align-items: center;
         background-color: #ffffff;
         padding: 20px 20px 20px 40px;
         z-index: 100;
     }


     /* Desktop Menu */

     .top ul {
         display: flex;
         justify-content: center;
         align-items: center;
         list-style: none;
         padding: 0;
     }


     .top ul li {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 7px;
         min-height: 49px;
         margin: 20px;
         transition: transform 0.2s ease-out;
     }

     .top ul svg {
         width: 4px;
         height: 8px;
         margin-top: 7px;
     }

     .top ul li svg {
         display: none;
     }

     .top ul li:hover svg {
         display: block;
     }

     .top .svgConTip svg {
         display: block;
     }

     /* Mobile Menu */

     .minTopUl {
         display: none;
     }

     .minTopUlbtn {
         display: none;
     }

     /*------------------------------------*\
       #BOTTOM
     \*------------------------------------*/

     .bottom {
         display: flex;
         align-items: center;
         justify-content: space-between;
         width: 100%;
         padding: 10px 0 0 0;
     }

     .bottom ul {
         display: flex;
         align-items: center;
         margin: 0 10px;
     }

     .bottom li {
         font-size: 1.1rem;
         margin: 0 -2px 0 0;
     }

     /* Github SVG */
     .bottom img {
         width: 24px;
         height: 24px;
         filter: invert(59%) sepia(6%) saturate(71%) hue-rotate(202deg) brightness(92%) contrast(90%);
     }

     /* LinkedIn SVG */
     .bottom .lin img {
         width: 40px;
         height: 40px;
     }

     .bottom img:hover {
         filter: invert(72%) sepia(6%) saturate(60%) hue-rotate(201deg) brightness(102%) contrast(91%);
     }

     /* Copyright Sign */
     .copyrightsign {
         display: flex;
         align-items: center;
     }

     .copyrightsign img {
         width: 24px;
         height: 24px;
     }

     .copyrightsign img:hover {
         filter: invert(59%) sepia(6%) saturate(71%) hue-rotate(202deg) brightness(92%) contrast(90%);
     }

     /*------------------------------------*\
       #GRID
     \*------------------------------------*/

     .grid {
         display: grid;
         grid-template-rows: 10vh auto 10vh;
         width: 100vw;
         height: 100vh;
         -ms-overflow-style: none;
         scrollbar-width: none;
         overflow-x: hidden;
         overflow-y: scroll;
     }

     .grid::-webkit-scrollbar {
         display: none;
     }

     .mid {
         width: 70vw;
         margin: 0 auto;
         padding: 0 0 100px 0;
     }

     /*------------------------------------*\
       #POSTGRID
     \*------------------------------------*/

     .postGrid {
         display: flex;
         flex-direction: column;
         width: 70vw;
         color: #8b8b8d;
     }

     /* Tip */

     .tipCon {
         position: relative;
         display: flex;
         flex-direction: column;
         width: calc(100% - 1px);
         min-height: 100px;
         border: 1px solid #a9a9aa;
         border-radius: 10px;
         margin-bottom: 10px;
         margin: 0 0 20px 0;
         padding: 20px;
         box-sizing: border-box;
         overflow: hidden;
     }

     .tip {
         margin: 0 0 20px 0;
     }

     .github {
         position: absolute;
         left: 20px;
         bottom: 20px;
         cursor: pointer;
     }

     .github a {
         color: #8b8b8d;
         text-decoration: none;
     }

     /*------------------------------------*\
       #FORM
     \*------------------------------------*/

     form {
         display: flex;
         flex-direction: column;
     }


     /* logInput showing who is logging into Github */

     .logInput {
         color: #8b8b8d;
         margin: 10px 0;
     }

     .logInput a {
         color: #8b8b8d;
     }


     /* Input for submitting Tips */

     input {
         height: 22px;
         border: 1px solid #8b8b8d;
         border-radius: 10px;
         color: #8b8b8d;
         margin: 4px 0 10px 0;
         padding: 0 10px;
     }

     input:focus {
         outline: none;
     }

     .linput {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         width: calc(70vw - 1.9px);
         height: 60%;
         border: 1px solid #8b8b8d;
         border-bottom: none;
         border-radius: 10px 10px 0 0;
         overflow: scroll;
         box-sizing: border-box;
     }

     .inputCon {
         position: relative;
         width: calc(70vw - 1px);
         height: 20vh;
     }


     /* signingInput for signing Tips */

     .signingInput {
         position: absolute;
         left: 0;
         right: 0;
         bottom: 0;
         width: calc(70vw - 1.9px);
         height: 40%;
         border: 1px solid #8b8b8d;
         border-top: none;
         border-radius: 0 0 10px 10px;
         background-color: #ffffff;
         cursor: url(img/pen.svg) 1 26;
         box-sizing: border-box;
     }

     .resetbtn {
         position: absolute;
         right: 10px;
         bottom: 10px;
         font-size: 0.8rem;
         border: none;
         background: none;
         color: #8b8b8d;
         padding: 4px 10px;
         cursor: pointer;
     }

     .resetbtn:hover {
         background: none;
         color: rgba(185, 185, 187, 0.7);
     }

     /*------------------------------------*\
       #CURSOR
     \*------------------------------------*/

     .cursor {
         position: absolute;
         height: 7vh;
         aspect-ratio: 4/10;
         border-radius: 20px;
         background-color: #8b8b8d;
         transform: translate(-50%, -50%);
         transition: transform 0.08s linear;
         z-index: 1000;
     }

     /*------------------------------------*\
       #EFFECTS
     \*------------------------------------*/

     /* Button Group follow cursor effect */

     .buttonGroup {
         display: flex;
         gap: 10px;
         width: fit-content;
         margin: 10px 7px;
     }

     .buttonGroup button {
         position: relative;
         height: 40px;
         border: 1px solid #ffffff;
         border-radius: 20px;
         background-color: #8b8b8d;
         color: #ffffff;
         padding: 10px 29px;
         cursor: pointer;
         overflow: hidden;
         transition: transform 0.2s ease-out, color 0.3s ease-out;
         z-index: 1;
     }

     .buttonGroup button span {
         display: inline-block;
         position: relative;
         transition: transform 0.1s ease-out, color 0.3s ease-out;
         z-index: 2;
     }

     /* Flying circle */
     .circle {
         position: absolute;
         bottom: -40px;
         left: 50%;
         width: 10px;
         height: 10px;
         border: 1px solid #b9b9bb;
         border-radius: 50%;
         background-color: #b9b9bb;
         transform: translateX(-50%) translateY(100%) scale(0);
         transition: transform 0.4s ease-out, width 0.4s ease-out, height 0.4s ease-out;
         z-index: 1;
     }

     /* Hover effect */
     .buttonGroup button:hover .circle {
         transform: translateX(-50%) translateY(0) scale(8);
         width: 150px;
         height: 150px;
     }

     .buttonGroup button:hover {
         color: #ffffff;
     }

     /*------------------------------------*\
       #HELPERS
     \*------------------------------------*/

     h1 {
         font-size: 1.2rem;
         margin: 100px 10px 10px 0;
     }

     a {
         text-decoration: none;
         color: #8b8b8d;
         cursor: pointer;
     }

     p {
         font-size: 1rem;
         margin: 4.9px 10px 20px 0;
     }

     ul {
         list-style-type: none;
     }

 }