:root{
	--font-primary: Arial, Helvetica, sans-serif;
	--max-width: 920px;
	--bg: #282a36;
	--co: #f8f8f2;

	--co-one: #f8f8f2;
	--co-two: #ff79c6;
	--co-three: #ffa0d6;
	--co-four: #bd93f9;
	--co-five: #f1fa8c;
	--co-six: #44475a;
	/*
	--co-seven: ;
	--co-eight: ;
	--co-nine: ;
	--co-ten: ;
	*/

	--text-color: var(--co-one);
	--text-color-secundary: var(--co-two);
	--text-color-opaque: rgba(168, 168, 161, 0.7);

	--header__content-bg: transparent;
	--header__primary-co: var(--text-color);
	--header__primary-bg: transparent; /* gainsboro */

	--navbar-bg: transparent; /* antiquewhite */
	--navbar-link-co: var(--co-two);
	--navbar-link-hover-co: var(--co-three);

	--content-co: var(--text-color);
	--content-bg: transparent;

	--title-co: #bd93f9;
}

*{
	margin: 0;
	padding: 0;
	font-family: var(--font-primary);
}

body{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 100vh;
	color: var(--co);
	background-color: var(--bg);
}

.header, .footer, .main-content{
	display: flex;
	justify-content: center;
}

.header__content, .footer__content{
	display: flex;
	flex-direction: column;
	gap: 18px;
	flex: 1;
	max-width: var(--max-width);
	padding: 20px 12px;
	background-color: var(--header__content-bg);
}

.header__content{
	border-bottom: 5px solid var(--co-two);
	border-style: none none dashed none;
}

.footer__content{
	border-top: 5px solid var(--co-two);
	border-style: dashed none none none;
}

/* Content primary */
.header__primary{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	color: var(--header__primary-co);
	background-color: var(--header__primary-bg);
}

/* Title */
.header__primary-title{
	color: var(--text-color-secundary);
	font-weight: bold;
	text-decoration: none;
}

/* Title hover */
.header__primary-title:hover{
	color: var(--co-three);
}

/* Title Figure */
.header__primary-title{
	border: 2px solid var(--text-color-secundary);
	border-radius: 15px 50px 50px 15px;
	padding: 8px 12px;
	box-shadow: 2px 3px 0px 0px var(--text-color-secundary);
	transition: .2s;
}

/* Title Figure hover */
.header__primary-title:hover{
	border-color: var(--co-three);
	border-radius: 50px 50px 50px 50px;
	box-shadow: 0px 3px 0px 0px var(--co-three);
}

/* Text */
.header__primary-text{
	color: var(--text-color);
}

/* ----------- Navbar -----------*/

.navbar{
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
	background-color: var(--navbar-bg);
}

.icon-link{
	color: var(--navbar-link-co);
	text-decoration: none !important;
}

.icon-link:hover{
	color: var(--navbar-link-hover-co);
}

.icon-link:hover .icon-link__text{
	text-decoration: underline;
}

.icon-link__icon{
	margin-right: 4px;
}

/* ----------- Footer -----------*/
.copy{
	text-align: center;
}

.copy, .copy a{
	font-size: 14px;
}

.copy a{
	color: var(--co-two);
	text-decoration: none;
}

.copy a:hover{
	color: var(--co-three);
	text-decoration: underline;
}

/* ----------- Content -----------*/

.main-content{
	flex: 1;
}

.content{
	flex: 1;
	max-width: var(--max-width);
	padding: 20px 12px;
	color:	var(--content-co);
	background-color: var(--content-bg);
}

.content a{
	color: var(--co-two);
	text-decoration: none;
}

.content a:hover{
	color: var(--co-three);
	text-decoration: underline;
}

.end-content{
	margin-top: 100px;
}

/*---- Bio Card ---- */
.bio-card{
	display: flex;
	gap: 25px;
	align-items: center;
	padding: 8px 12px;
	margin: 25px 0px;
	border: 2px solid #ff79c6;
	border-style: dashed;
}

.bio-card__image{
	max-width: 100px;
	max-height: 100px;
}

.bio-card__image img{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 1px solid black;
}

.bio-card__content{
	flex: 1;
}

/*---- Table of Contents ---- */
.table-of-contents{
	padding: 8px 12px;
	margin: 25px 0px;
	border: 2px solid #ff79c6;
	border-style: dashed;
	font-size: smaller;
}

.icon-image{
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

ul, ol{
	margin-left: 26px;
	line-height: 28px;
}

.entries-list li,
.table-of-contents__list li{
	list-style: disclosure-closed;
}

.content figure{
	margin: auto;
	text-align: center;
}

.content figure img{
	max-width: 100%;
}

.content figure p{
	color: var(--text-color-opaque);
	font-size: smaller;
}

.content blockquote{
	border-left: 4px solid var(--co-two);
	margin: 12px 0px;
	padding: 8px 12px;
	background-color: var(--co-six);
}

h1, h2, h3{
	color: var(--title-co);
	padding: 8px 0px;
}

h1.site-title{
	color: var(--co-five);
}

p{
	margin: 12px 0px;
	line-height: 26px;
}

hr{
	margin: 12px 0px;
	border-bottom: 4px solid #ff79c6;
	border-style: none none dashed none;
}

.t-left{
	text-align: left;
}

.t-center{
	text-align: center;
}

.t-right{
	text-align: right;
}

.t-small{
	font-size: smaller;
}

.t-bold{
	font-weight: bold;
}