/* ROOT VARIABLES */
:root {
	/* COLOR VARIABLES */
	--color-white: #ffffff;
	--color-black: #000000;
	
	--color-purple-1: #6D435A;
	
	--color-red-1:#9D4355;
	--color-red-2:#FF475A; /* 255,71,90 */
	
	--color-gray-0:#001A23;
	--color-gray-1:#787891;
	--color-gray-2:#A5A5B6;
	--color-gray-3:#B0B0BF;
	--color-gray-4:#C7C7D1;
	--color-gray-5:#BCBCC8;
	--color-gray-6:#D2D2DA;
	--color-gray-7:#DDDDE3;
	--color-gray-8:#E9E9ED;
	--color-gray-9:#F4F4F6;
	
	
	--color-red-gray-3:#d3b3b3;
	
	--color-green-1: #009900;
	
	--color-bone-1:#F9F6F1;
	
	/* FONT VARIABLES */
	--font-logo:"Freeman";
	--font-body:"Alegreya Sans",sans-serif;
	--font-words:"Lusitana",serif;
	
	/* ELEVATIONS */
	--elevation-offset-7:3px 3px 8px rgba(0, 0, 0, 0.3),3px 3px 18px rgba(0, 0, 0, 0.2);
	--elevation-offset-light:3px 3px 8px rgba(0, 0, 0, 0.1),3px 3px 12px rgba(0, 0, 0, 0.05);
	--elevation-inset-circle:inset 3px 3px 5px rgba(0, 0, 0, 0.5);
	--elevation-1:3px 3px 5px rgba(0, 0, 0, 0.5);
		
	/* ELEMENT STYLES */
	--button-size: 48px;
	--item_padding: 90px;
	
	--layout-width:80vw;
	--layout-margin:calc((100vw - var(--layout-width)) / 2);
	}


        

/* ANIMATIONS */
@keyframes fade-in {
	0%   	{ opacity: 0; }
	100%   	{ opacity: 1; }
	}
	
@keyframes fade-out {
	0%   	{ opacity: 1; }
	100%   	{ opacity: 0; }
	}

@keyframes rotate {
	0%   	{ transform:rotate(360deg); }
	100%   	{ transform:rotate(0deg); }
	}

@keyframes flame {
    0%, 100% {
        transform: translateY(0px) scale(50%);
        opacity:1;
        }
    25%, 75% {
        transform: translateY(5px) scale(75%);
	    opacity:.6;
   		}
        50% {
        transform: translateY(-5px) scale(130%);
        opacity: 0.4;
        }
    }
  
        
.fadein {
	animation:fade-in;
  	animation-duration: .3s;
	}

.fadeout {
	animation:fade-in;
  	animation-duration: .3s;
	}



	
/* BODY STYLES */	
body {
	font-family: var(--font-body);
	font-size: 1em;
	line-height: 1.5em;
	color: var(--color-gray-0);
	background-color:var(--color-gray-9);
	margin:0;
	min-height:100vh;
	font-weight:500;
	}

img {
	position:relative;
	}

a {
	color:var(--color-purple-1);
	cursor:pointer;
	}
	
a:hover {
  	transition-duration: .2s;
  	color:var(--color-red-2) !important;
  	filter:none;
  	opacity:1;
	}

h1 {
	font-family:var(--font-logo);
	}
	
h2 {
	font-size:.9em;
	color:var(--color-red-1);
	font-family:var(--font-logo);
	text-align:left;
	}
	
h3 {
	font-family:var(--font-logo);
	color:var(--color-purple-1);
	font-size:18px;
	line-height:24px;
	margin-bottom:20px;
	border-bottom:1px solid var(--color-gray-6);
	width:100%;
	z-index:-1;
	text-align:left;
	}
	
	div.text h3 {
		padding-top:20px;
		}

h4 {
	font-family:var(--font-body);
	color:var(--color-purple-1);
	font-size:16px;
	line-height:18px;
	font-weight:300;
	margin-bottom:0px;
	}
	
	p.footnote {
		font-weight:100;
		color:var(--color-gray-0);
		}
	
.hot {
	color:var(--color-red-2);
	position: relative;
	display: inline-block;
	}

	.hot::before {
	    content: '';
	    position: absolute;
	    top: -10px;
	    left: -10px;
	    right: -10px;
	    bottom: -10px;
	    background: linear-gradient(
	        45deg,
	        rgba(255,71,90, 1) 0%,
	        rgba(255, 255, 255, 1) 25%,
	        rgba(255,71,90, 1) 50%,
	        rgba(255, 255, 255, 1) 65%,
	        rgba(255,71,90, 1) 100%
			);
	    z-index: -1;
	    filter: blur(12px);
	    animation: flame 10s infinite;
		}
		
		
		
