@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Sora:wght@100..800&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

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

body {
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
    z-index: -2;
    background-color: #000000;
    background-image: radial-gradient(#2a2a2a 1px, #000000 1px);
    background-size: 20px 20px;
    /* display: flex;  */
    /* justify-content: center;  */

}
.main{
    width: 100%;
    height: 85%;
}



.nav-name {
    width: 100%;
    /* margin: 1rem; */
    /* padding-top: 1rem; */
    height: auto;
    /* background-color: blue; */
    display: flex;
    justify-content: center;
    align-items: center;
}


.nav-name div {
    width: 70%;

    /* background-color: green; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.name span {
    font-size: 2.5rem;
    font-weight: 600;
    color: #8b5cf6;
    font-family: "Inter", sans-serif;

}

.name button {
    color: #e5e5e5;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 0.8rem;
    background-color: #7c3aed;
    transition: background-color 0.3s ease-in-out;
    font-family: "Space Grotesk", sans-serif;
    background: linear-gradient(to right, #7c3aed, #9c40ff);
    background-size: 200%;
    background-position: left;
    transition: background-position 0.4s ease-in-out, transform 0.2s;
}

.name button:hover {
    background-color: #6d28d9;
    background-position: right;
    transform: translateY(-2px);

}
.container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content {
    width: 70%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    color: aliceblue;
    /* background-color: red; */
    /* border-radius: 1rem; */
    
}

.left-container {
    width: 20%;
    height: 100%;
    margin-top: 1rem;
    background-color: 	#121212;
    padding: .6rem .6rem;
    border-radius: 1rem;
}
.buttons{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.tab-btn{
    font-size: 1rem;
    color: #e5e5e5;
    padding: 0.3rem 0.6rem;
    display: block;
    text-decoration: none;
    transition: background-color 0.2s;
    border: none;
    outline: none;
    border-radius: .6rem .8rem;
    margin: .7rem 0rem;
    background-color: #121212;
    font-family: "Space Grotesk", sans-serif;
}
.tabs-ctn{
    display: none;
}
.tab-btn.active{
    background-color: #7c3aed;
  color: white;
  font-weight: bold;
}

.tabs-ctn.active{
    display: block;
}

.right-container {
    width: 70%;
   
    height: 85dvh;
    margin-top: 1rem;
    padding: .2rem .8rem;
    border-radius: 1rem;
    background-color: 	#121212;
    scrollbar-width: thin; 
    scrollbar-color: #5f5f7b #1e1e2f; 
    overflow-y: auto;
    overflow-x:hidden; 
    
}

#Quickstart {
    width: 100%;
    height: 100%;
    margin: 1rem .3rem;
    height: 100%;
    /* overflow-y: auto; */
    /* padding: 1rem; */
    scrollbar-width: thin; 
    scrollbar-color: #5f5f7b #1e1e2f; 
}
#Quickstart h1{
    font-size: 1.5rem;
    color: #e5e5e5;
    font-weight: 600;
    text-align: center;
    margin: 1.4rem 0rem;
    font-family: "Space Grotesk", sans-serif;
    /* font-family: "Manrope", sans-serif; */
}
#Quickstart  h3{
  font-size:1.2rem;
  color:#e5e5e5 ;
  font-weight: 500;
  /* line-height: 10px; */
  margin-bottom: .9rem;
  font-family: "Space Grotesk", sans-serif;

}

#Quickstart p{
    font-size: 1rem;
    color: #e5e5e5;
    font-weight: 500;
    margin-bottom: .9rem;
    /* margin-top: 0.2rem; */
    /* font-family: "Inter", sans-serif; */
    font-family: "Space Grotesk", sans-serif;

}
#Quickstart span{
    font-size: .8rem;
    color:#e5e5e5 ;
    font-weight: 600;
    /* margin-bottom:2rem ; */
    /* font-family: "Manrope", sans-serif; */
    font-family: "Space Grotesk", sans-serif;
}
.p{
   margin-top: 1.4rem;
}


/* Style for the code container */
#code {
    margin: 2rem 0;
    font-family: 'Courier New', monospace;
  }
  
 
  #code pre {
    /* background: #2d2d2d;  */
    color: #e5e5e5; 
    padding: 15px;
    border-radius: 6px;
    overflow-x: auto; 
    tab-size: 2;
    border: 1px solid #444;
  }
  

  #code code {
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 1rem;
    line-height: 1.2;
  }
  .react{
    width: 100%;
    height: auto;
    padding: .6rem;
  }
  .react h3{
    /* margin: 1rem; */
    font-size: 1.2rem;
   font-family: "Space Grotesk", sans-serif;
    font-weight: 600;
}
.react h2{
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}
    

  .react span{
    margin: .8rem;
    width: 100px;
    height: auto;
    /* background-color: #2d2d2d; */
    padding: 1rem;
    border-radius: .5rem;
    color:#e5e5e5 ;
    border: 1px solid #444;

  }