/* LAYOUT */

:root {
  --displaycolor: #878769;
}

* {
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: Palm;
  font-weight: 300;
  src: url("../fonts/palm-os.ttf") format('truetype');
}

@font-face {
  font-family: Palm-Bold;
  font-weight: 300;
  src: url("../fonts/palm-os-bold.ttf") format('truetype');
}

body {
	font-family: Palm;
	font-size: 22px; 
	color: #000;
	max-width: 45rem;
	margin: 0 auto;
	background:#2a2a2a;
}

a {
	color:#000;
	text-decoration:none;
}

a:link, a:visited {
	color:#000;
	text-decoration:none;
}

.logo {
	font-family: Palm;
	color:#fff;
	text-decoration:none;
	font-size:80px;
	text-align:center;
	position:fixed;
	top:50%;
	left:50%;
	width:340px;
	height:50px;
	margin-top:190px;
	margin-left:-170px;
	font-weight:bold;
	line-height:80px;
}

.logo a {
	color: #fff;
}

.logo_heart {
	background-image: url('../images/pixelheart.png');
	background-size:44px;
	height:44px;width:44px;
	display:inline-block;
	margin: 0 10px 0 6px;
}

footer {
	border-top:1px solid #fff;
	color:#fff;
	font-size:18px;
	line-height:36px;
	width:300px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-154px;
	margin-top:260px;
	text-align:center;
}

footer a, footer a:visited, footer a:link, .logo:visited  {
	color:#fff;
	text-transform: uppercase;
	text-decoration: none;
}

footer a:hover {
}

.content {
	 position:absolute;
	 left:50%;top:50%;
	 margin-left:-160px;
	 margin-top:-280px;
	 width:320px;
	 height:460px;
	 background-size:100%;
	 background-image: url('../images/pda.svg');
	 background-repeat: no-repeat;
}

.pda {
	  padding:3px 10px;
	  position:absolute;
	  top:30px;left:34px;
	  height:240px;
	  width:230px;
}

.pda h1 {
  font-family: Palm-Bold;
	background:#000;
	padding:1px 5px 1px 5px;
	line-height:20px;
	font-size:22px;
	font-weight:bold;
	width: 45%;
	border-radius:2px 2px 0 0;
	margin-top:9px;
	margin-bottom:4px;
	color: var(--displaycolor);
}

.pda p {
	line-height:20px;
	margin:0 0 20px 0;
}

.pda table {
	width:220px;
	top:51px;
	padding:0;
	margin:-25px 0 20px 0;
}

table td {
padding:0;
line-height:18px;
text-align:center;
}

strong {
	font-family: Palm-Bold;
}

ul, ol {
	margin-left:0px;
	margin-top:-20px;
	column-count:2;
	line-height:16px;
	padding:0;
	width:230px;
	list-style: none;
}

li {
	margin:0 0 0 5px;
	line-height:20px;
}

li:before {
	content: "- ";
}

.pda a {
	color:#000;
	text-decoration: none;
	background-color:rgba(0,0,0,0.1);
	padding:0;
	}
	
.pda a:before {
	content: "[";
}
.pda a:after {
	content: "]";
}

.pda a:hover {
	color:var(--displaycolor);
	background-color:rgba(0,0,0,1);
}

.text_post {

}

/* UI */

.scrollbar_empty {
	position:absolute;
	background-image:url(../images/scrollbar.svg);
	background-size:100%;
	height:152px;width:6px;display:block;
	top:50px;
	right:9px;
}

.scrollbar_top, .scrollbar_bottom {
	position:absolute;
	background-image:url(../images/scrollbar_top.svg);
	background-size:100%;
	background-repeat: no-repeat;
	height:10px;width:14px;display:block;
	top:40px;
	right:5px;
	cursor: pointer;
}

.scrollbar_bottom {
	transform: rotate(180deg);
	top:202px;
}

.scrollbar {
	position:absolute;
	background-color:#000;
	height:76px;width:6px;display:block;
	right:9px;
}