input[type=text] {
	padding:12px;
	border:1px solid var(--color-gray-5);
	border-radius:5px;
	color: var(--color-gray-0);
	margin-bottom:10px;
	}

	input::placeholder {
		color:var(--color-gray-6);
		}
	
input[type=submit] {
	padding:12px;
	border:none;
	border-radius:5px;
	margin-top:20px;
	float:right;
	color:#ffffff;
	background-color:var(--color-green-1);
	cursor:pointer;
	}

	input.red[type=submit] {
		background-color:var(--color-red-2);
		}
		
	input.gray[type=submit] {
		background-color:var(--color-white);
		outline:1px solid var(--color-gray-2);
		color:var(--color-gray-2);
		}
	


span.pipe { /* SEPARATOR IN HORIZONTAL LISTS & NAVIGATION */
	color:var(--color-gray-4) !important;
	margin:0px 10px 0px 10px !important;
	padding:0px;
	display:inline;
	position:relative;
	left:0px;
	width:4px;
	content:"|";
	font-weight:normal;
	}

/* LAYOUT */
div.layout {
	position:relative;
	width:var(--layout-width);
	margin-left:var(--layout-margin);
	}
	
	
	
/* MESSAGE */
div#message {
	background-color:var(--color-purple-1);
	color:white;
	padding:0px var(--layout-margin) 0px var(--layout-margin);
	font-weight:700;
	position:relative;
	z-index:11000;
	transition: 2s;
	height:34px;
	line-height:36px;
	}
	
	
	
/* PAGE TOP */
div.top {
	position:relative;
	width:100%;
	border-bottom:1px solid var(--color-gray-1);
	font-size:24px;
	height:24px;
	text-transform:capitalize;
	}
	
	/* TOP - PAGE LINKS */
	div.top div.links {
		position:absolute;
		text-transform:uppercase;
		right:0px;
		top:0px;
		}
		
		div.top div.links a {
			float:right;
			padding-left:30px;
			font-size:14px;
			text-decoration:none;
			color:var(--color-gray-0);
			}
		
	/* TOP - PAGE IMAGE */
	div.top div.image {
			height:140px;
			width:140px;
			position:absolute;
			top:-80px;
			left:calc(50% - 70px);
			border-radius:100px; 
			background-position: center center;
			background-repeat:no-repeat;
			background-size:140px 140px;
			box-shadow:var(--elevation-inset-circle);
			}	

		
/* LISTS */
div.list {
	font-size:20px;
	width:100%;
	text-align:left;
	padding-top:50px !important;
	}
	
	div.list div.list_section {
		font-size:40px;
		line-height:14px;
		font-weight:bold;
		width:100%;
		border-bottom: 1px solid var(--color-gray-3);
		margin-top:30px;
		margin-bottom:10px;
		color:var(--color-gray-3);
		}
		
		div.list_section:first-of-type {
			margin-top:0px !important; /* ELIMINATE SPACE BETWEEN SECTIONS FOR THE FIRST SECTION */
			}

	div.list div.list_item {
		font-weight:normal;
		width:100%;
		float:left;
		}
	
	div.list div.list_item a {
		color:var(--color-black);
		text-decoration:none;
		}


/* LISTS - LIST OF TAGS */
div.list.list_topics {
	font-size:16px;
	line-height:16px;
	}
	
	div.list.list_topics div.list_item {
		color:var(--color-gray-0);
		width:200px; /* CREATES COLUMNS */
		}
		
		div.list.list_topics div.list_item a {
			color:var(--color-gray-0);
			text-decoration:none;
			}
			
			
/* LISTS - LIST OF JOKES */
div.list_joke_q {
	margin-top:20px;
	font-weight:600 !important;
	font-size:18px;
	}

div.list_joke_a {
	color:var(--color-gray-0);
	font-weight:200 !important;
	font-size:18px;
	}	
			
			

/* LISTS - LIST OF PEOPLE */			
div.list.list_people div.list_text {
	position:relative;
	}
	
div.list.list_people span.occupation {
	font-size:13px;
	font-weight:300;
	position:absolute;
	top:-20px;
	left:0px;
	height:0px;
	color:var(--color-gray-2);
	}
	
div.list.list_people div.people_name {
	display:block;
	float:left;
	font-size:17px;
	}
	
div.list.list_people span.people_flag {
	font-size:10px;
	line-height:16px;
	height:16px;
	width:16px;
	background-color:#ddd;
	border-radius:3px;
	display:block;
	float:left;
	margin-left:10px;
	text-align:center;
	position:relative;
	top:14px;
	}	
			
			
			
