/*
Theme Name: Flopify-2024
Author: Tim(othy)(Christopher Ryan) Volpert
Author URI: https://timvolpert.com
Description: A custom theme for the Original Peaches
Version: 3.1.9
License: GNU General Public License

-------------------------------------------------------------- */

/*--------------------------------------------------------------

 CONTENTS
- Reset
- Global Styles
  -- Branding Variables
- Typography
	-- Headings
	-- Links
	-- Alignment
- Header
- Slider
- Layout
- ABC Movie Page
- Posts/Articles
	-- Page loop styling
	-- Pagination
	-- Comments
- Footer
- Misc & mixens
	-- clear floats
- Media Queries
	-- above 1500px
	-- All Mobile Sizes
    --- Mobile Menu

 --------------------------------------------------------------*/

/* Reset
-------------------------------------------------------------- */
*{
	box-sizing:border-box;
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {margin: 0;padding: 0;border: 0;vertical-align: baseline;font: inherit;font-size: 100%;}
/* HTML5 display-role reset for older browsers */  article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block; }
html {box-sizing: border-box;margin: 0;padding: 0;font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */-webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */-ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */}
ol,ul {/* list-style: none; */}
blockquote,q {  quotes: none; }
blockquote:before,blockquote:after,q:before,q:after {  content: ''; content: none; }
table {  border-spacing: 0; border-collapse: collapse; }
code,kbd,tt,var {  font: 15px Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; }
abbr,acronym {  border-bottom: 1px dotted #666; cursor: help; }
mark,ins {  background: #fff9c0; text-decoration: none; }
sup,sub {  font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; }
sup {  bottom: 1ex; }
sub {  top: .5ex; }
small {  font-size: 75%; }
big {  font-size: 125%; }
figure {  margin: 0; }
table {  margin: 0 0 1.5em; width: 100%; }
th {  font-weight: bold; }
button,input,select,textarea {  font-size: 100%; /* Corrects font size not being inherited in all browsers */  margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */  vertical-align: baseline; vertical-align: middle; /* Improves appearance and consistency in all browsers */  }
button,input {  line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */  overflow: visible; /* Corrects inner spacing displayed oddly in IE6/7 */  }

input[type="checkbox"],input[type="radio"] {  box-sizing: border-box; /* Addresses box sizing set to content-box in IE8/9 */  padding: 0; /* Addresses excess padding in IE8/9 */  }
input[type="search"] {  -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */  -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */  box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration {  /* Corrects inner padding displayed oddly in S5, Chrome on OSX */  -webkit-appearance: none; }
button::-moz-focus-inner,input::-moz-focus-inner {  /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */  border: 0; padding: 0; }
input, textarea {/* color: #888888; */border: none;border-radius: 5px;box-shadow: inset 1px 1px 3px rgb(0 0 0 / 17%);}
input[type=text]:focus,input[type=email]:focus,textarea:focus {  color: #101010; }
input[type=text],input[type=email] {  padding: 3px; }
textarea {overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */padding: 10px;vertical-align: top; /* Improves readability and alignment in all browsers *//* width: 100%; *//* max-width: calc(100vw - 4rem); */min-height: 10rem;}

/* Global Styles
-------------------------------------------------------------- */
/* -- Branding Variables */

:root {
	/* fonts */
	--h-font: "Montserrat";
	--the-border: 5px solid var(--tertiary-color);
	/* color scheme */
	--light-bg: hsl(34deg 50% 95%);
	--primary-color: hsl(197deg 51% 15%);
	--secondary-color: hsl(38deg 100% 45% / 98%);
	--tertiary-color: #6fcefb;
	--hover-color: hsl(197deg 35% 38%);
	/*other */
	--site-width: 1080px;
	--radius: 5px;
}

body, button, input, select {
  font-family: "Lato", sans-serif;
}



body {
	  background: var(--light-bg);
	  font-size: 16px;
}

button,html input[type="button"],input[type="reset"],input[type="submit"],.button,.wp-block-button__link, .next.page-numbers, .prev.page-numbers {
  border: none;
  border-radius: 0.2rem;
  background: var(--secondary-color);
  color: white;
  cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
  padding: 0.5rem;
  transition: all 0.1s linear;
  text-align: center;
  box-shadow: 2px 2px 2px #6f645c2b;
}

button:hover,html input[type="button"]:hover,input[type="reset"]:hover,input[type="submit"]:hover,.button:hover,.wp-block-button__link:hover, .next.page-numbers:hover, .prev.page-numbers:hover{
  background: var(--primary-color);
  color: white;
}

button:active,html input[type="button"]:active,input[type="reset"]:active,input[type="submit"]:active,.button:active,.wp-block-button__link:active, button:focus,html input[type="button"]:focus,input[type="reset"]:focus,input[type="submit"]:focus,.button:focus,.wp-block-button__link:focus, .next.page-numbers:active, .prev.page-numbers:active, .next.page-numbers:focus, .prev.page-numbers:focus {
  background: var(--primary-color);
  transform: translate(5px, 5px);
  box-shadow: 1px 1px 1px #6f645cb5;
  color: white;
}



.more-button-container, .post-meta-container {
	display:flex;
	align-items: center;
	text-align: center;
	text-transform: uppercase;
	font-weight: 500;
	font-size: 1.2rem;
}

.more-button {
	margin-left: auto;
	order: 1;
	/* flex: 1 1 25%; */
}

/* Typography
-------------------------------------------------------------- */
/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: "averia libre", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}

h2 {}

h1 {

}
h2 {
 /* line-height: 4rem; */
 font-size: 3.5rem;
 color: var(--primary-color);
}

.single h2 {
	/* text-align: center; */
}


h3 {
  font-size: 2rem;
  font-family: inherit;
  text-transform: none;
  font-weight: bold;
  margin-bottom: 1rem;
}
h4 {
  font-size: 2rem;
  margin-bottom: 1rem;
}
hr {
  background-color: #ccc;
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}

/* Text elements */

p {
  margin-bottom: 1.5em;
}
ul, ol {
  margin: 0 0 1.5em 3em;
}
ul {

}
ol {

}
ul ul, ol ol, ul ol, ol ul {
  margin-bottom: 0;
  margin-left: 1.5em;
}
dt {
  font-weight: bold;
}
dd {
  margin: 0 1.5em 1.5em;
}
b, strong {
  font-weight: bold;
}
dfn, cite, em, i {
  font-style: italic;
}
blockquote {
  margin: 1rem 2rem;
  border-left: .25rem solid var(--primary-color);
  padding-left: 1rem;
}

blockquote p {
	margin: 0;
}

address {
  margin: 0 0 1.5em;
}
pre {
  background: #eee;
  font-family: "Courier 10 Pitch", Courier, monospace;
  font-size: 0.7em;
  line-height: 1.5em;
  margin-bottom: 1.6em;
  padding: 1.6em;
  overflow: auto;
  max-width: 100%;
  box-shadow: 0 3px 5px #ddd inset;
}
/* Links */
a {
  font-weight: bold;
  color: var(--primary-color);
  transition: color 0.25s ease-in-out;
  text-decoration: none;
}
a:hover, a:focus, a:active {
  color: var(--secondary-color);
}
/* Alignment */
.alignleft {
  display: inline;
  float: left;
  margin-right: 1.5em;
}
.alignright {
  display: inline;
  float: right;
  margin-left: 1.5em;
}
.aligncenter {
  clear: both;
  display: block;
  margin: 0 auto;
}
.center {
  text-align: center;
}
/* Header
-------------------------------------------------------------- */
.site-title {
	/* position: absolute; */
	/* height: 100%; */
	width: 30vw;
}


.site-title img {
	height: auto;
	width: 100%;
}
.site-title a{

}
.site-title a:hover{

}

.site-title svg {
	/* display: none; */
	height: auto;
	width: 100%;
}

#logo {
	stroke: none;
	fill: var(--primary-color);
}

.site-title svg, .site-description {
	/* anything for both title and tagline goes here */
}

.site-description{
	color: var(--primary-color);
	font-weight: bold;
	margin-left: auto;
	align-self: flex-end;
	text-shadow: 2px 2px 0px var(--secondary-color);
	}

header {
	height: 500px;
	background-image: url('inc/flophouse-ochre-banner1-2024-02.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	padding: 1rem;
}

header .gravatar {
  overflow: hidden;
  width: 100px;
  height: 100px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  margin: 0;
  float: right;
}

header #brand {
  display: flex;
  /* align-items: flex-end; */
  justify-content: space-between;
  height: 100%;
}

header #brand h1 span {

}

.logo {
	height: 174px;
}

feDropShadow { /*svg filter for drop shadow*/
    flood-color: var(--secondary-color);
}

.menu-main-menu-container {
  background: var(--primary-color);
  position: sticky;
  top: 0;
  margin: auto;
  z-index: 10;
  box-shadow: 0px 1px 2px #00000087;
}


#menu-main-menu {
	list-style: none;
	margin: 0;
	font-size: 2rem;
	display: flex;
	align-content: stretch;
	justify-content: space-between;
	word-break: normal;
	margin: auto;
	max-width: var(--site-width);
	z-index: 9;
	}

