/************ Basic Resets ************/
:root {
	--blue: #557a95;
    --blue: #7395ae;
    --blue2: #659dbd;
    --blue: #5085a5;
    --blue3: #1b9ce5;
    --blue: #6cdaee;
    --blue: #2e9cca;
    --blue: #5ab9ea;
    --blue: #84ceeb;
    --blue: #a8d0e6;
    --blue: #8fc1e3;
    --blue: #d2fdff;
    --blue: #3b8beb;
    --blue5: #90ccf4;
    --blue4: #5da2d5;
    --blue: #97aabd;
    --blue: #77a6f7;
    --blue1: #d6e9fee5;
    --blue: #d3e3fc;
    --blue: #86b3d1;
    --blue: #4d6d9a;
    --blue6: #336699;

    --green: #5cdb95;
    --green3: #8ee4af;
    --green2: #afd275;
    --green1: #86c232;
    --green: #53900f;
    --green5: #15db95;
    --green: #479761;
    --green: #16ffbd;
    --green4:#06D6A0;
	--green: #78cc6d;

    --yellow: #ffe400;
    --yellow: #faed26;
    --yellow: #fccd04;
    --yellow: #fbeec1;
    --yellow: #f8e9a1;
    --yellow: #d6ce15;
    --yellow: #f3d250;
    --yellow: #fce181;

    --orange1: #fcb900;
    --orange2: #fccd04;
    --orange: #f79e02;

    --cream: #edf5e1;
    --cream: #e7e3d4;
    --cream: #edeae5;

    --white: #feffff;
    --white: #f7f9fb;
    --white1: #fff;

    --gray1: #e9ebec;

    --pink: #f172a1;
    --pink1: #e64398;
    --pink: #f78888;
    --pink: #c96567;
    --pink: #edb5bf;
    --pink: #cb2d6f;

    

    --rich-black: #061923;
    --firey-rose: #FF5964;
    --alice-blue: #EBF8FF;
    --jasmine: #FFE099;
    --tea-green: #C8D6AF;
    --tea-green-light: #F7FFEA;
    --english-violet: #48284A;

	--color-gray-light-1: #f8f8f8;
	--color-gray-light-2: #e9e9e9;
	--color-gray-light-3: #dedede;
	--color-gray-dark-1: #545454;
	--color-gray-dark-2: #737373;
	--color-gray-dark-3: #9a9a9a;
	--color-blue-dark-1: #00387f;
	--color-tiffany: #00a6a6;
	--profile-theme: #4682bf;
	--timeline-circle-theme: #14253e;
	--rich-black: #061923;
	
	--pgbar-length: 100%;

	--MATH-PI: 3.1415px;
	--percent: 100;
}

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

nav ul,
nav ol {
    list-style-type: none;
}

img {
    display: block;
    max-width: 100%;
}

a {
    text-decoration: none;
}

/************ Basic typography *************/
body,
html {
    min-height: 100%;
}

body {
	/* font-family: Century; */
	font-family: 'Victor Mono', monospace;
	
	padding: 3rem 1rem;
	min-height: 100vh;
	background-color: var(--color-gray-light-3);
}

h1,
h2,
h3,
h4 {
    font-weight: 600;
}

h2 {
    font-size: 24px;
    margin: .8em 0;
}

h3 {
    font-size: 20px;
    margin: 1em 0;
}

h4 {
    margin: 1em 0;
}

h5 {
    margin: 1em 0;
}


h6 {
    margin: 1em 0;
}


p {
    margin: 1em;
    line-height: 1.4em;
}

/************ Wrapper styles *************/
.wrapper {
	margin: 0 auto;
	max-width: 70rem;
	background-color: var(--color-gray-light-2);
	/* box-shadow: 0px 0px 15px 4px #b3b3b3; */
	box-shadow: 10px 10px #b3b3b3;
}

/************ Intro styles *************/
.intro {
	background-color: var(--color-gray-light-1);
	box-shadow: 5px 0px 15px 0px #b3b3b3;

}

.profile {
	position: relative;
	background-color: var(--profile-theme);
	padding: 2rem 1rem;
	margin-bottom: 50px;
	text-align: center;
	user-select: none;

}
.profile::after {
	content: " ";
	position: absolute;
	left: 0;
	
	bottom: -17px;
	width: 100%;
	height: 35px;
	background-color: var(--profile-theme);
	transform: skewY(-3deg);
}