/* LISTS - LIST OF COLLECTIONS */
div.collection_list {
	}
		
	div.collection_list a.list_item {
		position:relative;
		width:calc(33% - .65vw - 2px);
		height:130px;
		float:left;
		border:1px solid var(--color-white);
		outline:1px solid var(--color-white);
		margin:.6vw;
		border-radius:12px;
		overflow:hidden;
		color:var(--color-gray-0);
		text-decoration:none;
		filter:grayscale(15%);
		box-shadow:var(--elevation-offset-light);
		}
			
		div.collection_list a.list_item:hover {
			filter:grayscale(0%);
			border:1px var(--color-red-2) solid;
			transition:.5s;
	        transform: translate(-1px, -1px);
			}
		
		div.collection_list a.list_item:nth-child(3n + 1) {
			margin-left:0px;
			}
			
		div.collection_list a.list_item:nth-child(3n) {
			margin-right:0px;
			}
	
		div.collection_list a.list_item img {
			height:140%;
			width:auto;
			min-width:100%;
	        position: absolute;
	        top: 30%;
	        left: 50%;
	        transform: translate(-50%, -50%);
			}
			
		div.collection_list a.list_item p {
			position:absolute;
			z-index:300;
			bottom:-20px;
			background-color:#fff;
			width:calc(100% - 20px);
			height:30px;
			left:0px;
			padding:5px 10px 20px 10px;
			opacity:95%;
			font-weight:400;
			font-size:16px;
			line-height:21px;
			}



		
		
		
/* ITEM RIDER */
div.rider,
span.rider {
	font-family:var(--font-body);
	color:var(--color-gray-2);
	text-transform:uppercase;
	font-weight:300;
	font-size:90%;
	vertical-align:middle;
	display:inline;
	}
	
	div.rider::before,
	span.rider::before {
		content: "|";
		font-size:70%;
		vertical-align:middle;
		padding-right:5px;
		margin-left:5px;
		}
	
	div.rider a,
	span.rider a {
		text-decoration:none;
		color:var(--color-gray-2);
		}
		
		div.rider a:hover,
		span.rider a:hover {
			color:var(--color-red-2);
			}
			
	


			

/* ITEMS */
div.item,
div.list {
	width:100%;
	min-height:200px;
	position:relative;
	font-size: 32px;
	line-height:44px;
	padding-top:var(--item_padding);
	padding-bottom:var(--item_padding);
	border-bottom:1px solid var(--color-gray-7);
	}
		
	div.item div,
	div.list div {
		color: var(--color-gray-0);
		opacity: 0;
		animation: fade-in 1s forwards 0s;
		padding-bottom:10px;
		}
		
		/* ITEM - LONG TEXT */
		div.item div.long {
			font-size:22px;
			line-height:34px;
			text-align:left;
			}
		

/* ITEMS - SPECIFICS */
div.jokes, div.insults, div.oneliners, div.knockknocks, div.lovelines, div.facts, div.questions {
	text-align:center;
	}
	
/* ITEMS - JOKES */
div.jokes div.image {
		height:80px;
		width:80px;
		padding:0;
		position:absolute;
		top:-55px;
		left:calc(50% - 40px);
		border-radius:80px; 
		background-position: center center;
		background-repeat:no-repeat;
		background-size:100px 100px;
		box-shadow:box-shadow:var(--elevation-inset-circle);
		z-index:10000;
		}

div.jokes div.q {
	color:var(--color-gray-2);
	font-weight:300;
	}
	
div.jokes div.a {
	color:var(--color-red-1);
	font-weight:500;
	opacity:0;
	animation: fade-in 1s forwards 7s;
	margin-top:calc(var(--item_padding) / 2);
	}
	

/* ITEMS - QUOTES */
div.item.quotes {
	padding-top:calc(var(--item_padding) / 2);
	padding-bottom:calc(var(--item_padding) / 2);
	}
		
		div.item.quotes div.text {
			margin:40px 0px 0px 200px;
			}
			
		div.item.quotes div.quotee.name {
			font-size:24px;
			line-height:28px;
			margin-top:30px;
			color:var(--color-red-2);
			margin-left:200px;
			}
		
		div.item.quotes div.quotee.name a {
			text-decoration:none;
			}
			
		div.item.quotes span.quotee.occupation {
			color:var(--color-gray-1) !important;
			font-weight:300;
			}
		
		div.item.quotes div.quotee.bio,
		div.item.quotes div.quotee.story,
		div.item.quotes div.quotee.life {
			font-size:16px;
			line-height:24px;
			margin:0px 0px 15px 200px;
			}
		
		div.item.quotes div.quotee.story {
			color:var(--color-gray-1);
			margin-left:200px;
			}
		
	div.item.quotes img {
		position:absolute;
		left:-55px;
		top:calc(var(--item_padding) / 2);
		height:200px;
		width:200px;
		z-index:2;
		box-shadow:var(--elevation-offset-7);
		border:12px solid white;
		}



	
	