.menu-item {
	}

.menu-item a {
  padding: 1rem;
  display: block;
  color: var(--secondary-color);
  transition: .5s linear;
  text-transform: uppercase;
}

.menu-item a:hover, .menu-item a:focus, .menu-item a:active {
	background-color: var(--hover-color);
}

.sub-menu {
	margin: 0;
	position: absolute;
	list-style: none;
	background-color: var(
	--hover-color);
	display: flex;
	flex-direction:column;
	overflow: hidden;
	height: 0.01px;
	width: 0.01px;
	transition: all .5s linear;
	z-index: 999;
	justify-content: space-around;
}

.sub-menu:hover, .sub-menu:focus-within, a:hover ~ .sub-menu, a:focus ~ .sub-menu {
	padding: 1rem;
	height: 15rem;
	width: 25rem;
	box-shadow: 1px 1px 1px #0000006e;
}

.sub-menu a {
	background-color: var(--hover-color);
}

.sub-menu a:hover, .sub-menu a:active, .sub-menu a:focus {
	background-color: var(--primary-color);
}



/* --------------------------------------------------------------
 Slider
 --------------------------------------------------------------*/
#slider {
	padding: 0!important;
	}

.slide-caption {
	display: flex;
	flex-flow: column;
	align-items:end;
	position: absolute;
	bottom: 1rem;
	right: 2rem;
}
.slide-caption div {
	-webkit-backdrop-filter: blur(1rem);
	backdrop-filter: blur(1rem);
	background-color: hsl(0deg 0% 23% / 68%);
	border-radius: var(--radius);
	padding: 0.5rem;
	margin: 0.5rem;
	font-size: 1.2rem;
}