.photo img {
	width: 50%;
	border-radius: 50%;
	margin-left: auto;
	margin-right: auto;
}

.photo img:hover {
	transform: scale(1.1);
    filter: grayscale(100%);
	top: 5em;
}

.bio .name {
	font-size: 1.5rem;
	text-align: center;
	color: var(--color-gray-light-1);
	margin: 0;
	margin-top: 1rem;
	font-family: 'Victor Mono', monospace;
}

.bio .name:hover, .bio .profession:hover, .bio .birth:hover {
    transform: scale(1.1);
}

.bio .profession {
	font-size: 1.1rem;
	text-align: center;
	color: var(--color-gray-light-1);
	margin: 0;
	font-family: 'Victor Mono', monospace;
	padding: 2%;
}

.bio .birth {
	font-size: 1.2rem;
	text-align: center;
	font-style: italic;
	color: var(--color-gray-light-1);
	margin: 0;
	font-family: 'Victor Mono', monospace;
	padding: 2%;
}

.intro-section {
	padding: 0 1rem;
	color: var(--color-gray-dark-1);
	
	padding-bottom: 1rem ;
}
.intro-section .title {
	color: var(--rich-black);
	font-size: 1.2rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration-thickness: 20%; 
}

.intro-section-about .paragraph{
	margin: 3% 3% ;
	font-size: 1rem;
	line-height: 1.3rem;
	text-align: justify;
}

.intro-section-link li, .intro-section-follow li{
	list-style-type: none;
}

.intro-section-link a:link, .intro-section-follow a:link{
	color: var(--color-gray-dark-1);
}

.links, .follow, .skill{
	margin: 5% 0;
}

.course{
	margin: 3% 0;
}

.sub_course{
	margin: 2% 0;
	
}

.course_list{
	display: none;
}

.intro-section-courses ul li:hover{
	cursor: pointer;
}

.intro-section-courses ul li:hover + .course_list{
	display: block;
	color: var(--profile-theme);
}

.intro-section-link i {
	color: var(--profile-theme);
	width: 20px;
	height: 20px;
}

.intro-section-link i:hover{
	transform: scale(1.2);
}

.intro-section-link ul, .intro-section-follow ul{
	margin-left: 2%;
}

.intro-section-skills li, .intro-section-courses li {
	margin-left: 4%;
}

.intro-section-courses ul ul {
	margin-left: 4%;
}

.intro-section-about, .intro-section-link, .intro-section-follow, .intro-section-language, .intro-section-courses, .intro-section-skills {
	padding: 0 1rem;
	color: var(--color-gray-dark-1);
	
	padding-bottom: 1rem ;
}

.intro-section-about .title, .intro-section-link .title, .intro-section-follow .title, .intro-section-language .title, .intro-section-courses .title, .intro-section-skills .title {
	color: var(--rich-black);
	font-size: 1.2rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration-thickness: 20%; 
}

.intro-section-follow img{
	width: 20px;
	float: left;
	margin-right: 2%;
}

.intro-section-follow img:hover{
	transform: scale(1.2);
}

.intro-section-link .links span, .intro-section-follow .follow span, .intro-section-courses .courses span, .intro-section-skills .skill span {
	position: relative;
	transition: all 0.3s;
}

.intro-section-link .links span::after, .intro-section-follow .follow span::after, .intro-section-courses .courses span::after, .intro-section-skills .skill span::after {
	position: absolute;
	content: '';
	left: 50%;
	bottom: -3px;
	width: 0;
	height: 2px;
	background-color: var(--profile-theme);
	transition: width 0.3s;
	/*transition-timing-function: cubic-bezier(.64,.51,.16,.86);*/
	transition-timing-function: cubic-bezier(.92,.57,.33,1.02);
	transform: translate(-50%, 0);
}

.intro-section-link .links span:hover, .intro-section-follow .follow span:hover, .intro-section-courses .courses span:hover, .intro-section-skills .skill span:hover {
	color: var(--profile-theme);
}

.intro-section-link .links span:hover::after, .intro-section-follow .follow span:hover::after, .intro-section-courses .courses span:hover::after, .intro-section-skills .skill span:hover::after {
	width: 100%;
}

