body {
              font-family: 'Sinacanth', serif;
              margin: 0;
              background-color: var(--main);
              background-size: cover;
              color: var(--text-dark);
              background-image: url("https://file.garden/aiBlP24PQBWh7mO3/Banner_ForestSceneBorderless");
              background-attachment: fixed;
              background-position: center;
              overflow-x:hidden;
          }

    * {
        box-sizing: border-box;
    }
    

    /* SIDE NAVBAR */
        aside {
          width: 12%;
          color: var(--text-light);
          background-color: var(--dark-secondary);
          background-image: url("https://png.pngtree.com/png-vector/20190122/ourmid/pngtree-yellow-line-simple-framework-border-texture-grid-line-png-image_527221.png");
          background-repeat: repeat;
          background-size: 150px 150px;
          padding: 40px 10px;
          text-align: center;
          box-sizing: border-box;
          margin-right: 30px;
          position: sticky;
          top: 20px ;
          height: fit-content;
        }
        
        .side-menu {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
        
        }
           .side-menu div {
              width: 135px;
              height: 135px;
              margin-top: 5px;
              margin-bottom: 5px;
            }
           

/* ELEMENTS */


        
        main {
            flex: 1;
            padding: 20px;
            order: 2;
            text-align: center;
            background-color: rgba(217, 190, 171,0.6);
            margin-top: 50px;
            margin-bottom: 50px;
        }
        
        
        hr {
            color: var(--text-light);
            border-style: dashed;
            border-width: 2px;
            border-radius: 5px;
            width: 100%;
            margin: 20px 0;
            text-shadow: 2px 2px 3px var(--primary-accent-links);
        }
 
 /* IDS */
 
      .container {
        max-width: 1600px;
margin:auto;
  justify-content: center;
  padding: 55px 100px;
      }
      

      
      
      
          /* Menu Above Navbar */
    .menu {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      align-items: center;
    }
    
    .menu div {
      width: 150px;
      height: 150px;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    
      
              /* Navigation*/
        #navbar {
            width: 100%;
            background-color: var(--darkest);
            height: 220px;
            background-image: none;
            background-size: 100%;
            background-position: bottom;
            margin-top: 20px;
            font-size: 1.4rem;
        }

        #navbar ul {
            display: flex;
            padding: 0;
            margin: 0;
            list-style-type: none;
            justify-content: space-evenly;
        }

        #navbar li {
            
        }

        /* Navigation Links*/
        #navbar a {
            text-align: center;
            padding-top: 10px;
            color: var(--primary-accent-links);
            font-weight: 800;
            text-decoration: none;
        }

        #navbar a:hover {
            color: var(--hover-text-light);
            text-decoration: underline;
            text-decoration-style: wavy;
            animation: bounce 1.5s linear infinite;
        }
      
      
      /* --------------------------------------------------------------- */
      
      
      .projects-gallery {
        padding: 50px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
      }
      
      .projects-div {
        width: calc(50% - 100px);
        max-height: 530px;
        aspect-ratio : 1 / 1;
        margin: 50px;
        position: relative;
        align-items:center;
        text-align:center;
      }
  
    .top-div {
      position: relative;
      width:100%;
      aspect-ratio: 1 / 1;
      z-index:2;
      transition: transform 0.5s ease;
      border-radius:500px;
    }
    
        .top-div img{
          width:100%;
        }

    .bottom-div {
      position:absolute;
      width:20px;
      height:20px;
      background-color: var(--text-dark);
      border-radius: 1000px;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      z-index:1;
      
      transition: width 1s ease-out, height 1s ease-out  ;
      overflow:hidden;
    }
    
        .bottom-div img {
          width: 150vw;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
        }
        
      .hover:hover + .bottom-div {
        width:4000px;
        height:4000px;
        z-index:3;
      } 
        
    
    .text-div {
      position:absolute;
      width:80%;
      height:100px;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      opacity: 0;
    }
    
        .text-div > span {
          display: inline-block;
          color: #4D7327;
          font-family: quikens, serif;
          font-size: 0.8rem;
          text-transform: uppercase;
          background-color: var(--text-light);
          border-radius: 20px;
          vertical-align: middle;
          padding: 5px;
          width:auto ;
        }  
    
    .text-div-right {
      text-align: left;
      transition: transform 1s ease-out, opacity 1.5s ease;
    } 
    
    .text-div-left {
      text-align: right;
      transition: transform 1s ease-out, opacity 1.5s ease;
    } 
      
      .hover:hover ~ .text-div-right {
        transform: translate(100%,-50%);
        z-index:3;
        opacity: 1;
      } 
      
      .hover:hover ~ .text-div-left {
        transform: translate(-200%,-50%);
        z-index:3;
        opacity: 1;
      } 
      
      .hover:hover {
        transform: scale(1.2);
        z-index:4;
      }
      
    .title {
      color: var(--text-light);
      font-family: Aloevera, helvetica, sans;
      font-weight: bold;
      font-size: 4rem;
      margin: 0 20px;
      text-decoration: underline;
      text-underline-position: from-font;
      text-shadow: 2px 2px 3px var(--primary-accent-links);
    }