:root {
    --background-color: rgb(48, 48, 48);
    --highlight-color: rgb(68, 68, 68);
    --text-color: rgb(221, 221, 221);
    --mid-color: rgb(131, 131, 131);
    --default-side-marigin: 100px; 
    --default-font-size: 24px;
    --description-font-size: 20px;
    --small-heading: 32px;

    --image-width: 100%;
}


h1{
    margin-left: var(--default-side-marigin);
    margin-right: var(--default-side-marigin);
    margin-top: 200px;
    font-size: 88px;
    color: var(--text-color);
}

h3{
    margin-left: var(--default-side-marigin);
    margin-right: var(--default-side-marigin);
    color: var(--text-color);
    font-size: 48px;
    margin-top: 100px;
    margin-bottom: 30px;
}

.aboutMe{
    margin-left: var(--default-side-marigin);
    margin-right: var(--default-side-marigin);
    margin-top: 100px;
    font-size: var(--default-font-size);
    color: var(--text-color);
}

hr{
    border: none;
    height: 1px;
    background-color: var(--mid-color);
}

.navbar{
    
    position: fixed;
    height: 60px; 
    width: 100%;
    top: 0px;
    background-color: var(--background-color);
    z-index: 10; 
}

.navbar ul{
    padding-top: 30px;
    padding-bottom: 30px;

    padding-left: 0px;
    padding-right: 0px;

    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: var(--default-side-marigin);
    margin-right: var(--default-side-marigin);
    list-style-type: none;
    background-color: var(--background-color);
    overflow: hidden;
}

.navbar button{
    /* remove default hideous styling */
    background: none; 
    background-color: transparent; 
    border: none; 
    cursor: pointer; 
    -webkit-appearance: none; 
    -moz-appearance: none;    
    appearance: none; 

    color: var(--text-color);
    font: inherit;
    font-size: var(--default-font-size);
    
}

.navbar button:hover{
    color: white;
}


.icon {
    vertical-align: middle; 
}

.socialsbar{
    position: relative;
    margin-left: var(--default-side-marigin);
    margin-right: var(--default-side-marigin);
    margin-top: 100px;
}

.iconlink{
    font-size: 48px; 
    color: var(--mid-color); 
    padding-right: 60px; 
    text-decoration: none;
}

.iconlink:hover{
    color: white;

}
.projectbutton{
    background: none; 
    background-color: transparent; 
    border: none; 
    cursor: pointer; 
    -webkit-appearance: none; 
    -moz-appearance: none;    
    appearance: none; 

    font: inherit;
    

    margin-top: 0px;
    margin-bottom: 0px;

    padding: 0px;
    overflow-x: hidden;
    white-space: nowrap;
}

.projectbutton:hover{
    background-color: var(--highlight-color);
}


.projecttitle{
    font-size: var(--default-font-size);
    text-align: left;
    color: var(--text-color);
    margin: 0px;

    margin-top: 15px;
    padding-bottom: 3px;
}

.projectsummary{
    font-size: var(--description-font-size);
    text-align: left;
    color: var(--mid-color);
    margin: 0px;

    margin-bottom: 15px;

}


.project-container {
    display: flex;

    height: 500px;

    gap: 10px; 

    margin-left: var(--default-side-marigin);
    margin-right: var(--default-side-marigin);
}

.project-item {
    flex: 1; 
    padding: 20px;
    border: 1px solid #ccc;
    text-align: center;
}


.project-description{
    text-align: left;
    font-size: var(--description-font-size);
    color: var(--text-color);
    overflow: hidden;
    
    
}

.slidebarbutton{
    /* remove default hideous styling */
    background: none; 
    background-color: transparent; 
    border: none; 
    cursor: pointer; 
    -webkit-appearance: none; 
    -moz-appearance: none;    
    appearance: none; 

    flex:1; 
    align-self: center;

    color: var(--mid-color)
}

.slidebarbutton:hover{
    color: white;
}

.project-description-content{
    overflow-y: scroll; 
    overflow-x: hidden; 
    padding-right: 5px;
    scrollbar-gutter: stable;
}

/* set scroll bar fro over content*/


.project-description-content::-webkit-scrollbar {
    width: 5px; /* or height for horizontal scrollbar */
}

.project-description-content::-webkit-scrollbar-track {
    background: var(--background-color);
}

.project-description-content::-webkit-scrollbar-thumb {
    background: var(--highlight-color);
    border-radius: 4px;
}

.project-description-content::-webkit-scrollbar-thumb:hover {
    background: var(--mid-color);
}




img {

    width: var(--image-width);
    height: auto;
}

.experience-div{
    display: flex;
    font-size: var(--default-font-size);
    color: var(--text-color);
    margin-left: var(--default-side-marigin);
    margin-right: var(--default-side-marigin);
    padding-top: 30px;
}