/*#01F4AB*/
*{
    box-sizing: border-box;
}

:root{
/*Blue*/
    --dark: #6994b4;
	--light: #146eb4;
/*Purple*/
    /*--dark: #915DB1;
	--light: #B133FF;*/
/*Orange*/
    /*--dark: #B14610;
	--light: #FF5F0F;*/
}

body{
    background-color:#bab5af;
    margin:0 10%;
    padding:0;
}

nav{
    position: sticky;
    float:right;
    z-index: 99;
    top:0px;
    margin-top:50px;
    margin-left:-160px;
}

nav ul{
    margin:0;
    padding:0;
}

nav li{
    list-style-type: none;
    padding:5px;
    width:10em;
    margin:0px -60px 10px 0px;
    background-color:#e6e2df;
    box-shadow:3px 3px 5px var(--light);
    border-radius: 2px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:var(--light);
    text-decoration:none;
    font-weight: bold;
    cursor:pointer;
	overflow: hidden;
	white-space: nowrap;
}


.hide{
    display:none;
}

.active{
    display:block;
}

.thisPage{
    background-color:#bab5af;
}

.container{
    min-height:100vh;
    margin:0;
    box-shadow:5px 5px 5px var(--light);
    display:flex;
}

.left{
    flex:8;
    background-color:#e6e2df;
    box-shadow:-30px 0px 0px #d9d6d1;
    width:70%;
    padding:30px 0px 30px 0px;
    margin:0;
    min-height:100vh;
}

.left h1,
.left h4{
    margin:0;
    padding:0;
}

.left h4{
    color:var(--light);
    margin-left:5px;
}

.about{
    padding-left:50px
}

#info1,
#info2{
    display:inline-block;
    margin-left: 50px;
}

.right{
    flex:4;
    position: relative;
    background-color:#fff;
    width:30%;
    min-height:100vh;
    padding:30px 0px 30px 0px;
    text-align:center;
    background: linear-gradient(to bottom, var(--dark), #fff) fixed;
}

#photoID{
		margin:0 auto;
    width:150px;
		height:150px;
    border-radius:100%;
		background-image:url("media/pic.jpg");
		border:4px solid var(--dark);
		background-size:cover;
}

h2{
    background-color:var(--dark);
    padding-left:50px;
}

.details{
    margin-left:100px;
}

.inline{
    display:inline;
}

.date{
    color:var(--light);
    margin-left:20px;
    font-size:14px;
}
.job{
    font-style:italic;
}

.ico{
    width:30px;
		height:30px;
}

.samples{
	display:flex;
}

#exp p{
    margin-left:40px;
    margin-right:40px;
    text-align:justify;
}

#signature{
    margin-left:50px;
}

#interests{
    display:flex;
    flex-wrap: wrap;
    
}

#interests div{
    text-align:center;
    height:90px;
    margin:0 auto;

}

#interests p{
        text-align:center;
    }

/*Skills percentage circles*/
.circular-chart.blue .circle {
    stroke: var(--dark);
}

.single-chart {
    width: 33%;
    justify-content: space-around ;
    margin: 0 auto;
}

.circular-chart {
    display: block;
    margin: 10px auto;
    max-width: 80%;
    max-height: 250px;
}

.circle-bg {
    fill: none;
    stroke: #d9d6d1;
    stroke-width: 4;
}

.circle {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

/*End Skills Percentage Circles*/

@media (max-width:1100px){
    .right{
        display:none;
    }
}
@media (max-width:800px){
    body{
        margin:0;
    }
    .container{
        width:100%;
    }
    nav{
        position: fixed;
        margin:0;
        padding:0;
        max-width:800px;
        width:100%;
        height:52px;
        float:none;
    }
    nav ul{
        display:flex
    }
    nav ul a {
        width:100%;
    }
    nav li{
        margin:0;
        box-sizing: border-box;
        box-shadow: none;
        border-radius:0;
        border-bottom:1px solid rgba(0, 0, 0, .5);
				border-right:1px solid rgba(0, 0, 0, .5);
        width:100%;
    }
}