.flex-title-small {
	color: var(--secondary-color);
}

.flex-des-small {
	color: var(--secondary-color);
}

#slider img {
	border-radius: var(--radius);
}

/* Layout
-------------------------------------------------------------- */

main {
		padding: 2rem 1rem;
}

#primary {
  column-gap: 4rem;
  display: flex;
  margin: auto;
  margin-bottom: 5rem;
  flex-wrap: wrap;
  max-width: var(--site-width);
  justify-content: center;
}

#content {
	flex: 2 1 400px;
}

#sidebar {
	flex: 1 1 300px;
}

.event-list-item {
  margin-bottom: 2rem;
}

ul.post-box {
	list-style: none;
}
.post-box, #slider {
	border-radius: var(--radius);
	border: none;
	background-color: white;
	padding: 2rem;
	margin: 2rem 0;
	text-align: left;
	box-shadow: 2px 2px 5px hsl(0deg 0% 22% / 30%);
}

#slider {
	margin-bottom: 5rem;
}

.wp-block-image img {
	height: auto;
}

.wp-block-image figcaption {
	font-style: italic;
	font-size: 1.5rem;
	text-align:center;
}

.wp-block-latest-posts.wp-block-latest-posts__list {
	padding-left: 4rem;
}

.pagination {
	width: 100%;
}

.nav-links {
	display:flex;
	justify-content: space-around;
}

.nav-previous::before {
	content: "\0025c0  "
}

.nav-next::after {
	content: " \0025b6"
}

/* - ABC movie page */

nav#alpha-list {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	flex-wrap: wrap;
}

#alpha-list a {
	display: block;
}

#movie-list {

}

#movie-list .anchor {
	margin-top: 3rem;
	display: flex;
	font-size: 1.5rem;
	flex-direction: column;
	align-items: flex-end;
	line-height: 3rem;
}

.alpha-head {
	margin-bottom: 1rem;
	font-weight:bold;
	font-size: 9rem;

}

form {
	display: flex;
	flex-direction:column;
}

/* Posts/Articles
-------------------------------------------------------------- */
article {

}
.post h2 {
  /* color: var(--secondary-color); */
  /* text-align: right; */
  font-weight: 200;
 
}


article .post-meta-container {

}

article .post-meta {

}

article div.post-meta:last-of-type {
	border:0;
}


article .post-meta a {
  color: #888888;
  text-decoration: none;
}

.post-meta .post-element {
	padding: 1rem;
	border-left: 1px solid;
}
article .post-meta a:hover {
  color: rgba(136, 136, 136, 0.5);
}

#blogroll article .the-content {
	display: grid;
	column-gap: 2em;
}

article .the-content a {
  font-weight: 900;
  text-decoration: none;
}
article .the-content p {
  color: #191919;
  text-align: justify;
  grid-column-start: 1;
  grid-column-end: span 2;
}

