/*
    plagiarism (noun)

        - Cambridge Dictionary:
        the process or practice of using another person's ideas or work and pretending that it is your own

        - Merriam-Webster:
        the act of using another person's words or ideas without giving credit to that person
    
        See also: https://www.plagiarism.org/article/what-is-plagiarism

    Please do NOT copy, redistribute or use any part of my work without permission,
    be it content or design, including texts, graphics and code.
    Any resources used in making this site are listed and credited at the end of the site in the credits section.
    If you have questions, ask.
*/

::-webkit-scrollbar {
	width: 10px;
	height: 10px;}

::-webkit-scrollbar-thumb {
	background: #6f84f5;}

::-webkit-scrollbar-track {
	background: #000;}

::selection {
	color: #121241;
	background: #6f84f5;}

::-moz-selection {
	color: #121241;
	background: #6f84f5;}

/* -----------------------
FRAME
----------------------- */

body {
	margin: 0;
	background: #000105 url(waterboundc.png) no-repeat;}

#frame {
	position: absolute;
	left: 0;
	top: 440px;
	width: 820px;
	padding-left: 70px;

	color: #889dc5;
	font-family: "Droid Serif", serif;
	font-size: 14px;
	line-height: 26px;}

#content {
	text-align: left;}

footer {
	margin-top: 50px;
	margin-bottom: 40px;
	text-align: center;}

.chibi1 {
	display: inline-block;
	vertical-align: middle;
	margin-right: 20px;
	width: 25px;
	height: 71px;}

.chibi2 {
	display: inline-block;
	vertical-align: middle;
	margin-left: 20px;
	width: 30px;
	height: 71px;}

.ftext {
	display: inline-block;
	vertical-align: middle;
	height: 53px;}

/* -----------------------
NAVIGATION FROM HELL
----------------------- */

nav span {
	display:none;}

nav a:active, nav a:link, nav a:visited {
	display:block;
	transition: 0s;}

nav a#intro {
	position: absolute;
	left: 94px;
	top: 413px;
	width: 51px;
	height: 22px;}

nav a#traits {
	position: absolute;
	left: 189px;
	top: 421px;
	width: 54px;
	height: 19px;}

nav a#growth {
	position: absolute;
	left: 287px;
	top: 406px;
	width: 73px;
	height: 37px;}

nav a#encore {
	position: absolute;
	left: 400px;
	top: 376px;
	width: 68px;
	height: 35px;}

nav a#site {
	position: absolute;
	left: 506px;
	top: 344px;
	width: 36px;
	height: 24px;}

nav a#index {
	position: absolute;
	left: 577px;
	top: 318px;
	width: 15px;
	height: 17px;}

nav a#intro:hover {
	background: url(navi.png) -0px -94px no-repeat;}

nav a#intro:hover {
	background: url(navi.png) -0px -94px no-repeat;}

nav a#traits:hover {
	background: url(navi.png) -95px -102px no-repeat;}

nav a#growth:hover {
	background: url(navi.png) -193px -87px no-repeat;}

nav a#encore:hover {
	background: url(navi.png) -306px -57px no-repeat;}

nav a#site:hover {
	background: url(navi.png) -412px -25px no-repeat;}

nav a#index:hover {
	background: url(navi.png) -483px 1px no-repeat;}

/* -----------------------
DESIGN
----------------------- */

p:first-of-type::first-letter {
	float: left;
	margin-left: -1px;
	padding: 13px 5px 0 0;

 	color: #a6b2f4;
	font-size: 52px;}

p {
	margin-bottom: 20px}

h1 {
	margin-bottom: 45px;
	padding: 0 60px 0 0;

	color: #6f84f5;
	font-family: "Simonetta", cursive;
	font-size: 30px;
	font-weight: normal;
	letter-spacing: 1px;
	text-align: right;
	text-transform: lowercase;}

h2 {
	margin: 50px auto 20px;
	padding: 0 0 0 40px;

	color: #6f84f5;
	font-family: "Overlock", cursive;
	font-size: 24px;
	letter-spacing: 1px;
	text-align: left;}

