/*
Theme Name: euclid25 theme
Theme URI: 
Author: mks
Author URI: 
Description: Wordpress Theme
Version: 1.0
*/

@charset "utf-8";
@import "https://fonts.googleapis.com/css2?family=K2D:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Mitr:wght@200;300;400;500;600;700&display=swap";

:root{

		--main_width: 640px;
		--comic_wrap_width: 1280px;
		--header_height: 			4rem;
		--initial_viewport_height: 	calc(100svh);
	
	/*Dynamic Sizes*/
		--comic_wrap_height: 		54rem;/*calc(var(--initial_viewport_height) - var(--header_height));*/
		--comic_width: 				calc(var(--comic_wrap_height) * 0.76);
		--comic_sidebar_width: 		calc((var(--comic_wrap_width) - var(--comic_width)) * 0.5);
		--main_sidebar_width:		calc((var(--comic_wrap_width) - var(--main_width)) * 0.5);
	
	/*Other*/
		--animation_duration: 100ms;
		--universal_border_radius: 0.5rem;
	
	/*Color and Theming*/
		--theme_color: 	cornflowerblue;
		--off_white: 	lightyellow;
	
	&:not(:has(#comic-wrap)){ --comic_wrap_height: 0.5rem;}
	
	/*Color Palette*/
		--cornblue:		#5287e0;
		--olive:		#8b8a39;
		--steelblue:	#5d8e9d;
		--raspberry:	#b46398;
		--strawberry:	#ce605e;
		--eggplant:		#8c5a7b;
		--clay:			#ba6f43;
		--tealgreen:	#079987;
		--royalpurple:	#8255a8;
		--rust:			#b06e69;

		--ow_cream:		#fff4d8;
		--ow_cyan:		#cfebf0;
		--ow_yellow:	#fffaaa;
		--ow_bluegray:	#d6e7f6;
		--ow_green:		#ecf5e3;
		--ow_pink:		#F2D8F0;
}

html {
	scroll-behavior:smooth!important
	}

body{
	width:100dvw;
	max-width:100%;
	
	margin:0;
	padding:0;

	background-color:#1A1A1A;
	font-family:'K2D','Mitr',"Gill Sans Extrabold",sans-serif;
	color:#fff;
	background-image: url(assets/Planetary-FG.png),  url(assets/Planetary-BG.png);
	background-repeat: no-repeat;
	background-attachment: scroll,  fixed;
	background-position: top, bottom;
	background-size: width:100dvw, width:100dvw;
	
	& * { box-sizing: border-box; /*border: 1px dotted red;*/ }
	
	color:white;
	
	/*Episode Themes*/
	&:has(.chapters-book1-1), .comic-archive-chapter-wrap:nth-of-type(3){
		--theme_color: var(--cornblue);	--off_white: var(--ow_cream);
		--comicwrap_bg_img:url(assets/comicwrap_bg/1-1.png);
		--comic_episode_logo:url(assets/chapter_logos/1-1.png);
		--archive_thumbnail: url(assets/archive_thumbnails/1-1.png);
	}
	&:has(.chapters-book1-2), .comic-archive-chapter-wrap:nth-of-type(4){
		--theme_color: var(--olive);	--off_white: var(--ow_pink);
		--comicwrap_bg_img:url(assets/comicwrap_bg/1-2.png);
		--comic_episode_logo:url(assets/chapter_logos/1-2.png);
		--archive_thumbnail: url(assets/archive_thumbnails/1-2.png);
	}
	&:has(.chapters-book1-3), .comic-archive-chapter-wrap:nth-of-type(5){
		--theme_color: var(--steelblue);	--off_white: var(--ow_cyan);
		--comicwrap_bg_img:url(assets/comicwrap_bg/1-3.png);
		--comic_episode_logo:url(assets/chapter_logos/1-3.png);
		--archive_thumbnail: url(assets/archive_thumbnails/1-3.png);
	}	
	&:has(.chapters-book1-4), .comic-archive-chapter-wrap:nth-of-type(6){
		--theme_color: var(--raspberry);	--off_white: var(--ow_yellow);
		--comicwrap_bg_img:url(assets/comicwrap_bg/1-4.png);
		--comic_episode_logo:url(assets/chapter_logos/1-4.png);
		--archive_thumbnail: url(assets/archive_thumbnails/1-4.png);
	}
	&:has(.chapters-book1-5), .comic-archive-chapter-wrap:nth-of-type(7){
		--theme_color: var(--cornblue);	--off_white: var(--ow_green);
		--comicwrap_bg_img:url(assets/comicwrap_bg/1-5.png);
		--comic_episode_logo:url( );
		--archive_thumbnail: url(assets/archive_thumbnails/1-5.png);
	}
	&:has(.chapters-book1-6), .comic-archive-chapter-wrap:nth-of-type(8){
		--theme_color: var(--strawberry);	--off_white: var(--ow_yellow);
		--comicwrap_bg_img:url(assets/comicwrap_bg/1-6.png);
		--comic_episode_logo:url(assets/chapter_logos/1-6.png);
		--archive_thumbnail: url(assets/archive_thumbnails/1-6.png);
	}
	&:has(.chapters-book1-7), .comic-archive-chapter-wrap:nth-of-type(9){
		--theme_color: var(--eggplant);	--off_white: var(--ow_bluegray);
		--comicwrap_bg_img:url(assets/comicwrap_bg/1-7.png);
		--comic_episode_logo:url(assets/chapter_logos/1-7.png);
		--archive_thumbnail: url(assets/archive_thumbnails/1-7.png);
	}
	&:has(.chapters-book1-8), .comic-archive-chapter-wrap:nth-of-type(10){
		--theme_color: var(--cornblue);	--off_white: var(--ow_pink);
		--comicwrap_bg_img:url(assets/comicwrap_bg/1-8.png);
		--comic_episode_logo:url(assets/chapter_logos/1-8.png);
		--archive_thumbnail: url(assets/archive_thumbnails/1-8.png);
	}
	&:has(.chapters-book1-9), .comic-archive-chapter-wrap:nth-of-type(11){
		--theme_color: var(--clay);	--off_white: var(--ow_cream);
		--comicwrap_bg_img:url(assets/comicwrap_bg/1-9.png);
		--comic_episode_logo:url(assets/chapter_logos/1-9.png);
		--archive_thumbnail: url(assets/archive_thumbnails/1-9.png);
	}
	&:has(.chapters-book2-1), .comic-archive-chapter-wrap:nth-of-type(14){
		--theme_color: var(--steelblue);	--off_white: var(--ow_pink);
		--comicwrap_bg_img:url(assets/comicwrap_bg/2-1.png);
		--comic_episode_logo:url(assets/chapter_logos/2-1.png);
		--archive_thumbnail: url(assets/archive_thumbnails/2-1.png);
	}
	&:has(.chapters-book2-2), .comic-archive-chapter-wrap:nth-of-type(15){
		--theme_color: var(--tealgreen);	--off_white: var(--ow_yellow);
		--comicwrap_bg_img:url(assets/comicwrap_bg/2-2.png);
		--comic_episode_logo:url(assets/chapter_logos/2-2.png);
		--archive_thumbnail: url(assets/archive_thumbnails/2-2.png);
	}
	&:has(.chapters-book2-3), .comic-archive-chapter-wrap:nth-of-type(16){
		--theme_color: var(--cornblue);	--off_white: var(--ow_bluegray);
		--comicwrap_bg_img:url(assets/comicwrap_bg/2-3.png);
		--comic_episode_logo:url(assets/chapter_logos/2-3.png);
		--archive_thumbnail: url(assets/archive_thumbnails/2-3.png);
	}
	&:has(.chapters-book2-4), .comic-archive-chapter-wrap:nth-of-type(17){
		--theme_color: var(--rust);	--off_white: var(--ow_green);
		--comicwrap_bg_img:url(assets/comicwrap_bg/2-4.png);
		--comic_episode_logo:url(assets/chapter_logos/2-4.png);
		--archive_thumbnail: url(assets/archive_thumbnails/2-4.png);
	}
}

/*Whole-site Wrapper*/
#wrapper{

	width: 100%;
	margin:0;
	padding:0;
		
	@media (width < 1280px){
		display: flex;
		flex-flow: column nowrap;
	}
	
	@media (width > 1279px){
		display:grid;
		grid-template-columns: auto var(--main_sidebar_width) var(--main_width) var(--main_sidebar_width) auto;
		grid-template-rows: var(--header_height) var(--comic_wrap_height) auto auto;
		min-height:100lvh;
	}
	
	&  * { }
	
	& a{
		color: var(--theme_color);
		text-decoration: none;
		&:hover{ cursor:pointer; text-decoration:underline;}
	}
	
	& .right-align{ text-align: right;}
	& .no-pad-marg{ margin:0; padding:0;}
	
	& .small-button, .post-edit-link, .comment-reply-link, input[type=submit], button[type=button]{
		color:var(--theme_color);
		border:1px solid var(--theme_color);
		padding:.25rem;
		border-radius:.5rem;
		font-size:1rem;
		background-color: #fff;
		
		&:hover{
			cursor:pointer;
			text-decoration: none;
			background-color: var(--theme_color);
			color: #fff;
		}
	}
	
	& textarea, input[type=text], input[type=search]{

		overflow:auto;
		outline:none;
		-webkit-box-shadow:none;
		-moz-box-shadow:none;
		box-shadow:none;
		resize:vertical;
			
		display:block;
		overflow:auto;
		width: calc(100% - 2rem);
		
		border:2px solid var(--off_white);
		background-color:var(--off_white);
		font-family:inherit;
		
		padding: 1em;
		border-radius: 1rem;
		
		&:focus-visible{
			border:2px solid #000;
		}
	}
	
	& textarea{ border-radius:1rem 1rem 0 1rem;}
}

header{
	
	position: relative;
	max-width:100%;

	@media (width < 1280px){
		display: flex;
		flex-flow: row wrap;
		justify-content: space-around;
		align-items: flex-end;
		
		& #sitelogo{
			display:flex;
			flex-flow: column nowrap;
			height: var(--header_height);
			gap:1rem;
			
			align-items: flex-end;
			
			& p{ display:none; }
		}
	}

	@media (width > 1279px){
		grid-column: 2 / 5;
		grid-row: 1 / 2;
		
		display:flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: flex-end;
		
		#sitelogo{
			display:flex;
			flex-flow: row nowrap;
			gap:1rem;

			align-items: flex-end;
			
			height: 100%;
			flex-grow:1;
		}
	}


	gap: 1rem;
	padding: 0 1rem;
	
	& #sitelogo{
		
		& svg{
			height:100%;
			transition:transform var(--animation_duration);
			stroke-width:25px;
			stroke:var(--theme_color);
			fill: none;
			overflow: visible;
		}
		
		&:hover svg{
			transform:rotate(1deg) scale(1.1);
			fill:var(--theme_color);
			stroke: none;
		}
		
		&:hover{
			text-decoration:none;
		}
		
		& p{margin:0 0 0.25rem 0;}
	}
	
	nav{
		margin-bottom: 0.5rem;

		& .menu{
			display: flex;
			flex-flow: row wrap;
			margin-bottom: 0.5rem;
			
			margin:0;
			padding:0;
			
			list-style-type: none;

			& li{
				height:100%;
				
				& a{
					display:	flex;
					flex-flow:	row nowrap;

					align-items: center;
					height:		calc(100% - 0.4rem);
					

					font-size: 1.1rem;
					font-weight: 700;
					text-transform: uppercase;

					border-radius: 0.4rem;
					transition: transform var(--animation_duration);
					}

				&.current_page_item a, &:hover a{	
					background-color: var(--theme_color);
					text-decoration: none!important;
					color: black!important;
				}
				
				&.current_page_item:nth-of-type(even) a, &:nth-of-type(even):hover a{ transform: scale(1.1) rotate(-1deg); }
				&.current_page_item:nth-of-type(odd) a, &:nth-of-type(odd):hover a{ transform: scale(1.1) rotate(1deg); }
			
			}
		}
	} /* End of Generic Nav */
	
	& #site_nav{
		display: flex; flex-flow: row wrap; gap: 0.75rem;
		justify-content: center;
		align-items: flex-end;
		
		max-width: 100vw;
		
		& .menu{
			display: flex; flex-flow: row wrap; justify-content: center;
			gap: 0.75rem;
			
			& li{
				& a{
					height:2rem;
					padding: 0 1rem;
					border:0.2rem solid var(--theme_color);
					}
				}	
			
			&.social_nav{
				gap: 0.25rem;
				
				& a{
					padding: 0.2rem;
					border:none;
			
					& svg{
						height: 100%;
						fill: var(--theme_color);
					}
			
					&:hover svg{
						fill: black;
					}
				}
			}
		}
	}
	
	& #readcomic{ 
		position: absolute;
		
		@media ( width < 800px){bottom: 0;}
		@media ( width > 801px){top: 0;}
	}
}