.intro-section-about .about_img, .intro-section-link .contact_img, .intro-section-follow .follow_img, .intro-section-language .language_img, .intro-section-courses .course_img, .intro-section-skills .skills_img{
	width:25px;
	float: left;
	margin-right: 2%;
}

.intro-section-about .about_img:hover,.intro-section-link .contact_img:hover, .intro-section-follow .follow_img:hover, .intro-section-language .language_img:hover, .intro-section-courses .course_img:hover, .intro-section-skills .skills_img:hover {
	transform: scale(1.2);
}

.intro-section-language ul {
	margin-left: 2%;
	padding: 0;
	list-style: none;
}

.intro-section-language ul li {
	position: relative;
	padding: 20px 0;
}

.intro-section-language ul li:after {
	left: -20px;
}

.intro-section-language ul li .name {
	margin: 0 0 8px 0;
	font-size: 1rem;
	line-height: 1rem;
	color: #626262;
}

.intro-section-language ul li .progress {
	position: relative;
	display: block;
	width: 90%;
	height: 5px;
	background: #d8dbe2;
}

.intro-section-language ul li .progress .percentage {
	position: absolute;
	left: 0;
	top: 0;
	width: 0%;
	height: 100%;
	background: var(--profile-theme);
	/* background: #78cc6d; */
	transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	-webkit-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
}

/* .intro-section-language ul li .progress .dg span,
.intro-section-language ul li .progress .da span {
	display: block;
	width: 14px;
	height: 14px;
	background: #eee;
	-webkit-border-radius: 14px;
	border-radius: 14px;
} */