/* ITEMS - FACTS */
div.item.facts div.has_image {
	text-align:left;
	}
			
div.item.facts img {
	float:right;
	position:relative;
	top:-91px;
	left:50px;
	max-height:270px;
	max-width:450px;
	z-index:10000;
	filter:grayscale(33%);
	border-bottom:20px solid var(--color-gray-5);
	border-top:1px solid var(--color-gray-1);
	}
	
div.item.facts a.fact_source {
	font-size:14px;
	color:var(--color-gray-3);
	position:relative;
	top:-10px;
	}

		
/* ITEMS - KNOCK KNOCK JOKES */
div.item.knockknocks div { opacity:0; }
	
	div.item.knockknocks div.kk { animation: fade-in 1.5s forwards 0s; }
	div.item.knockknocks div.wt { animation: fade-in .1s forwards 2s; }
	div.item.knockknocks div.one { animation: fade-in .1s forwards 3s; }
	div.item.knockknocks div.two { animation: fade-in .1s forwards 4s; }
	div.item.knockknocks div.three { animation: fade-in 1.5s forwards 5.5s; color:var(--color-red-2); }

		

/* ITEMS - WORDS */
div.item.words,
div.list.list_words {
	font-family:var(--font-words);
	font-size:24px;
	text-align:left;
	font-weight:400;
	padding-top:calc(var(--item_padding) / 2 - 10px);
	padding-bottom:calc(var(--item_padding) / 2 + 10px);
	}
	
	div.list.list_words a {
		color:var(--color-gray-0);
		text-decoration:none;
		}
		
	div.item.words div.text {
		font-weight:700;
		font-size:40px;
		}
		
	div.item.words div.definition {
		font-weight:700;
		margin:10px 0px 40px 0px;
		}
	
		
	div.item.words div.example {
		font-weight:400;
		}
	
	div.item.words div.source {
		color:var(--color-gray-1);
		font-size:18px;
		}

		div.list div.list_text {
			width:33%;
			float:left;
			min-width:260px;
			}
			
			
			
		
	
/* ADMIN NAVIGATION - UPPER RIGHT OF A CONTENT DIV */
div.admin_navigation { 
	position:absolute;
	top:25px;
	right:0px;
	z-index:900;
	width:100%;
	}
	
	div.admin_navigation a {
		color:var(--color-gray-2);
		text-decoration:none;
		padding:3px 0px 0px 24px;
		text-transform:uppercase;
		font-size:11px;
		float:right;
		}
	
		div.admin_navigation a.delete {
			opacity:50%;
			}


div.debug, div.dev {
	float:left;
	height:14px;
	border-radius:3px;
	background-color:var(--color-gray-1);
	color:white;
	font-size:10px;
	font-weight:500;
	line-height:14px;
	text-transform:uppercase;
	padding:3px 5px 3px 5px;
	letter-spacing:.5px;
	margin:5px 5px 0px 0px;
	}
	
div.dev {
	background-color:var(--color-red-1);
	}
	
/* ADMIN - DIALOG BOXES */
div.admin_menu_item {
	display:none;
	width:500px;
	font-size:16px;
	position:absolute;
	top:40px;
	right:0px;
	background-color:#fff;
	border-radius:10px;
	box-shadow:
	1px 1px 2px rgba(0, 0, 0, 0.3),
	3px 3px 3px rgba(0,0,0, 0.2);
	z-index:10000;
	padding:10px 20px 20px 20px;
	text-transform:none !important;
	opacity:90%;
	}

	div.admin_menu_item label {
		font-size:16px;
		}

	div.admin_menu_item input[type=text]{
		width:calc(100% - 24px);
		display:block;
		}

	div.admin_menu_item select {
		display:block;
		padding:10px;
		border-radius:3px;
		border-color:#aaa;
		}
	
	div.admin_menu_item textarea {
		width:calc(100% - 44px);
		height:200px;
		font-size:12px;
		display:block;
		padding:20px;
		}
		
	input.red[type="submit"]{
		float:left;
		}
		


/* SEARCH */
div.search_form {
	margin:10px 0px 0px 0px;
	}
	
	div.search_form input {
		width:300px;
		}