* {
    line-height: 1.2;
    margin: 0;
  }

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

body {
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", sans-serif;
      background-color: #071219;
      color: aliceblue;
  }
  

  /* Container for the entire page layout */
.page-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    margin: 0 auto;
    gap: 20px; /* Space between sidebar and main content */
    padding: 30px;
}

.hr {
    margin: 0;
    padding: 0;
    height: 3px;
    background: -o-linear-gradient(135deg, #4dff03, #14d0ff);
    background: linear-gradient(315deg, #4dff03, #14d0ff);
    border-radius: 100%;
    margin-bottom: 20px;
}

ul {
    right: 30px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-flex:1;
        -ms-flex:1;
            flex:1;
    gap:25px;
    list-style: none;
}

ul a {
    -webkit-column-gap: 10px;
       -moz-column-gap: 10px;
            column-gap: 10px;
    color: rgb(190, 190, 190);
    -webkit-text-decoration: solid;
            text-decoration: solid;
    font-weight: 600;
    font-size: 1.3em;
    position : relative; 
    display: inline-block; 
    -webkit-transition: 0.2s; 
    -o-transition: 0.2s; 
    transition: 0.2s;
    -webkit-transition-delay: 1s;
         -o-transition-delay: 1s;
            transition-delay: 1s; 
    letter-spacing: 1px; 
    overflow : hidden; 
}

  
  /* Mobile fixes */
  @media screen and (max-width: 768px) {
    strong, b {
      -webkit-text-stroke: 0.45px currentColor;
    }
    .has-text-white strong,
    .has-text-white b {
      -webkit-text-stroke: 0.45px #ffffff;
    }
    .subtitle{
        color: rgb(184, 184, 184);
    }
    .navbar-item{
        font-size: 0.7em;
    }
    .hero-body p, li{
        font-size: medium;
    }
    .title{
        color: #fff;
    }
    code{
        background-color: hsl(221, 14%, 14%);
        font-size: medium;
    }
  }


.mcontainer {
    top: -50px;
    right: 0;
    height: 50px;
    width: 50px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    position: absolute;
    -webkit-transition: .4s ease;
    -o-transition: .4s ease;
    transition: .4s ease;
    display: block;
}

.mcontainer.active {
    height: 260px;
}

.menu {
    height: 50px;
    width: 50px;
    display: block;
    position: relative;
    border-radius: 50px;
}

.icon {
    position: absolute;
    height: 3px;
    width: 25px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background-color: #ffffff;
}

.icon::before,
.icon::after {
    position: absolute;
    content: '';
    height: 3px;
    width: 25px;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background-color: #ffffff;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}

.icon::before {
    top: 12px;
}

.icon::after {
    bottom: 8px;
}

.menu.active .icon {
    width: 0;
}

.menu.active .icon::before {
    width: 40px;
    -webkit-transform-origin: right;
        -ms-transform-origin: right;
            transform-origin: right;
    -webkit-transform: translate(-25px, 4px) rotate(45deg);
        -ms-transform: translate(-25px, 4px) rotate(45deg);
            transform: translate(-25px, 4px) rotate(45deg);
}

.menu.active .icon::after {
    width: 40px;
    -webkit-transform-origin: right;
        -ms-transform-origin: right;
            transform-origin: right;
    -webkit-transform: translate(-25px, -6px) rotate(-45deg);
        -ms-transform: translate(-25px, -6px) rotate(-45deg);
            transform: translate(-25px, -6px) rotate(-45deg);
}

.navitems {
    width: 100%;
    visibility: hidden;
}

.mcontainer.active .navitems {
    visibility: visible;
}

li {
    list-style: none;
}

li a {
    text-transform: capitalize;
}

li a i {
    position: relative;
    display: block;
    font-size: 18px;
    padding: 20px 0;
    width: 100%;
    text-align: center;
    -webkit-transform: scale(0);
        -ms-transform: scale(0);
            transform: scale(0);
    z-index: 1;
}

li a i::after {
    position: absolute;
    content: '';
    top: 50%;
    left: 0;
    width: 8px;
    height: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    background-color: #26d07c;
    border-radius: 0 8px 8px 0;
}

li:hover a i::after {
    width: 8px;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}

.mcontainer.active .navitems li a i {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
    -webkit-transition: 0.4s ease;
    -o-transition: 0.4s ease;
    transition: 0.4s ease;
    -webkit-transition-delay: calc(0.08s * var(--i));
         -o-transition-delay: calc(0.08s * var(--i));
            transition-delay: calc(0.08s * var(--i));
}

.mcontainer.active .navitems li:hover a i {
    -webkit-transition: 0.4s ease;
    -o-transition: 0.4s ease;
    transition: 0.4s ease;
    color: #26d07c;
}

li a span {
    position: absolute;
    color: rgb(255, 255, 255);
    right: 0;
    margin: 10px 50px;
    letter-spacing: 2px;
    z-index: 1;
    font-weight: 700;
    font-size: 1.5em;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}

.mcontainer.active .navitems li a span {
    -webkit-transform: translateX(-15px);
        -ms-transform: translateX(-15px);
            transform: translateX(-15px);
    -webkit-transition: 0.4s ease;
    -o-transition: 0.4s ease;
    transition: 0.4s ease;
    -webkit-transition-delay: calc(0.08s * var(--g));
         -o-transition-delay: calc(0.08s * var(--g));
            transition-delay: calc(0.08s * var(--g));
}

.mcontainer.active .navitems li:hover a span {
    -webkit-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
            transform: translateX(-30px);
    -webkit-transition: 0.2s ease;
    -o-transition: 0.2s ease;
    transition: 0.2s ease;
    color: #26d07c;
}