b, strong {
	color: #aabcc9;}

i, em {
	color: #70adea;}

u {
	border-bottom: 2px solid #3062ac;
	color: #976fc3;
	text-decoration: none;}

.def {
    border-bottom: 2px dotted #70adea;}

blockquote {
	margin: 40px auto 25px;
	padding: 10px 40px;
	width: 70%;

	border-top: 10px solid #3062ac;
	color: #7079c4;
	font-family: "Crimson Text", serif;
	font-size: 18px;
	font-weight: normal;
	line-height: 28px;}

.source {
	display: block;
	margin: -30px auto 20px;

	color: #fff;
	font-family: "Crimson Text", serif;
	font-size: 29px;
	font-weight: bold;
	text-align: right;}

.tooltip {
	display: none;
	position: absolute;

	background-color: #282e5a;
	border-radius: 5px;
	padding: 10px;
	color: #7079c4;
	font-family: "Droid Serif", serif;
	font-size: 13px;}

ul.list {
	width: 85%;
	margin: 30px 0;
	padding-left: 60px;
	color: #8aa1ce;}

ol.quote {
	margin-bottom: auto;}

.stats {
	float: right;
	margin: auto auto 10px 20px;
	padding: 5px 20px;
	
	border-left: 10px solid #3062ac;
	color: #7079c4;}

a:active, a:link, a:visited {
	color: #9073e0;
	text-decoration: none;
	transition: 0.8s;}

a:hover {
	color: #4f5fe0;}

/* -----------------------
IMAGES
----------------------- */

img.left {
	float: left; 
	margin: 13px 20px auto 10px;
	padding: 4px;

	background: url(bg_thumb1.png) center bottom no-repeat;
	border-radius: 15px;}

img.right {
	float: right; 
	margin: 13px 10px auto 20px;
	padding: 4px;

	background: url(bg_thumb1.png) center bottom no-repeat;
	border-radius: 15px;}

img.thumbnail {
	width: 166px;
	height: 93px;
	padding: 4px;

	background: url(bg_thumb1.png);
	border-radius: 15px;}

p.center {
	margin-top: 50px;
	letter-spacing: 20px;
	line-height: 60px;
	text-align: center;}

.prof {
	margin: 30px auto;
	min-height: 128px;}

.profpic {
	float: left;
	width: 120px;
	height: 120px;
	padding: 4px;

	border-radius: 50%;

	margin-right: 2rem; 
	-webkit-shape-outside:circle();
	shape-outside:circle();}

.headrow {
	height: 230px;
	width: 760px;
	margin: auto;
	text-align: center;}

.headbox {
	float: left;
	width: 190px;}

.head {
	padding: 4px;
	background: url(bg_thumb1.png) center bottom no-repeat;
	border-radius: 15px;
	margin: 10px auto 3px;}

img.petit {
	float: right; 
	margin: 5px 20px auto 10px;
	padding: 4px;}

img.buttons {
	padding: 4px;}

/* -----------------------
SUBNAVIGATION
----------------------- */

.row {
	width: 780px;
	height: 130px;
	margin: 50px auto auto;}

.box {
	float: left;
	width: 390px;}

.page {
	float: left;
	width: 120px;
	height: 120px;
	padding: 4px;

	border-radius: 50%;

	margin-right: 2rem; 
	-webkit-shape-outside:circle();
	shape-outside:circle();

	transition: 2s;}

.page:hover {
	background: url(bg_thumb2.png) center bottom;}

.box a {
	color: #aabcc9;
	font-family: "Overlock", cursive;
	font-size: 21px;
	font-weight: bold;
	text-decoration: none;}

.box a:hover {
	color: #9073e0;}

/* -----------------------
EXTRAS
----------------------- */

.fic {
	display: block;
	margin: 20px 70px;}

#buttons {
	margin-top: 30px;
	text-align: center;}

#buttons img {
	padding: 4px;}