article .the-content p:first-of-type {
	grid-column-end: 1;
}
article .the-content .wp-block-image {
  margin: 1rem;
}

.page-id-329 .wp-block-image:nth-of-type(2) {
    float: left;
}

article .meta {
  line-height: 14.8px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .9px;
}
article .meta div {
  margin:1px auto;
}
article .meta .post-categories {
  list-style: none;
  margin: 0 0 10px 0;
}
article .meta .post-categories li {
  display: inline-block;
  margin-right: 10px;
}

article iframe {
	grid-column-start: 1;
	grid-column-end: span 2;
}

#post-thumbnail {
	text-align: center;
}

#post-thumbnail img {

	height: auto;
}
/* Page loop styling */


#blogroll .post-box {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: auto auto;
  column-gap: 2rem;

}

.event .post-title {
	order: -2;
	grid-column-end: span 2;
	}

.event .excerpt {

}

#blogroll article:nth-of-type(2n) img {
	order: unset;
	/* grid-column-start: 2; */
}

#blogroll article img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 20rem;
	box-shadow: 2px 2px 3px 0px #00000042;
	grid-row-end: span 2;
	order: -1;
}

.event .info {
	display: flex;
	font-size: 2rem;
	font-weight: 500;
	padding: 0 0 2rem;
	flex-wrap: wrap;
	align-self: stretch;
	flex-direction: column;
	justify-content: center;
}

.event .info div {

}

.event .info div:last-of-type {
	border: none;
}

.event .posted-on {
	display: none;
}

/* Pagination */
#pagination {
  margin-bottom: 40px;
  width: 100%;
}
#pagination .past-page {
  float: right;
  width: 49%;
  text-align:right;
}
#pagination .next-page {
  float: left;
  width: 50%;
  border-right: 1px solid #ccc;
  height: 200px;
}
.next-page a, .past-page a {
  font-size: 2em;
  font-family: "Quicksand", Helvetica, sans-serif;
  font-weight: 400;
  font-style: italic;
  padding: 10%;
}

.meta div {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: flex-start;
}

.meta div a {
	align-self: end;
}


/* Comments */

#comments {
	padding: 1rem;
	}
#comments:target {
  height: unset;
}

h3#comments {
  margin-bottom: 80px;

}
.comment-list {
  /* word-break: break-word; */
  height: 46rem;
  overflow: auto;
  list-style: none;
  margin: 0;
}
.comment-list .comment-body {
  border-radius: var(--radius);
  background: white;
  margin: 2rem 0;
  padding: 20px;
  position: relative;
  list-style: none;
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
.comment-list .comment .children::before {

}
.comment-list .comment-author {
  float: left;
  margin-right: 10px;
}
.comment-list .comment-author img {

  left: -50px;
  top: 5px;
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
.comment-list .comment-author .says {
  display: none;
}
.comment-meta {

  margin-bottom: 10px;
}
.comment-subscription-form, .comment-subscription-form {
  margin-bottom: 0;

}
#respond {
  margin-bottom: 80px;
}
#respond > h3 {
  margin: 2rem 0;
}
#respond form label {
  color: #888888;
}

.comment-form p {
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	flex-direction: column;
}

span.required {
	display: contents;
}

.grecaptcha-badge { visibility: hidden; }
/* --------------------------------------------------------------
 Footer
-------------------------------------------------------------- */

.site-footer{
	background-color: var(--primary-color);
	padding: 1rem;
}

#footer-grid {
  padding: 1rem 0;

  color: white;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto auto auto;
  font-size: 1.5rem;
  justify-content: space-between;
  justify-items: stretch;
  align-items: start;
  max-width: var(--site-width);
  margin: auto;
}

.footer-column {
  line-height: 3rem;
  }


div.footer-column:nth-child(3), div.footer-column:last-child {
	grid-row-end: span 2;
}

.wp-block-group, .wp-block-group__inner-container {
	height: 100%;
}

.footer-column ul {
	list-style: none;
	text-align: end;
}

footer a {
	color:var(--secondary-color);
}

footer a:hover, footer a:focus, footer a:active {
	color: var(--hover-color);
}

.footer-column iframe {
	background: var(--light-bg);
	border-radius: var(--radius);
	height: 190px;
}

.site-info.container {
	background: var(--light-bg);
	display: flex;
	position: absolute;
	padding: 10px 10px 0;
	font-size: 1.1rem;
	justify-content: space-between;
	left: 0;
	width: 100%;
	/* bottom: 0; */
}


/* Misc & mixens
-------------------------------------------------------------- */