#scrollbar_1 {
	top:50px;
}

#scrollbar_2 {
	top:126px;
}

.clickbar {
	position:absolute;
	background-color:transparent;
	height:76px;width:6px;display:block;
	right:9px;
	cursor:pointer;
}

.clickbar:hover {
	background-color:#000;
	opacity:0.25;
}

#clickbar_1 {
	top:50px;
}

#clickbar_2 {
	top:126px;
}


.button {
	position:absolute;
	border-radius:4px;
	padding:0px 4px;
	line-height:20px;
	border:2px solid #000;
	cursor:pointer;
	color: #000;
	text-decoration: none;
	min-width:36px;
	background: var(--displaycolor);
	text-align:center;
}

.button:hover {
	background:#000;
	color: var(--displaycolor);
}

.text_button1 {
	top:258px;
	left:42px;
}

.text_button2 {
	top:258px;
	left:94px;
}

.text_button3 {
	top:258px;
	left:149px;
}

.b_details_0 {
	display:none;
	border: 2px solid #000;
	background:  var(--displaycolor);
	width:234px;height:106px;
	padding:0;
	position:absolute;
	top:172px;
	left:39px;
	border-radius:4px;
	z-index:2000;
}

.b_details_1 {
		 color:  var(--displaycolor);
		 background:#000;
		 padding:2px 5px;
		 text-align:center;
		 font-weight:bold;
}

.b_details_2 {
		 background: var(--displaycolor);
		 color: #000;
		 padding:0px 6px 0 8px;
		 line-height:16px;
		 border-radius:200px;
		 text-align:center;
		 font-weight:bold;
		 position:absolute;
		 right:5px;
		 font-weight:bold;
		 top:3px;
		 font-size:18px;
}

.b_details_3, .b_details_4, .b_details_5 {
			position:absolute;
			color:#000;
			left:10px;
			top: 32px;
			font-weight:normal;
}

.b_details_4 {
			top: 52px;
			left:41px;
}

.b_details_5 {
			top:79px;
			left:6px;
			width:60px;
}

.app_box_0 {
	position: absolute;
	border:2px solid #000;
	border-radius:5px;
	background:  var(--displaycolor);
	width:234px;height:236px;
	padding:0;
	top:42px;
	left:39px;
	z-index:2000;
}

.app_box_0 a:hover {

}

.app_box_1 {
	position:absolute;
	width:234px;height:1px;
	background:#000;
	bottom:28px;
}

.app_box_battery0 {
	position:absolute;
	bottom:6px;
	left:78px;
} 

.app_box_battery1 {
	position:absolute;
	bottom:8px;
	left:143px;
	width:80px;
	height:12px;
	background:#000;
} 

.app_box_time {
	position:absolute;
	left:8px;
	bottom:6px;
}

.about_box_0 {
	position:absolute;
	top:42px;left:39px;
	height:20px;
	width:226px;
	border:2px solid #000;
	border-radius:2px;
	background:  var(--displaycolor);
	padding:0 4px;
	line-height:20px;
	z-index:2000;
}

.about_box_1 {
	position:absolute;
	background:#000;
	color:  var(--displaycolor);
	padding:0px 6px 1px 6px;
}

.about_box_2 {
	position:absolute;
	border:2px solid #000;
	top:22px;
	background:  var(--displaycolor);
	padding:0 4px;
	cursor:pointer;
}

.about_box_2:hover {
	color:  var(--displaycolor);
	background: #000;	
}

.about_screen_0 {
	position: absolute;
	border:2px solid #000;
	border-radius:5px;
	background:  var(--displaycolor);
	width:234px;height:236px;
	padding:0;
	position:absolute;
	top:42px;
	left:39px;
	z-index:2000;
	line-height:20px;
	font-weight:bold;
}

.about_screen_1 {
	position:absolute;
	background:#000;
	color:  var(--displaycolor);
	width:100%;
	text-align:center;
}