.intro-section .title_course{
	font-size: 1.2rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	letter-spacing: 1px;
	background-image: linear-gradient(to top,#5591cec0 30%,#fff 0);
	margin-right: 5px;
	
}

.intro-section .title_course:hover {
	background-image: linear-gradient(to top,#5591cec0 100%,#fff 0);
}


.info-section {
	margin: 1rem 0;
}
.info-section span {
	position: relative;
	transition: all 0.3s;
}

.info-section i {
	color: var(--profile-theme);
	width: 20px;
	height: 20px;
}

.link a {
	text-decoration: none;
	color: inherit;
}

.link span::after {
	position: absolute;
	content: '';
	left: 50%;
	bottom: -3px;
	width: 0;
	height: 2px;
	background-color: var(--profile-theme);
	transition: width 0.3s;
	
	transition-timing-function: cubic-bezier(.92,.57,.33,1.02);
	transform: translate(-50%, 0);
}

.link span:hover {
	color: var(--profile-theme);
}
.link span:hover::after {
	width: 100%;
}

/************ Detail styles *************/
.detail {
	background-color: white;
	padding: 2rem;
}
.detail:hover > .detail-section:not(:hover) {
	opacity: 0.3;
}
.detail-section {
	transition: all 0.3s;
}
.detail-section:not(:last-of-type) {
	padding-bottom: 1rem;
}
.detail-title {
	align-items: center;
}
.detail-section > .detail-content {
	padding: 1.5rem;
	padding-left: 2rem;
	user-select: none;
}

.detail-section.edu > .detail-content {
	padding-left: calc(1.5rem + 10px);
	
}

.detail-section.exp > .detail-content {
	padding-left: calc(1.5rem + 10px);
	
}

.title-icon + span {
	font-size: 1.2rem;
	transition: all 0.3s;
}
.title-icon {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 1rem;
	margin-right: 1rem;
	width: 2.5rem;
	height: 2.5rem;
	background-color: var(--profile-theme);
	border-radius: 50%;
	transition: all 0.3s;
}
.title-icon i {
	color: white;
	line-height: 1rem;
	font-size: 1rem;
	text-align: center;
}
.detail-section:hover .title-icon {
	transform: scale(1.5);
	margin-right: 1.5rem;
}
.detail-section:hover .title-icon + span {
	letter-spacing: 1.5px;
}

/* time line block in education section */
.timeline-block {
	position: relative;
	padding-left: 30px;
}
.timeline-block:not(:last-of-type) {
	margin-bottom: 1rem;	
}
.timeline-block h1 {
	font-size: 1rem;
	margin: 5px 0;
	transition: all 0.3s;
}
.timeline-block p {
	font-size: 0.8rem;
	margin: 5px 0;
}
.timeline-block time {
	font-size: 1rem;
	color: var(--color-gray-dark-2);
}
.timeline-block::before {
	position: absolute;
	content: '';
	width: 15px;
	height: 15px;
	background-color: white;
	border: 3px solid var(--timeline-circle-theme);
	border-radius: 50%;
	left: -10px;
	top: -5px;
}

.timeline-block:first-child::before {
	background-color: var(--green5);
}
.timeline-block::after {
	position: absolute;
	content: '';
	width: 3px;
	height: 100%;
	background-color: var(--timeline-circle-theme);
	left: -1px;
	top: 13px;
}
.timeline-block:hover h1 {
	color: var(--color-tiffany);
}
.timeline-block:hover::before {
	animation: circle 1.2s infinite;
}

/* Programming skills section */
.pg-list, .tool-list, .favor-list .other-list {
	padding: 0;
	list-style: none;
}
.pg-list > li {	
	margin: 1rem 0;
	display: flex;
	align-items: center;
}
.sb-skeleton {
	position: relative;
	flex: 1 0 auto;
	height: 5px;
	background-color: var(--color-gray-dark-3);
}

.pg-list span{
	font-size: 1rem;
}

.pg-list > li > span {
	flex: 0 0 100px;
}
.sb-skeleton > .skillbar {
	position: absolute;
	left: 0;
	top: -1px;
	width: var(--pgbar-length);
	height: 5px;
	background-color: var(--profile-theme);
}

/* Professional skills section */

.tool-list {
	list-style: none;
	justify-content: space-between;
}
.tool-list > li {
	position: relative;
	text-align: center;
	flex: 0 0 25%;
}
.tool-list > li > svg {
	position: relative;
	fill: transparent;
	width: 55%;
	transform: rotate(-90deg);
}
.tool-list > li > svg > circle {
	stroke-width: 1px;
	stroke: #cdcdcd;
}
.tool-list > li > svg > circle.cbar {
	stroke-width: 3px;
	stroke: var(--profile-theme);
	stroke-linecap: round;
	stroke-dashoffset: 0;
	stroke-dasharray: calc(var(--MATH-PI) * 45 * 2);
	transition: all 0.8s;
	transition-timing-function: cubic-bezier(.64,.51,.16,.86);
}
.tool-list > li:hover > svg > circle.cbar {
	stroke-width: 4px;
	stroke: var(--color-tiffany);
	stroke-dashoffset: calc(var(--MATH-PI) * 45 * 2 * (1 - var(--percent)));
}
.tool-list > li > .tl-name,
.tool-list > li > .tl-exp {
	position: absolute;
	left: 50%;
	color: var(--color-gray-dark-1);
}
.tool-list > li > .tl-name {
	top: 50%;
	font-size: 1rem;
	transform: translate(-50%, -50%);
}
.tool-list > li > .tl-exp {	
	top: calc(50% + 1.4rem);
	font-size: 1rem;
	transform: translate(-50%, -50%);
}

/* Interests Section */
.outer-frame {
	border: 1px solid var(--color-gray-dark-3);
	border-radius: 5px;
}
.favor-list {
	align-items: center;
	align-content: center;
}

.favor-list > li {
	display: flex;
	flex: 1 0 0;
	align-items: center;
	justify-content: baseline;
	flex-direction: column;
	color: var(--profile-theme);
	padding: 1rem 0;
	transition: all 0.3s;
}
.favor-list > li > i {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 40px;
	width: 50px;
	height: 50px;
}

.favor-list > li:hover {
	transform: scale(1.2);
	color: var(--color-tiffany);
}
.favor-list > li > span {
	letter-spacing: 1px;
}

/* Other Section */

.other-list > li {
	display: flex;
	flex: 1 0 0;
	align-items: center;
	justify-content: baseline;
	flex-direction: column;
	color: var(--profile-theme);
	padding: 1rem 0;
	transition: all 0.3s;
}

.other ul {
	padding: 5%;
    list-style: none;
}


.other ul li{
	margin: 5% 5%;
	list-style: none;
	padding: 10px 30px;
	background-image: url("../images/checkmark.png");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 20px;
}

@keyframes circle {
  0% {
    box-shadow: 0 0 0 0px rgba(51, 52, 57, 1);
  }
  100% {
    box-shadow: 0 0 0 6px rgba(51, 52, 57, 0);
  }
}

/* Export to PDF button */
#exportButton {
    /* width: 220px;
    height: 50px; */
	margin-top: 2%;
    padding: 5px 20px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
    font-size: 0.8rem;
}

#exportButton:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

#exportButton:active {
    color: #000
}