.hide-text {
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
.clear {
  clear: both;
}
/* clear floats */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.clearfix {

}
html[xmlns] .clearfix {
  display: block;
}
* html .clearfix {
  height: 1%;
}

/* #Media Queries
================================================== */

  /* Those wide screens above 1650px */
  @media only screen and (min-width: 1650px) {

  	:root {
  		--site-width: 1500px;
  		font-size: 100%;
  	}
  body{
  	font-size: 1.5rem;
  }

  #primary {
  }
  header {
  	height: 75vh;
  }


  }


  /* All Mobile Sizes (devices and browser) */
  @media only screen and (max-width: 960px) {

  	  :root {
  	  }
  	  body {
  	  }
  	  header {
    	height: 20rem;
    	border-bottom: 1rem solid var(--primary-color);
    }


    h1, h2, h3, h4, h5, h6 {

    }

    .site-title {
  width: 40vw;
  }

     .site-description {
     	  font-size: 3vw;
     	  text-shadow: 1px 1px 0px var(--secondary-color);
     }

     /* MOBILE menu */

		.menu-main-menu-container {
			-webkit-backdrop-filter: blur(0.5rem);
			backdrop-filter: blur(0.5rem);
			background: #ffffff4a;
			border-radius: 0 0 10px 10px;
			top: 0;
			right: 1rem;
			height: 4rem;
			position: fixed;
			transition: .2s linear;
			width: 5rem;
			z-index: 20;
			overflow: hidden;
			box-shadow: none;
		}

		.menu-main-menu-container.open {
			height: 85vh;
			width: 82vw;
			background-color: hsl(197deg 51% 8% / 54%);
			transition: 0.5s ease-in-out;
		}

		#menu-main-menu {
			width: 100%;
			display: flex;
			font-size: 2rem;
			font-weight: 400;
			text-transform: uppercase;
			margin: 0;
			padding: 0;
			padding-top: 0.5rem;
			flex-direction: column;
			justify-content: space-around;
		}

		.menu-main-menu-container.open #menu-main-menu {
			height: 100%;
			width: 100%;
			font-size: 2.5vh;
			padding: 0 5vw;
			}

		menu li {
			list-style: none;
		}

		.menu-item a {
			display: block;
			opacity: 0%;
			padding: 1rem 2rem;

		}

		.menu-main-menu-container li a:hover, .menu-main-menu-container li a:focus, .menu-main-menu-container li a:active
		 {
			background-color: var(--primary-color);
			color: var(--secondary-color);
		}

		.menu-main-menu-container.open .menu-item a {
			opacity: 100%;
			transition: opacity .5s linear, background-color .5s linear, box-shadow .5s linear;
			padding: 1rem;
		}

		.sub-menu a {
			background-color: unset;
		}

		.header.sticky .menu-main-menu-container #menu-main-menu{

		}
		#menu-main-menu::before {
			text-align: center;
			content: "\f0c9";
			cursor: pointer;
			color: var(--primary-color);
			font-family:
			'FontAwesome';
			font-size: 3rem;
			display:  block;
			padding-bottom: 2rem;
		}

		.menu-main-menu-container.open #menu-main-menu::before {
			content: "\f00d";
			margin: 0;
			text-align: right;
			color: white;
		}


		li.menu-item {
			list-style: none;
			height: auto;
		}

		.sub-menu {
			height: initial;
			width: inherit;
			position: initial;
			background: inherit;
			padding-left: 2rem;
		}

		.sub-menu:hover, .sub-menu:focus-within, a:hover ~ .sub-menu, a:focus ~ .sub-menu {
			height:unset;
			width:unset;
			box-shadow: none;

		}

		/* end mobile menu */

		main {

		}


		#primary {

			column-gap: 2rem;
		}

		h2 {font-size: 3rem;}

		#primary.single h2 {
		/* font-size: 10vw; */
		/* line-height: 10vw; */
		}

		h3 {line-height: 2rem;font-size: 2rem;margin-bottom: 1rem;}

		h4 {
			text-align: start;
		}

		.post-box {
		}
		#blogroll .post-box {
			display: flex;
			/* text-align: justify; */
			flex-direction: column;
			align-items: center;
		}

		#blogroll .post-box img {
			max-height: unset;
			order: unset;
			margin-bottom: 1rem;
		}

		.comment-list {
			height: unset;
		}

		#footer-grid {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			column-gap: 4rem;
			justify-content: space-around;
		}

		.footer-column{flex: 1 1 46%;}

		.footer-column iframe {
		height: 230px;
		}

		nav#alpha-list {justify-content: start;}

		#alpha-list a {
			flex: 0 1 3rem;
		}
  }