.about_screen_2 {
	position:absolute;
	text-align:center;
	top:142px;
	width:100%;
	text-align:center;
	left:0px;
}

.about_screen_logo {
	position:absolute;
	background-image: url('../images/pixelheart.png');
	background-size:72px;
	height:72px;width:72px;
	left:50%;
	margin-left:-36px;
	top:46px;
	filter:grayscale(1);
}

.about_button {
	bottom:10px;
	padding:0 10px;
	left:86px;
}

.construction {
	position:absolute;
	top:87px;left:16px;
	width:90px;
	line-height:16px;
}

/* PALMPIX */

.palmpix_box_0 {
	position:absolute;
	background:  var(--displaycolor);
	height:190px;width:240px;
	display:block;
	left:38px;
	top:67px;
}

.palmpix_box_1, .palmpix_box_2 {
	position:absolute;
	background:  var(--displaycolor);
	right:46px;
	top:44px;
	height:18x;
	width:80px;
	text-align:right;
}

img[src$='#palmpix_sw'] {
  display: block;
  position:absolute;
  top:42px;
  width: 228px;
  height: auto;
  z-index:1000;
  border:2px solid #000;
}

img[src$='#blogpic_sw'] {
  display: block;
  margin-top:12px;
  margin-bottom:-7px;
  width: 228px;
  height: auto;
  z-index:1000;
  border:2px solid #000;
}

img[src$='#collectpic_sw'] {
  display: block;
  position:absolute;
  top:43px;
  width: 228px;
  height: auto;
  z-index:1000;
  border:2px solid #000;
}

img[src$='#palmpix_sw'], img[src$='#blogpic_sw'], img[src$='#collectpic_sw']{
  filter: grayscale(1) contrast(1.5) sepia(1) hue-rotate(20deg) brightness(0.7) saturate(0.8);
}

img[src$='#startpic_sw'] {
  display: block;
  margin-top:12px;
  margin-bottom:-7px;
  width: 228px;
  height: auto;
  z-index:1000;
  border:2px solid #000;
}

#palmpix_co {
  display: block;
  position:absolute;
  top:42px;
  width: 228px;
  border:2px solid #000;
  height: auto;
  z-index:1000;
}

#collection_co {
  display: block;
  position:absolute;
  top:42px;
  width: 228px;
  border:2px solid #000;
  height: 172px;
  background-size:75%;
  background-position:center;
  z-index:1000;
}

.palmpix_nav_1, .palmpix_nav_2 {
	position:absolute;
	height:20px;width:16px;
	display:block;
	background-image:url('../images/Arrow.svg');
	background-repeat:no-repeat;
	background-size:100%;
	bottom:183px;
	right:47px;
	z-index:2000;
}

.palmpix_nav_2 {
	right:65px;
	transform:rotate(180deg);
}

/* Blog */

.list_box_0 {
	position:absolute;
	background:  var(--displaycolor);
	height:190px;width:238px;
	display:block;
	top:9px;left:8px;
	height:215px;
	z-index:1000;
}

.list_box_0 p {
	margin-top:25px;
}

.list_box_0 h1 {
	color: var(--displaycolor);
	margin-top:3px;
}

.header_line {
	display:block;
	width:232px;height:2px;
	position:absolute;
	background:#000;
	top:32px;
}

.text_lines {
	background-color: var(--displaycolor);
	background-image:url('../images/lines.svg');
	background-size:232px;
	background-position:left bottom;
	background-repeat:no-repeat;
	width:224px;height:180px;
	overflow: hidden;
	padding:0 8px 0 0;
}

.post-snippet {
	line-height:10px;
}

/* COLLECTION */

.palmyear {
	position:absolute;
	background:  var(--displaycolor);
	right:12px;
	top:14px;
	height:18px;
}

