* {
    box-sizing: border-box;
}


body{
    overflow:hidden;
}

h2 { display: inline; padding:0;margin:0}

h1{
    font-size: 50px;
}

canvas {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	}

a:link {
  text-decoration: none;
  color : black;
}

a:visited {
  text-decoration: none;
  color : black;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

.stackexcahnge-table{
    border-collapse : collapse;
}

.stackexcahnge-table-td{
    border: none;
}

.sidebar-h3{
    margin-top: 8px;
    margin-bottom: 6px;
}

.join-with-github-div{
    margin:auto;
    font-size:10px;
}
/* 
 *
 * Profile page tab menu  
 *
 */

.tab {
  overflow: auto;
  border: 0px solid #ccc;
  padding: 10px;
}

.tab button {
  size: fit-content;
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 10px;
  transition: 0.3s;
}

.tab button:hover {
  text-decoration: underline;

}

.tab button.active {
  color: #eb3b5a;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: none;
  border-top: none;
  animation: fadeEffect 600ms; 

}

.activetab {
  display: block;
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

/*
 *  profile page layout
 */

.profile_top_container{
    display: flex;
    flex-direction: row;
    height: 95vh;
    /*
    overflow-x: hidden;
    overflow-y: auto; 
    */
}

.profile_content_container{
    flex: 80%;
    display: flex;
    flex-direction:column;
    background-color: white;
    padding: 20px;
    padding-top: 25px;
    overflow-y:auto;
}

.profile_sidebar {
    flex: 20%;
    display:none;
    flex-direction:column;
    background-color: #ffffff;
    padding-left: 25px;
    padding-top: 25px;
    
    overflow: hidden;
    white-space: nowrap;
    /*
    position: fixed;
    overflow-y: hide;
    */
}

/*
 * project list
 */

.project_row{

    display:none;
}

.project_row:hover{

    background-color : rgb(239, 239, 239);;
}

td {
    border-top: 1px solid black;
    padding-top : 10px;
    padding-bottom: 10px;
    margin : 0px;
}

.lang_tags{
    border: 3px solid black;/*#ccc;*/
    border-radius: 8px;
    font-size: 80%;
    width: fit-content;
    height: fit-content;
    padding: 3px;
    text-align: center;
    float:left;
    margin: 1px;
}

.table_row_mobile{
    max-width: 90%;
    overflow: hidden;
}

h6{
    margin:1px;
    padding:1px;
    font-size:100%;
}

/*
 * languages chart
 */


.chart_wrapper{

    height : 400px;
    width : 100%;
    float : left;
    padding : 10px;
}

/*
 * mobile-only bar 
 */

.mobile_bar_profile_pic{

    width: 50px;
    border: 1px solid #362c36;
}

.home_avatar_container{
    float:left
}

.name_username_container{

    float:left;
    margin:10px;
}

.no_margins{
    margin:0px;
}

.bio{
    overflow-wrap: break-word;
    white-space: normal;
    font-size: 70%;
}
/*
 * mobile-only bar 
 */

.name_username_container_profile{

    float:left;
    margin:10px;
}

.profile_avatar {
    width: 250px;
    height: 250px;
    border: 1px solid #362c36;

}

@media screen and (min-width : 600px) {

    .mobile_only{
        display : none;
    }

    .profile_sidebar{
        display:flex;

    }

    .project_row{

        display:flex;
    }

    .project_row_mobile{
        display : none;
    }
}

@media screen and (min-width : 1000px) {

     .chart_wrapper {   
        width : 50%;
    }
}