#comic-wrap{

	@media (width > 1023px){
		grid-column: 1 / 6;
		grid-row: 2 / 3;
	}


	background-color: var(--theme_color);
	background-image: var(--comicwrap_bg_img);
	background-size: cover;
	background-blend-mode: multiply;

	& #comic-head{ display:none; }

	& .comic_navi{
		& tr{
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
			
			gap: 0.5rem;
			
			& td{		
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
				font-weight:700;
				
				@media (width < 1024px){ gap:0.5rem; }
				@media (width > 1023px){ gap:1rem; }
				
				&:not(:has(a)){
					visibility:hidden;
					}			
				
				& a, > span{ 
					border: 2px solid white;
					padding: 1rem;
					border-radius: 1rem;
					color: white;
					transition:transform var(--animation_duration);
	
					&:hover{
						background-color: white;
						color: black;
						text-decoration:none;
						transform:scale(1.05);
					}	
				}
				
				& .navi-prev-chap{order: 1;}
				& .navi-prev{ order:2;}
				& .navi-next{ order: 4;}
				& .navi-next-chap{ order: 5;}
			}
		}
	}
	
	& .comic-table{

		@media (width < 1024px){
			display: flex;
			flex-flow: column nowrap;
		
			& #comic{
				width: 100%;
				border-top: 3px solid var(--theme_color);
			}
		}

		@media (width > 1023px){
			display: grid;
			grid-template-columns: 0 1fr var(--comic_width) 1fr 0;

			& #comic{ 
				grid-column: 3 / 4;
				height: var(--comic_wrap_height);
				border: none;
			}
		}
		
		@media (width > 1279px){
			grid-template-columns: auto var(--comic_sidebar_width) var(--comic_width) var(--comic_sidebar_width) auto;
		}

		position: relative;

		& #comic{
			text-align:center;

			& img{
				
				@media (width < 1024px){
					width: calc(var(--comic_width) - 2rem);
					max-width: 100%;
				}
				@media (width > 1023px){
					height:100%;
				}

				background-color:white;
				box-shadow: 0 5px 7px #00000059;
			}
		}
		
		& .sidebar {
			display: grid;
			grid-template-rows: 33% 34% 33%;
			
			padding: 1rem 0;
			
			& > *{
				
				display: flex;
				flex-flow: row nowrap;
				justify-content: center;
				
				&:nth-child(1){
					align-items: flex-start;
				}
				
				&:nth-child(2){
					align-items: center;
				}
				&:nth-child(3){
					align-items: flex-end;
				}
			}
			
			& #episodelogo{
				content:var(--comic_episode_logo);
				transition:transform var(--animation_duration);
				max-width:100%;
				max-height: calc( var(--comic_wrap_height) * 0.33);
				
				&:hover {
					transform:scale(1.05);
				}
			}

			& .comic_navi tr td{
				& .navi-prev, & .navi-next{
					line-height: 9rem;
					}
				& .navi-prev-chap, & .navi-next-chap{
					line-height: 5rem;
					}		
				}
			
			& #hardy_toy{
				height: 5rem;
			}
		}
		
		#sidebar-left-of-comic{
			padding-right: 1rem;
			@media (width < 1024px){ display:none; }
			@media (width > 1023px){ display:grid; grid-column: 2 / 3;}
		}
		#sidebar-right-of-comic{
			padding-left: 1rem;
			@media (width < 1024px){ display:none; }
			@media (width > 1023px){ display:grid; grid-column: 4 / 5;}
		}
	}
	#sidebar-under-comic{
		padding-bottom: 0.3rem;
		& .navi-comments { padding: 1rem 1.5rem;}
		
		@media (width < 1024px){ display: flex; flex-flow: row wrap; justify-content: center; }
		@media (width > 1023px){ display: none;}
	}
}
	