.c_palm_0, .c_handspring_0, .c_clie_0, .c_newton_0, .c_other_0, .c_pix_0, 
.c_palm_0, .c_handspring_0, .c_clie_0, .c_newton_0, .c_other_0, .c_pix_0, 
.c_blog_0, .c_todo_0, .c_note_0, .c_keyboard_0 {
	position:absolute;
	height:40px;width:60px;display:block;
	background-size:40px 40px;
	background-repeat: no-repeat;
	background-position:top center;
	padding: 42px 0 0 0;
	text-align:center;
	cursor:pointer;
}

.c_palm_0 {
	background-image:url('../images/p_palm.png');
	top:12px;
	left:3px;
}

.c_keyboard_0 {
	background-image:url('../images/keyboard.svg');
	top:77px;
	right:62px;
}

.c_handspring_0 {
	background-image:url('../images/p_handspring.png');
	top:12px;
	left:58px;
}

.c_clie_0 {
	background-image:url('../images/p_clie.png');
	top:12px;
	right:62px;
}

.c_newton_0 {
	background-image:url('../images/p_newton.png');
	top:12px;
	right:7px;
}

.c_other_0 {
	background-image:url('../images/p_other.png');
	top:77px;
	right:7px;
}

.c_blog_0 {
	background-image:url('../images/p_cal.png');
	top:142px;
	left:3px;
}

.c_pix_0 {
	background-image:url('../images/p_pix.png');
	top:142px;
	left:58px;
}

.c_todo_0 {
	background-image:url('../images/p_podcast.png');
	top:142px;
	right:62px;
}

.c_note_0 {
	background-image:url('../images/p_notes.png');
	top:142px;
	right:7px;
}

/* LOCKSCREEN */

.lock_screen_01, .lock_screen_02, .lock_screen_03 {
	position:absolute;
	background-size:240px;
	height:240px;width:240px;
	top:42px;left:38px;
	z-index:5000;
}

.lock_screen_01 {
	background-image:url('../images/lock1.png');
	background-color: var(--displaycolor);
}

.lock_screen_02 {
	background-image:url('../images/lock2.png');
	background-color: var(--displaycolor);
}

.lock_screen_03 {
	background-image:url('../images/lock3.png');
	background-color: var(--displaycolor);
}

.lock_close_01, .lock_close_02, .lock_close_03 {
	position:absolute;
	height:30px;width:30px;
	display:block;
	z-index:5000;
	cursor:pointer;
}

.lock_close_01 {
	top:42px;left:38px;
}

.lock_close_02 {
	top:250px;right:40px;
}

.lock_close_03 {
	top:115px;left:140px;
}

/* HELP */

.help_hint {
	position:absolute;
	background:orange;
	padding:4px;
	font-size:18px;
	z-index:5000;
}

#help_apps {
	top:230px;
	left:3px;
	border-radius:4px 30px 30px 4px;
	transform:rotate(90deg);
}

#help_menu {
	top:343px;
	left:72px;
	border-radius:30px 4px 4px 30px;
}

#help_reset {
	top:342px;
	left:-22px;
	border-radius:4px 30px 30px 4px;
	transform:rotate(90deg);
}

#help_help {
	top:248px;
	right:27px;
	border-radius:4px 30px 30px 4px;
	transform:rotate(90deg);
	background:red;
}

#help_home {
	top:342px;
	right:77px;
	border-radius:4px 30px 30px 4px;
}

#help_blog {
	top:458px;
	left:8px;
	border-radius:30px 4px 4px 30px;
	transform:rotate(90deg);
}

#help_contact {
	top:448px;
	left:71px;
	border-radius:30px 4px 4px 30px;
	transform:rotate(90deg);
}

#help_podcast {
	top:440px;
	left:192px;
	border-radius:30px 4px 4px 30px;
	transform:rotate(90deg);
}

#help_palmpix {
	top:457px;
	left:228px;
	border-radius:30px 4px 4px 30px;
	transform:rotate(90deg);
}

#help_prev {
	top:345px;
	left:123px;
	border-radius:4px 30px 30px 4px;
	transform:rotate(90deg);
}

