/*
Theme Name: Seiryukan
Author: Sensei
Author URI: http://blackdragonjudo.com/
Description: Seiryukan (The Institute of Pure Flow) Theme
Text Domain: seiryukan
Version: 1.0
License: n/a for private use only
*/

/* RESET */

/* Box sizing rules */

	*, 	*::before, 	*::after {
	  box-sizing: border-box;
	}

/* Remove default margin and padding */

	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;
	  font-size: 100%;
	  font: inherit;
	  vertical-align: baseline;
	}

/* HTML5 display-role reset for older browsers */

	article, aside,details, figcaption, figure, footer,
	header hgroup, menu, nav, section {
	  display: block;
	}

/* Set core body defaults */

	body {
	  line-height: 1;
	  -webkit-text-size-adjust: 100%;
	  -webkit-font-smoothing: antialiased;
	}

/* Remove list styles on ul, ol elements */

	ol,
	ul {
	  list-style: none;
	}

/* Remove default blockquote and q styles */

	blockquote,
	q {
	  quotes: none;
	}

	blockquote:before,
	blockquote:after,
	q:before,
	q:after {
	  content: '';
	  content: none;
	}

/* Remove table borders and spacing */

	table {
	  border-collapse: collapse;
	  border-spacing: 0;
	}

/* Reset form elements */

	button, input, optgroup, select, textarea {
	  margin: 0;
	  padding: 0;
	  border: 0;
	  font-size: 100%;
	  font-family: inherit;
	  line-height: inherit;
	  color: inherit;
	  background-color: transparent;
	}

/* Remove default button styles */

	button {
	  cursor: pointer;
	  background-color: transparent;
	}

/* Remove outline for non-keyboard users */

	button:focus:not(:focus-visible) {
	  outline: none;
	}

/* Remove default link styles */

	a {
	  color: inherit;
	  text-decoration: none;
	  background-color: transparent;
	}

/* Remove default image behavior */

	img {
	  max-width: 100%;
	  display: block;
	  border-style: none;
	}

/* Prevent vertical resizing of textareas */

	textarea {
	  resize: vertical;
	}

/* Remove default fieldset styles */

	fieldset {
	  min-width: 0;
	  padding: 0;
	  margin: 0;
	  border: 0;
	}

/* Remove default legend styles */

	legend {
	  padding: 0;
	}

/* Remove default hr styles */

	hr {
	  box-sizing: content-box;
	  height: 0;
	  overflow: visible;
	}

/* Remove default pre styles */

	pre {
	  font-family: monospace, monospace;
	  font-size: 1em;
	}

/* Remove default abbr styles */

	abbr[title] {
	  border-bottom: none;
	  text-decoration: underline;
	  text-decoration: underline dotted;
	}

/* Remove default code styles */

	code,
	kbd,
	samp {
	  font-family: monospace, monospace;
	  font-size: 1em;
	}

/* Remove default small styles */

	small {
	  font-size: 80%;
	}

/* Remove default sub and sup styles */

	sub, sup {
	  font-size: 75%;
	  line-height: 0;
	  position: relative;
	  vertical-align: baseline;
	}

	sub {
	  bottom: -0.25em;
	}

	sup {
	  top: -0.5em;
	}

/* ********** END RESET ********** */

/* *************************************************** */
/* ******************** THEME CSS ******************** */
/* *************************************************** */

html {}

body {}

wrapper {}

.clear {
	clear: both;
}

/* ******************** Header-Container ********************* */

#header-container {
	padding-bottom: 20px;
	background: lightblue;
}

	.logo-container {
		padding: 10px 0;
		text-align: center;
}

	.header-banner {}

		.header-upper {}
		
			.site-title {
				font-size: 150%;
				font-weight: bold;
				padding: 5px 0;
				text-align: center;
			}

		.header-lower {}

			.site-tag {
				text-align: center;
				margin-top: 10px;
			}

/* ********************* Main-Container ********************** */

#main-container {
	width: 100%;
	padding-left: 30px;
}

/* ******************** Sidebar-Container ******************** */

#sidebar-container {
	width: 100%;
	padding-left: 30px;
}

/* ******************** Footer-Container ********************* */

#footer-container {
	margin-top: 30px;
	padding: 20px 0;
	background: black;
	color: white;
	text-align: center;
}

/* ********************** Nav-Container ********************** */

#nav-container {}

       
/* body {
	font-family: Arial, sans-serif;
	transition: transform 0.3s ease;
} */
        
/* Hamburger button styles */
.menu-btn {
	position: fixed;
	top: 62px;
	right: 20px;
	z-index: 2;
	width: 40px;
	height: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.menu-btn span {
	display: block;
	width: 25px;
	height: 3px;
	background: #333;
	margin: 3px 0;
	transition: all 0.3s ease;
}

/* Menu styles */
.menu {
	position: fixed;
	top: 40px;
	right: -300px;
	width: 300px;
	height: 100vh;
	background: #f1f1f1;
	z-index: 1;
	transition: right 0.3s ease;
	padding: 80px 20px 20px;
	box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
}

.menu ul {
	list-style: none;
}
        
.menu li {
	padding: 15px 0;
	border-bottom: 1px solid #ddd;
}

.menu a {
	text-decoration: none;
	color: #333;
	font-size: 18px;
}

/* Checkbox hack to toggle menu */
#menu-toggle {
	display: none;
}

#menu-toggle:checked ~ .menu {
	right: 0;
}

#menu-toggle:checked ~ .menu-btn span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}
        
#menu-toggle:checked ~ .menu-btn span:nth-child(2) {
	opacity: 0;
}

#menu-toggle:checked ~ .menu-btn span:nth-child(3) {
	transform: rotate(-45deg) translate(7px, -6px);
}

#menu-toggle:checked ~ body {
	transform: translateX(-100px);
}

/* Content styles */
.content {
	padding: 20px;
	margin-top: 60px;
}
        
h1 {
	margin-bottom: 20px;
}

/* ******************** BREAKPOINT ******************** */
@media (min-width: 768px) {
	
		/* *********** Main-Container ************ */

		#main-container {
			width: 60%;
			margin-left: 3.5%;
			margin-right: 5%;
			float: left;
			padding-top: 30px;
			padding-left: 0;
			
		}
	
		/* ********** Sidebar-Container ********** */

		#sidebar-container {
			width: 28%;
			margin-right: 3.5%;
			float: right;
			padding-top: 30px;
			padding-left: 0;
		}
}