#container{
	@media (width < 1280px) { width: var(--main_width); max-width: calc(100% - 2rem); margin: 0 auto; }
	@media (width > 1279px){
		grid-column: 3 / 4;
		grid-row: 3 / 4;
	}
	
	& .floating-header{
		color: white;
		border-bottom: 2px solid white;
		margin-top: 1.5em;
		position: relative;
		
		& img{ display:inline; position:absolute; right:0; bottom: -27px;}
		}
	
	/*This carveout allows the static pages to be split into multi-part sections in a pretty way*/
	& article:not(:has(section)), article section, #respond{
		border-top: 3px solid var(--theme_color);
		background-color: white;
		
		padding:1rem;
		
		color:black;
		
		& blockquote {
			margin:0;
			padding:1rem;
			background-color:var(--off_white);
			border-radius:1rem
		}
		
		& ul{ 
			list-style-type: "\2726";
			& li:before { content:""; margin-left:0.5rem;}
		}
		
		& img { max-width: 100%;}
		
		& .comic-post-info,.entry-meta {
			font-weight:100;
			font-size:10pt
			}
		
		&.comic {
			border: none;
		}
		
		& hgroup{
		
			& h1 {
				margin: 0.3rem 0;
				font-weight:800;
			}
			
			& .post-edit-link{
				font-weight: 400;
				margin-left: 1rem;
			}

			& p {
				font-weight:100;
				font-size:10pt
			}
		}
	}
	
	& article { margin-bottom: 2rem;}
	& section { margin-bottom: 1rem;}
	
	& .footer{ margin: 1rem 0;}
	
	& .horizontal-article-list{
		display: flex;
		flex-flow: row nowrap;
		gap: 1rem;
		margin-bottom: 1rem;
		
		overflow-x: scroll;
		
		& > * { flex: 1; margin-bottom: 0;}
	}
	
	& .patreon-button{
		border: 0px;
		border-radius:0.5rem;
		font-family:'K2D','Mitr',"Gill Sans Extrabold",sans-serif;
		font-size: 1rem;
		background-color: var(--theme_color);
		padding: 0.5rem 1rem;
		color: black;
		transition: transform var(--animation_duration);
		
		& svg { display: inline; height: 1rem; transform: scale(1.25);}
		
		&:hover{
			background-color: var(--off_white);
			cursor: pointer;
			transform: scale(1.05);
		}
	}
	
	/* Comments*/
	& .comments{
		border-top: none;
		
		padding:0;
		
		display:flex;
		flex-flow: column nowrap;
		gap: 0rem;
		
		& .comment{
			margin: 0;
			display:grid;
			grid-template-columns: 4rem auto;
			gap: 1rem;
			
			& .author-img{
				grid-column: 1 / 2;
				
				& img {
					position: relative;
					top:1rem;
					width:100%;
					height:auto;
					border-radius:200%
				}
				
				& .comment-tail {
					fill:#fff;
					stroke:#000;
					stroke-width:2px;
						
					width: 1.5rem;
					height:auto;
					
					position: relative;
					left: calc( 3.5rem + 3px );
					top: 0.5rem;
				}
			}
			
			& .comment-text {
				grid-column: 2 / 3;
				padding:2rem;
				flex:1;
				background-color:#fff;
				color:#000;
				border:2px solid #000;
				border-radius:2.5rem;
					
					& .author-name{
						padding:0;
						margin:0;
					}
				
					& .comment-details{
						padding:0;
						margin:0;
						font-weight:100;
						font-size:10pt;
					}
				
					& .comment-reply-link-container{
						margin:0;
						text-align:right;
						right:0;
							
						& .comment-reply-link{
							background:none;
							&:hover{ background: var(--theme_color);}
						}
					}
				}
			}
		
		& .children{
			padding: 0 0 0 0;
			margin: -1.5rem 0 0 1.5rem;
			
			& .comment-text{ background-color:var(--off_white);}
			& .author-img .comment-tail{ fill:var(--off_white);}
			}
		}
	
	& #respond{
		& .form-submit{
			text-align:right;
			}
		}
	
	& .nav-links{ display:flex; flex-flow: row nowrap; justify-content: center; gap: 7rem;}
	
	/*Cast Page*/
	& .charactercard{
		margin: 0;
	
		@media ( width < 800px){ display: flex; flex-flow: column nowrap;}
		@media ( width > 799px){ display: grid; grid-template-columns: 12rem auto; gap: 2rem;}
		
		padding: 1rem;
		margin-bottom: 1rem;

		border: 2px solid var(--theme_color);
		border-radius: var(--universal_border_radius);
		
		& img{ grid-column: 1 / 2; max-width: 100%; border-radius: var(--universal_border_radius);}
		& p:empty{ display: none; }
		& .charactercard-info{ 
			grid-column: 2/3;
			
			& hgroup{
				margin-left:0;
				& > * { display: inline;}
				& p { margin-left: 0.5rem; weight: 500;}
			}
			& figcaption{ font-style: italic; }
		}
		
		&.tc_blue{--theme_color: #5287e0;}
		&.tc_dust{--theme_color: #ba6f43;}
		&.tc_steel{--theme_color: #5d8e9d;}
		&.tc_lemon{--theme_color: #5d8493;}
		&.tc_grass{--theme_color: #8b8a39;}
		&.tc_pickle{--theme_color: #079987;}
		}
	
	/*Archive Page*/
	& .comic-archive-series-title { counter-reset: chapternumber; }
	& .comic-archive-chapter-wrap{ 
		counter-reset: pagenumber;
		
		@media (width < 800px) { display: flex; flex-flow: column nowrap;}
		@media (width > 799px) { display: grid; grid-template-columns: auto 18rem;	grid-template-rows: 4rem auto auto;}
		
		background-color: var(--off_white);
		border: 2px solid var(--theme_color);
		
		border-radius: var(--universal_border_radius);
		margin: 1rem 0rem;
		padding: 0;

		& > h3{ 
			grid-column: 1/2; 
			grid-row: 1/2;
			padding-left: 1rem; 
			counter-increment:chapternumber;
			&::before{content:"#" counter(chapternumber) ": ";}
		}
		& > div:nth-of-type(1){ grid-column: 2/3; grid-row: 1/3; padding: 1rem; max-width:100%; max-height: 18rem; margin:auto; content: var(--archive_thumbnail);}
		& > .comic-archive-chapter-description{ grid-column: 1/2; grid-row: 2/3; padding: 0 0 1rem 1rem;}
		& > .comic-archive-list-wrap{
			background-color: var(--theme_color);
			background-image: var(--comicwrap_bg_img);
			background-size: cover;
			background-blend-mode: multiply;
			grid-column: 1/3;
			grid-row: 3/4;
			
			margin-bottom:0;
			padding: 1rem;
			padding-right: calc(100% - 33rem);
			
			display: flex; 
			flex-flow: row wrap;
			gap:0.5em;
			contain:style;
			
			& .comic-list{
				height: 3.5rem;
				width: 2.5rem;
				
				border: 0.15rem solid white;
				border-radius:4px;
				counter-increment:pagenumber;
				
				&:nth-of-type(1){ margin-left: calc(3rem);}
				
				&:hover{
					transform: scale(1.1);
					background-color:white;
				}
				
				& .comic-archive-date{ display:none; }
				& .comic-archive-title a{
					display: block;
					
					width: 100%;
					height: 100%;
					text-align: center;
					color: white;
					font-size: 1.5em;
					font-weight: bold;
					text-decoration: none!important;
					font-size:0px;
					line-height:3rem;
				
					&::after{font-size:1rem; content:counter(pagenumber);}
					&:hover{ color: black;}
				}
			}
		}
	}
}

#wrapper > sidebar{
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	padding: 2rem calc(50% - 60px) 1rem calc(50% - 60px);
	
	&:nth-of-type(1){grid-column:2/3; grid-row:3/4; }
	&:nth-of-type(2){grid-column:4/5; grid-row:3/4; }
	
	& .cadnet{ display:block; border: 1px dotted gray;}
	
	& .skyscraper{
		width: 120px;
		height: 600px;
		}
	
	& p{ text-align: center; color: gray; font-size: 0.8rem;}
}

#footer{
	grid-column: 2 / 5;
	grid-row: 4 / 5;
	padding:1rem;
	background-color: black;
	text-align: center;
	display:flex;
	flex-flow: column nowrap;
	justify-content:center;
	
	& #footer_nav ul{ list-style-type:none; display: flex; flex-flow: row wrap; width:100%; justify-content: center; gap: 1rem; margin:0;}
}