#help_next {
	top:457px;
	left:131px;
	border-radius:30px 4px 4px 30px;
	transform:rotate(90deg);
}

/* NAVIGATION */

.b_contact, .b_app, .b_about, .b_palmpix, .b_blog, .b_power, .b_help,
.b_podcast, .b_home {
	position:absolute;
	display:block;
	border:2px solid transparent;
	border-radius:400px;
	height:30px;width:30px;
	cursor:pointer;
}

.b_contact:hover, .b_app:hover, .b_about:hover, .b_palmpix:hover,
.b_blog:hover, .arrow_nav_1:hover, .arrow_nav_2:hover,
.b_help:hover, .b_power:hover, .b_podcast:hover, .b_home:hover, .text_nav_1:hover, 
.text_nav_2:hover {
		border:2px solid orange;
}

.b_contact {
	top:390px;
	left:85px;
}

.b_blog {
	top:390px;
	left:31px;
}

.b_app {
	top:292px;
	left:37px;
}

.b_about {
	top:336px;
	left:37px;
}

.b_home {
	top:337px;
	right:41px;
}

.b_podcast {
	top:391px;
	right:89px;
}

.b_help {
	top:292px;
	right:41px;
}

.b_palmpix {
	top:391px;
	right:35px;
}

.b_power {
	border-radius:2px;
	height:23px;width:14px;
	top:391px;
	left:4px;
}

.arrow_nav_1, .arrow_nav_2, .text_nav_1, .text_nav_2 {
	position:absolute;
	width:35px;height:14px;
	border-radius:0 0 10px 10px;
	display:block;
	bottom:23px;
	left:139px;
	cursor:pointer;
}

.arrow_nav_2, .text_nav_2 {
	bottom:48px;
	border-radius:10px 10px 0 0;
}

.site-nav {
  display: flex;
}

.site-nav a {
  display: block;
  padding: 1rem;
}

.site-nav .logo {
  font-weight: bold;
  padding-left: 0;
  color:#fff;
}

.main-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 48rem) {
  .site-nav,
  .main-menu {
    flex-direction: column;
  }
  
  .site-nav a {
    padding: 0.5rem;
    padding-left: 0;
  }
}

/* Podcast */

.podcast_play {
	position: absolute;
	width:224px;
	border-radius:2px;
	height:112px;
	border:4px solid #000;
	background: #000;
	filter: grayscale(1) contrast(1.5) sepia(1) hue-rotate(20deg) brightness(0.7) saturate(0.8);
	background-size: 112px 112px;
	background-repeat:no-repeat;
	cursor:pointer;
}

.podcast_play_button {
	position: absolute;
	top:15px;left:145px;
	display:block;
	height:60px;width:60px;
	background-image:url('../images/player.png');
	background-size:100%;
}

.podcast_play_caption {
	position: absolute;
	top:85px;left:140px;
	color:var(--displaycolor);
}

.podcast_frame {
	filter: grayscale(1) contrast(1.5) sepia(1) hue-rotate(20deg) brightness(0.7) saturate(0.8);
	position: absolute;
	width:420px;
	height:112px;
	margin-left:-100px;
	border:4px solid #373e44;
	box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.75);
	background: var(--displaycolor);
}

.podcast_text {
	margin-top:120px;
}


/* LISTS */

.post-snippet {
  margin-bottom: 1rem;
}

.post-snippet h3 {
  margin-bottom: 0.25rem;
}

/* 404 */

.broken {
	position:absolute;
	text-align:center;
	top:102px;
	left:30px;
}

.broken span {
	font-size:200px;

}

/* Small Screens */

@media screen and (max-height: 580px) {
	body {
		overflow: scroll;
	}
	.content {
		top:0;
		margin-top:20px;
	}
	
	.logo {
		top:0;
		margin-top:490px;
	}
	
	footer {
		top:0;
		margin-top:560px;
	}
	
}