#exportButton:active:after {
    background: transparent;
}

#exportButton:hover:before {
    opacity: 1;
}

#exportButton:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

#exportButton:active{
    transform: scale(0.9);
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/************ Tablet Size Styles *************/
@media only screen and (min-width: 760px) {
	.wrapper {
		margin: 0 auto;
		max-width: 70rem;
		background-color: var(--color-gray-light-2);
		display: flex;
		
	}

	.intro {
		width: 30%;
		
	}

	.photo img {
		width: 40%;
	}

	.profile::after {
		content: " ";
		position: absolute;
		left: 0;
		
		bottom: -15px;
		width: 100%;
		height: 35px;
		background-color: var(--profile-theme);
		transform: skewY(-2deg);
	}

	.tool-list > li > .tl-name {
		font-size: 0.9rem;
	}

	.tool-list > li > .tl-exp {
		font-size: 0.9rem;
	}

	.tool-list > li > svg {
		width: 30%;
	}
}

/************ Desktop Size Styles *************/
@media only screen and (min-width: 1200px) {
	.wrapper {
		margin: 0 auto;
		max-width: 70rem;
		background-color: var(--color-gray-light-2);
		display: flex;
		
	}

	.intro {
		width: 30%;
		background-color: var(--color-gray-light-1);
		box-shadow: 5px 0px 15px 0px #b3b3b3;
		z-index: 5;
	}

	

	.profile {
		position: relative;
		background-color: var(--profile-theme);
		padding: 2rem 1rem;
		margin-bottom: 50px;
		text-align: center;
		user-select: none;
	}

	.photo img {
		width: 60%;
	}

	.profile::after {
		content: " ";
		position: absolute;
		left: 0;
		
		bottom: -15px;
		width: 100%;
		height: 35px;
		background-color: var(--profile-theme);
		transform: skewY(-5deg);
	}

	.bio .name {
		font-size: 1.5rem;
	}

	.bio .profession {
		font-size: 1.2rem;
	}

	.bio .birth {
		font-size: 1.2rem;
	}

	.timeline-block h1 {
		font-size: 1rem;
	}

	.timeline-block p {
		font-size: 0.8rem;
	}

	.detail {
		/* flex: 1 0 0; */
		background-color: white;
		padding: 2rem;
		/* display:flex;
		flex-flow: row wrap;
    	flex-wrap: wrap; */
	}

	/* .detail-section.edu{
		width: 50%;
	}

	.detail-section.exp{
		width: 50%;
	}

	.detail-section.pg-skill{
		width: 50%;
	}

	.detail-section.tool-skill{
		width: 50%;
	}

	.detail-section.interests{
		width: 50%;
	}

	.detail-section.other{
		width: 50%;
	} */



	.detail-title {
		display: flex;
		align-items: center;
	}

	.title-icon {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		padding: 1rem;
		margin-right: 1rem;
		width: 2.5rem;
		height: 2.5rem;
		background-color: var(--profile-theme);
		border-radius: 50%;
		transition: all 0.3s;
	}

	.title-icon + span {
		font-size: 1.1rem;
		
	}

	.pg-list > li {	
		margin: 1rem 0;
		display: flex;
		align-items: center;
	}
	.sb-skeleton {
		position: relative;
		flex: 1 0 auto;
		height: 2px;
		background-color: var(--color-gray-dark-3);
	}
	.pg-list > li > span {
		flex: 0 0 100px;
	}
	.sb-skeleton > .skillbar {
		position: absolute;
		left: 0;
		top: -1px;
		width: var(--pgbar-length);
		height: 4px;
		background-color: var(--profile-theme);
	}
	.tool-list {
		list-style: none;
		display: flex;
		justify-content: space-between;
	}
	.tool-list > li {
		position: relative;
		text-align: center;
		flex: 0 0 25%;
	}
	.tool-list > li > svg {
		position: relative;
		fill: transparent;
		width: 85%;
		transform: rotate(-90deg);
	}

	.tool-list > li > .tl-name {
		font-size: 1rem;
	}

	.tool-list > li > .tl-exp {
		font-size: 1rem;
	}

	.favor-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		align-content: center;
	}

	.favor-list > li {
		display: flex;
		flex: 1 0 0;
		align-items: center;
		justify-content: baseline;
		flex-direction: column;
		color: var(--profile-theme);
		padding: 1rem 0;
		transition: all 0.3s;
	}

	.favor-list > li > i {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		font-size: 40px;
		width: 40px;
		height: 40px;
	}

	.other ul {
		padding: 2%;
	}

	.other ul li{
		margin: 1% 1%;
		list-style: none;
		padding: 10px 30px;
		background-image: url("../images/checkmark.png");
		background-repeat: no-repeat;
		background-position: left center;
		background-size: 20px;
	}


}

