/* Basics + Reset 
   ============== */

* { box-sizing:border-box; margin:0; padding:0; }
body { background-color:#FEFFF5; color:rgb(0,0,0); font-family:Arial, Helvetica, sans-serif; background-image:url("images/background.jpg"); background-size:cover; background-attachment:fixed; background-repeat:no-repeat; }
h1, h2, h3, h4, h5, h6, p, table, ul, ol, .h1, .h2, .h3, .h4, .h5, .h6 { margin-bottom:1rem; }
ul, ol { list-style-position:outside; margin-left:1.2rem; }
li { margin-bottom:0.5rem; }
img { max-width:100%; object-fit:contain; vertical-align:bottom; }
table { border-spacing:0; border-collapse:collapse; border:solid 1px grey; }
th, td { border:solid 1px grey; padding:0.5rem; }
a { color:#ff6347; text-decoration:underline; }
a:active, a:hover { color:#ff8c00 }
a.block-link { text-decoration:none; }
a.block-link .txt { text-decoration:underline; }
em { font-style:italic; }
strong { font-weight:bold; }
*:last-child { margin-bottom:0; }

h1, .h1 { font-size:1.86em; }
h2, .h2 { font-size:1.71rem; }
h3, .h3 { font-size:1.57rem; }
h4, .h4 { font-size:1.42rem; }
h5, .h5 { font-size:1.28rem; }
h6, .h6 { font-size:1.14rem; }

input, textarea, select { outline:0; } /* Get rid of Chrome's blue border */
textarea { resize:vertical; }
input[type=text], input[type=password], textarea { border-left:solid 1px rgb(72,72,72); border-top:solid 1px rgb(72,72,72); border-right:solid 1px rgb(212,212,212); border-bottom:solid 1px rgb(212,212,212); padding:0.25rem; background:rgb(255,255,255); }
textarea { width:100%;height:6.7rem; }
input[type=button], input[type=submit] { background-color:rgb(255,102,0); color:rgb(255,255,255); font-weight:bold; padding:0.25rem 0.75rem; font-size:0.8rem; outline:none; cursor:pointer; }
input[type=button]:hover input[type=submit]:hover:enabled { background-color:rgb(255,153,0); outline:none; }
input[type=button]:active input[type=submit]:active:enabled { background-color:rgb(255,204,0); outline:none;}
code { border:solid 1px rgb(192,192,192); padding:0.5rem; display:block; margin-bottom:1rem; overflow-x:scroll; }
hr { margin-bottom:1rem; }
details { border:solid 1px grey; margin-bottom:1rem; padding:0.25rem; }
summary { cursor:pointer; }
details[open] summary { margin-bottom:1rem;  }

/* Reusable Stuff
   ============== */

.block { margin-bottom:1rem; }
.off { display:none !important; }
.on { display:block !important; }
.hidden { visibility:hidden; }
.error { color:rgb(255,0,0); font-weight:bold; }
.success { color:rgb(51,102,0); font-weight:bold; }
.date { font-family:'Courier New', monospace; color:rgb(128,128,128); }
.small-margin { margin-bottom:0.1rem; }

.align-left-top { text-align:left; vertical-align:top; }
.align-center-top { text-align:center; vertical-align:top; }
.align-right-top { text-align:right; vertical-align:top; }
.align-left-center { text-align:left; vertical-align:middle; }
.align-center-center { text-align:center; vertical-align:middle; }
.align-right-center { text-align:right; vertical-align:middle; }
.align-left-bottom { text-align:left; vertical-align:bottom; }
.align-center-bottom { text-align:center; vertical-align:bottom; }
.align-right-bottom { text-align:right; vertical-align:bottom; }

.margin-bottom-0 { margin-bottom:0; }
.margin-bottom-1 { margin-bottom:1rem; }

.inline-list { display:inline-block; text-align:left; }

.hlist { display:flex; list-style-type:none; margin-bottom:0; }
.hlist li { margin-right:1rem; margin-bottom:0; }
.hlist li:last-child { margin-right:0; }
   
.table { overflow-x:auto; margin-bottom:1rem; }
.table table { min-width:100%; border-spacing:0; margin-bottom:0; border-collapse:collapse; }
.table th { font-weight:bold; }
.table th, .table td { padding:0.5rem; }
.table table, .table tr, .table th, .table td { border:solid 1px rgb(192,192,192); }

.iframe-widget { border:0; display:block; box-sizing:border-box; width:100%; height:720px; }

/* Layout
   ====== */
   
.layout { background-color:transparent; max-width:600px; margin: 0 auto; }

.layout_mobile-top { position:fixed; top:0; z-index:99; width:100%; height:50px;  }
.layout_mobile-top-inner { height:100%; display:flex; background-color:#ff8000; background-image: linear-gradient(#FF8C19, #E57200); padding:0.5rem; }
.layout_mobile-site-title { flex:1; font-size:1.5rem; font-weight:bold; color:white; }
a.layout_mobile-burger { display:inline-block; background-image:url("images/burger.png"); background-repeat:no-repeat; background-position:center; background-color:transparent; background-size:100%; border:0; width:2em;height:2em; color:transparent; text-decoration:none; }

.layout_cols { margin-top:50px; display:flex; flex-direction:column; padding:0.5rem; }
.layout_main-col { order:1; }
.layout_left-col { position:relative; order:2; }
.layout_menu-jump { position:absolute; top:-65px; width:1px; height:0px; overflow:hidden; }
.layout_right-col { order:3; }
.layout_desktop-site-title { display:none; }
.layout_nav { list-style-image:url("images/menu-bullet.png"); }
.layout_socials { list-style-image:url("images/menu-bullet.png"); }

.layout_panel { margin-bottom:1rem; border:solid 3px #FFA500; border-radius:0.5em; padding:1em; box-shadow:0px 0px 10px 5px rgba(0,0,0,0.1); padding-top:0.7rem; }
.layout_panel_heading { font-weight:bold; margin-bottom:1rem; color:white; text-shadow: rgb(255, 153, 51) 2px 0px 0px, rgb(255, 153, 51) 1.75517px 0.958851px 0px, rgb(255, 153, 51) 1.0806px 1.68294px 0px, rgb(255, 153, 51) 0.141474px 1.99499px 0px, rgb(255, 153, 51) -0.832294px 1.81859px 0px, rgb(255, 153, 51) -1.60229px 1.19694px 0px, rgb(255, 153, 51) -1.97998px 0.28224px 0px, rgb(255, 153, 51) -1.87291px -0.701566px 0px, rgb(255, 153, 51) -1.30729px -1.5136px 0px, rgb(255, 153, 51) -0.421592px -1.95506px 0px, rgb(255, 153, 51) 0.567324px -1.91785px 0px, rgb(255, 153, 51) 1.41734px -1.41108px 0px, rgb(255, 153, 51) 1.92034px -0.558831px 0px; }

@media only screen and (min-width: 1024px)
{
   .layout { margin-top:8px; max-width:1280px; }
   .layout_mobile-top { display:none; }
   .layout_burger { display:none; }
   .layout_cols { margin-top:0; flex-direction:row; }
   .layout_left-col { order:1; display:block; width:300px; padding-right:16px; }
   .layout_main-col { order:2; flex:1; max-width:648px; }
   .layout_right-col { order:3; display:block; width:300px; padding-left:16px; }
   .layout_desktop-site-title { display:block; background-color:#ff8000; background-image: linear-gradient(#FF8C19, #E57200); padding:0.5rem;font-size:1.5rem; font-weight:bold; color:white; text-align:center; margin-bottom:1rem; }
}

/* Socials Icons
   ============= */
   
.layout_socials { list-style-type:none; list-style-image:none; padding:0; margin:0; }
.layout_socials li { padding:0 0 0 24px; background-position:left center; background-repeat:no-repeat; }

.layout_socials_bluesky { background-image:url("/res/img/icon-bluesky.png"); }
.layout_socials_youtube { background-image:url("/res/img/icon-youtube.png"); }
.layout_socials_itch { background-image:url("/res/img/icon-itch.png"); }
.layout_socials_x { background-image:url("/res/img/icon-x.png"); }
.layout_socials_mastodon { background-image:url("/res/img/icon-mastodon.png"); }
.layout_socials_neocities { background-image:url("/res/img/icon-neocities.png"); }
.layout_socials_tumblr { background-image:url("/res/img/icon-tumblr.png"); }
.layout_socials_spacehey { background-image:url("/res/img/icon-spacehey.png"); }
.layout_socials_wordpress { background-image:url("/res/img/icon-wordpress.png"); }
.layout_socials_blogger { background-image:url("/res/img/icon-blogger.png"); }

/* Poll
   ==== */

.poll { display:block; border:solid 1px grey; border-radius:4px; padding:0.5rem; font-size:0.9rem; max-width:200px; margin-left:auto; margin-right:auto; margin-bottom:1rem; }
.poll-question { margin-bottom:0.5rem; }
.poll-buttons { margin-top:0.5rem; text-align:center; }
.poll-credits { margin-top:0.5rem; text-align:center; }

/* Polls List
   ========== */

.polls-list { display:flex; align-items:flex-start; justify-content:center; }
.polls-list_poll { display:inline-flex; flex-direction:column; border:solid 1px #808080; border-radius:4px; padding:8px; min-height:232px; }
.polls-list_spacer { width:8px; }
.polls-list_poll-poll { background-color:transparent; }
.polls-list_poll-spacer { flex:1; height:1px; overflow:hidden; }
.polls-list_poll-analysis-link { text-align:center; }

/* Projects List
   ============= */

.projects-list ul { list-style-type:none; list-style-image:none; padding:0; margin:0 0 1rem 0; }
.projects-list li { padding:0 0 0 24px; background-position:left center; background-repeat:no-repeat; }
.projects-list_plant { background-image:url("/res/img/plant-favicon.png"); }
.projects-list_superdeb { background-image:url("/res/img/superdeb-favicon.png"); }
.projects-list_daily-cats { background-image:url("/res/img/daily-cats-favicon.png"); }
.projects-list_free-neocities-themes { background-image:url("/res/img/free-neocities-themes-favicon.png"); }
.projects-list_static-ultra { background-image:url("/res/img/static-ultra-favicon.png"); }
.projects-list_personality-test-maker { background-image:url("/res/img/personality-test-maker-favicon.png"); }
.projects-list_days-until { background-image:url("/res/img/days-until-favicon.png"); }
.projects-list_copy-and-paste-emojis { background-image:url("/res/img/copy-and-paste-emojis-favicon.png"); }
.projects-list_easydex-crystal { background-image:url("/res/img/easydex-crystal-favicon.png"); }
.projects-list_dice-poker { background-image:url("/res/img/dice-poker-favicon.png"); }
.projects-list_website-building-tutorials { background-image:url("/res/img/website-building-tutorials-favicon.png"); }

/* Videos List
   =========== */

.videos-list_link { display:block; text-decoration:none; margin-bottom:1rem; border:solid 1px rgb(265,165,0);  padding:0.5rem; }
.videos-list_image { display:block; margin-bottom:0.5rem; max-width:180px; margin-left:auto; margin-right:auto; }
.videos-list_heading { font-size:0.9rem; text-decoration:underline; }

/* Templates list (Free Neocities Themes Page
   ========================================== */

.template { margin-bottom:1rem; border:solid 1px grey; padding:0.5rem; }
.template:last-child { margin-bottom:0; }
.template > div { margin-bottom:0.5rem; }
.template > div:last-child { margin-bottom:0; }
.template_links { text-align:center; }

/* Latest Blog Entries
   =================== */

.latest-blog-entries_list { margin-bottom:1rem; }
.latest-blog-entries_item { margin-bottom:0.5rem; }
.latest-blog-entries_item:last-child { margin-bottom:0; }
.latest-blog-entries_title { margin-bottom:0.1rem; }
.latest-blog-entries_date { font-family:'Courier New', monospace; color:rgb(128,128,128); }

/* Blog Listing
   ============ */

.blog-listing { margin-bottom:1em; }
.blog-listing:last-child { margin-bottom:0; }
.blog-listing_date { font-family:'Courier New', monospace; color:rgb(128,128,128); margin-bottom:0; }
.blog-listing_heading { margin-bottom:0.1rem; }

/* Project Listings 
   ================ */

a.project-listing { display:flex; margin-bottom:1em; max-width:480px; border:solid 1px rgb(265,165,0); padding:8px; text-decoration:none; color:black; }
a.project-listing:last-child { margin-bottom:0; }
.project-listing_left { display:flex; margin-right:16px; width:100px; align-items:center; justify-content:center; }
.project-listing_img { border:solid 1px rgb(200,200,200); max-width:100%; }
.project-listing_right { flex:1; display:flex; flex-direction:column; }
.project-listing_heading { margin-bottom:0.2em; text-decoration:underline; font-weight:normal; font-size:1rem; }
.project-listing_description { margin-bottom:0.2em; flex:1; }
.project-listing_published { font-size:0.8em; color:grey; text-align:right; }
.project-listing_publish-date { font-family:'Courier New', monospace; color:rgb(128,128,128); }

/* Blog Entry Pages
   ================ */

.blog-entry_header { margin-bottom:1em; }
.blog-entry_main { margin-bottom:0; }
.blog-entry_heading { margin-bottom:0.1rem; }
.blog-entry_date { font-family:'Courier New', monospace; color:rgb(128,128,128); margin-bottom:0.1rem; }
.blog-entry_main > .screenshots { display:flex; justify-content:center; }
.blog-entry_main > .screenshots > a { margin-right:10px; }
.blog-entry_main > .screenshots > a:last-child { margin-right:0; }
.blog-entry_main > .note { font-style:italic; }
.blog-entry_comments { text-align:center; margin-top:1rem; }
.blog-entry_banner { display:block; max-width:100%; width:480px; margin-left:auto; margin-right:auto; margin-bottom:1rem; }