@import "./theme.css";

.page-experience
{
    position: relative;
    width: 100%;
    overflow: auto;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  
    box-sizing: content-box;
    gap: clamp(0.01rem, 0.5%, 15rem);
    text-align: left;
    
}



.experience
{
  position: relative;
  font-size: clamp(0.02rem, 2vw, 20rem);
  font-family: "Inter", Helvetica, sans-serif;
    font-weight: 600;
    text-align: left;
    color: var(--accent-color);
    padding: clamp(0.01rem, 2vw,20rem) 0; 
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: left;

    .counter
    {
        font-size: clamp(0.02rem, 1vw, 20rem);
    }
}


/**
 * Tabs
 */
.tabs-wrapper 
{
  display: inline;
  width: 100%;
  height: 100%;

}

.tabs {
  list-style: none;
  padding: 0;
  display: flex;
  gap: clamp(0.02rem, 1vw,20rem);
  align-items: flex-start;

  li {
    cursor: none;
    font-family: "Inter", Helvetica, sans-serif;
    font-weight: 600;
    font-size: clamp(0.02rem, 3vw, 20rem);
    color: var(--tab-inactive);
    
    &:hover {
     
      color: var(--tab-hovered);
      
    }
    &.active {
      color: var(--color-textPrimary);
    }
  }
}

  .tab-content-wrapper
  {
    display: flex;

    width: 100%;
    height: 100%;
  }



  .experiencecontainer
  {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    text-align: left;
    flex-direction: column;
    font-family:  "Inter", Helvetica, sans-serif;
    font-weight: 600;
    font-size: clamp(0.01rem, 1vw, 20rem);
    padding: clamp(0.01rem, 3vw,20rem) 0; 
   
   
  }


  .multicontainer
  {
    width: 100%;
    position: relative;
    display: inline-flex;
    justify-content: space-between;
    flex-direction: row nowrap;
  }

  .worktitlecontianer
  {
    width: 40%;
    position: relative;
    display: inline-flex;
    flex-direction: row;
  
    
  }

  .sectionspacer
  {
    display: block;
    width: 100%;
    height: clamp(0.01rem, 0.1vw,30rem);
    background-color: rgba(0, 128, 167, 0.256);
    margin-bottom: clamp(0.02rem, 1vw,20rem);
  }

  .sectionspacer.mid
  {
    margin-top:  clamp(0.02rem, 1vw,20rem);
  }


/** Work Place Links**/

  .workplace
  {
    font-size: clamp(0.01rem, 1.5vw, 20rem);
    padding: clamp(0.01rem, 0.2vw ,20rem) 0;
    background: transparent;
    display: inline-flex;
    cursor: none;
    transform: perspective(clamp(00.10rem, 2vw,20rem)) translateZ(0);
    position: relative;
    overflow: hidden;

  }


  .linkicon
  {
    fill: var(--accent-color);
    height: clamp(.01rem, 1.4vw, 20rem);
    padding-left: clamp(00.1rem,0.4vw,20rem);
  }
  


  .worktitle
  {
    font-size: clamp(0.01rem, 2vw, 20rem);
    font-weight: 800;

    padding: clamp(0.01rem, 0.2vw ,20rem) 0;
  }

  .workterm
  {
    font-size: clamp(0.01rem, 1.2vw, 20rem);
    padding: clamp(0.01rem, 0.2vw ,20rem) 0;
  }


  .detailscontainer
  {
    width: 60%;
    position: relative;
    font-family:  "Inter", Helvetica, sans-serif;
    font-weight: 600;
    font-size: clamp(0.01rem, 1.4vw, 20rem);
    text-wrap-mode: wrap;
    display: flex;
    flex-direction: column;
    color: var(--color-extraOne);
    
    
  }

  .subdetails{
    padding: clamp(0.02rem,0.6vw,20rem);
  }