/* nav menu for mobile/desktop  ============       */

  /* Reset */
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  body {
      background-color: var(--fontc1);
  }

  a {
      text-decoration: none;
  }

  ul {
      list-style: none;
  }

  /* Header */
  .header{
      background-color: var(--bodybgc1);
      box-shadow: 1px 1px 5px 0px var(--linkhoverc1);
      position: sticky;
      top: 0;
      width: 100%;
      z-index: 10;
  }

  /* Logo */
  .logo_img {
      display: inline-block;
      height: 2em;
      margin-left: 0.4em;
      margin-bottom: 0.8em;
  }
  .logo_text {
      color: var(--fontc1);
      font-size:2em;
      font-weight: bolder;
      margin-left: 0.5em ;
  }
  .logo_long_text {
    display: none;
  }
  .logo_short_text {
    display: inline-block;
  }

  .logo_text a  {
      background: linear-gradient(to right, #0cda4a 0%, #6663c1 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }

  /* Nav menu */
  .nav {
      display: none;
      width: 100%;
      background-color: var(--bodybgc1);
  }

  .menu a, .menu p {
      display: block;
      padding: 0.1em 0.6em;
      color: var(--fontc1);
      margin: 0em 0em 0em 0em;
  }

  .menu a:hover{
      background-color: var(--linkhoverc1);
  }

  /* Menu Icon */
  .hamb {
      cursor: pointer;
      float: right;
      padding-top: 1.4em ;
      padding-right: 1em;
  }

  .hamb_line {
      background: var(--fontc1);
      display: block;
      height: 2px;
      position: relative;
      width: 24px;
  }

  .hamb_line::before,
  .hamb_line::after{
      background: var(--fontc1);
      content: '';
      display: block;
      height: 100%;
      position: absolute;
      transition: all .2s ease-out;
      width: 100%;
  }

  .hamb_line::before{
      top: 5px;
  }

  .hamb_line::after{
      top: -5px;
  }


  .side_menu {
      display: none;
  }

  /* Toggle menu icon */

  .side_menu:checked ~ nav{
      max-height: 80%;
      display: block;
  }

  .side_menu:checked ~ .hamb .hamb_line {
      background: transparent;
  }

  .side_menu:checked ~ .hamb .hamb_line::before {
      transform: rotate(-45deg);
      top:0;
  }

  .side_menu:checked ~ .hamb .hamb_line::after {
      transform: rotate(45deg);
      top:0;
  }

  /* subnav */
  .subnav {
      position: relative;
  }
  .subnav_content {
      background-color:  var(--bodybgc1);
      width: max-content;
      z-index: 1;
      padding: 10px 10px ;
      display: block;
      left: 10%;
      width: 90%;
      position: relative;

  }

  .subnav_content a {
      color: var(--fontc1);
      text-decoration: none;
      padding: 0.1em 0.6em;
      text-align: left;
  }

  .subnav:hover .subnav_content {
      display: block;
  }

  /* Responsiveness */
  @media (min-width: 702px) {
      .logo_long_text {
        display:inline-block;
      }
      .logo_short_text {
        display: none;
      }

      .header {
        height: 3em;
      }

      .nav {
          display: block;
          height: 100%; /* 100% of  header if in desktop */
          top: 0;
          float: right;
          width: fit-content;
          background-color: transparent;
      }

      .menu li{
          float: left;
      }

      .menu a:hover{
          background-color: transparent;
          color: var(--linkhoverc1);

      }
      .menu a, .menu p {
          display: block;
          padding: 0.7em 0.6em;
          color: var(--fontc1);
          margin: 0em 0em 0em 0em;
      }

      .hamb{
          display: none;
      }

      /* subnav */
      .subnav_content {
          padding: 5px 5px ;
          margin:  0px 0px ;
          display: none;
          position: absolute;
          width: fit-content;

          left: 0;
      }
      .subnav_user {
          right: 0;
          left: auto;
      }
      .subnav_about{
          left: -2em;
      }

      .subnav_content a {
          width: max-content;
          padding: 0.7em 0.6em;
      }
  }