@media only screen and (min-width: 1500px) {
	.intro{
		width: 30%;
	}

	.detail {
		/* flex: 1 0 0; */
		background-color: white;
		padding: 2rem;
		display:flex;
		flex-flow: row wrap;
    	flex-wrap: wrap;
		align-self: flex-start;
	}
	

	.detail-section.edu{
		width: 50%;
		
	}

	.detail-section.exp{
		width: 50%;
		
	}

	.detail-section.pg-skill{
		width: 50%;
		
	}

	.detail-section.tool-skill{
		width: 50%;
		
	}

	.detail-section.interests{
		width: 50%;
		
	}

	.detail-section.other{
		width: 50%;
		
	}

	.detail-section > .detail-content {
		padding: 1rem;
	}


	.tool-list {
		display: block;
		list-style: none;
		justify-content: space-between;
	}
	
	.tool-list > li {
		position: relative;
		text-align: center;
		flex: 0 0 25%;
	}
	.tool-list > li > svg {
		position: relative;
		fill: transparent;
		width: 30%;
		transform: rotate(-90deg);
	}
	.tool-list > li > svg > circle {
		stroke-width: 1px;
		stroke: #cdcdcd;
	}
	.tool-list > li > svg > circle.cbar {
		stroke-width: 3px;
		stroke: var(--profile-theme);
		stroke-linecap: round;
		stroke-dashoffset: 0;
		stroke-dasharray: calc(var(--MATH-PI) * 45 * 2);
		transition: all 0.8s;
		transition-timing-function: cubic-bezier(.64,.51,.16,.86);
	}
	.tool-list > li:hover > svg > circle.cbar {
		stroke-width: 4px;
		stroke: var(--color-tiffany);
		stroke-dashoffset: calc(var(--MATH-PI) * 45 * 2 * (1 - var(--percent)));
	}
	.tool-list > li > .tl-name,
	.tool-list > li > .tl-exp {
		position: absolute;
		left: 50%;
		color: var(--color-gray-dark-1);
	}
	.tool-list > li > .tl-name {
		top: 50%;
		font-size: 0.8rem;
		transform: translate(-50%, -50%);
	}
	.tool-list > li > .tl-exp {	
		top: calc(50% + 1.4rem);
		font-size: 0.9rem;
		transform: translate(-50%, -50%);
	}

	
	.outer-frame {
		border: 1px solid var(--color-gray-dark-3);
		border-radius: 5px;
		width: 50%;
	}
	.favor-list {
		display: block;
		align-items: center;
		align-content: center;
	}
	
	.favor-list > li {
		display: flex;
		flex: 1 0 0;
		align-items: center;
		justify-content: baseline;
		flex-direction: column;
		color: var(--profile-theme);
		padding: 1rem 0;
		transition: all 0.3s;
	}
	.favor-list > li > i {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		font-size: 40px;
		width: 40px;
		height: 40px;
	}
	
	.favor-list > li:hover {
		transform: scale(1.2);
		color: var(--color-tiffany);
	}
	.favor-list > li > span {
		letter-spacing: 1px;
	}


	.other ul {
		padding: 0;
		
	}
	
	
	.other ul li{
		margin: 5% 5%;
		padding: 10px 30px;
	}

	
}