/*
    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.
*/

@font-face {
	font-family: "Comic Neue";
	src: url("comicneue-regular.woff");
	font-weight: normal;}

@font-face {
	font-family: "Comic Neue";
	src: url("comicneue-bold.woff");
	font-weight: bold;}

@font-face {
	font-family: "Comic Neue";
	src: url("comicneue-oblique.woff");
    font-style: italic;
	font-weight: normal;}

@font-face {
	font-family: "Comic Neue";
	src: url("comicneue-bold-oblique.woff");
    font-style: italic;
	font-weight: bold;}

@font-face {
	font-family: "Paint the Town";
	src: url("paintthetown.ttf");
	font-weight: normal;}

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

::-webkit-scrollbar-thumb {
	background: #d3c0f7;}

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

::selection {
    color: #6f549b;
	background: #e6ddf7;}

::-moz-selection {
    color: #6f549b;
	background: #e6ddf7;}

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

body {
	background: #faf9f9;}

header {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	
	background: url(yuyuka.png) no-repeat;
	width: 900px;
	height: 548px;}

nav {
	position: fixed;
	left: 900px;
	top: 50px;
	width: 90px;
	z-index: 2;}

nav a:active, nav a:link, nav a:visited {
	display: block;
	margin-bottom: 4px;
	padding: 3px 0px 4px 10px;

	background-color: #faf9f9;
	border-left: 25px solid #e6ddf7;
	color: #4e4e4e;
	font: 14px "Comic Neue", serif;
	font-style: italic;
	text-align: left;}

nav a:hover {
	width: 50px;

	background-color: #e6ddf7;
	border-left: 25px solid #e6ddf7;
	color: #000;}

#content {
 	position: absolute;
	left: 0;
	top: 474px;
	margin: 0 auto 0;
	padding: 33px 70px 30px 70px;
	width: 760px;
	z-index: 1;

	color: #756a85;
	font-family: "Comic Neue", sans-serif;
	font-size: 16px;
	line-height: 28px;
	text-align: justify;

	background: #fff;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
	background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
	background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
	background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
	background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
	background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;

	background-size: 100% 28px;
	border-radius: 0px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.07);}

p {
	margin: 0 0 28px;}

p:last-child {
	margin: 0;}

#content:before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 30px;
	top: 0;
	width: 4px;

	border: 1px solid;
	border-color: transparent #ede4f5;}

#content:after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 30px;
	top: 0;
	width: 4px;

	border: 1px solid;
	border-color: transparent #ede4f5;}

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

h1 {
	margin: -5px 0 25px;
	padding: 0 0 0 25px;

	color: #a78ec3;
	font-family: "Paint the Town", sans-serif;
	font-size: 25px;
	font-style: normal;
	font-weight: normal;
	letter-spacing: 3px;
	line-height: 36px;
	text-align: left;
	text-transform: uppercase;}

h1:first-letter {
	color: #665083;}

b, strong {
	color: #2d09a1;}

i, em {
	color: #bc40c9;}

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

.mark {
	padding: 0 8px 0;

	background: #e9bdf1;
	color: #853ccd;
	font-weight: bold;
	text-transform: uppercase;}

blockquote {
	margin: 0px 74px 28px;
	padding: 10px 25px;

	background: #f4f4fb url(bgquote.png);
	border-radius: 25px;
	color: #6f3ddb;
	text-align: justify;}

.quote {
	color: #cb72d4;
	font-style: italic;
	font-weight: bold;}

a {
	background: #e6ddf7;
	color: #6f3ddb;
	font-weight: bold;
	text-decoration: none;}

a:hover {
	background: #ea9df9;
	color: #fff;}

/* -----------------------
INSERTS
----------------------- */

img.left {
	float: left;
	margin: 4px 21px 0 0;
	padding: 10px;

	background: url(bgimg.png);
	border-radius: 75px;}

img.right {
	float: right; 
	margin: 4px 0 0 21px;
	padding: 10px;

	background: url(bgimg.png);
	border-radius: 75px;}

img.display {
	padding: 10px;
	background: url(bgimg.png);
	border-radius: 75px;}

table {
	margin: 28px auto 28px;
	width: 100%;
	text-align: center;}

td {
	padding: 2px;}