* {
			box-sizing: inherit;
		}
		body, html {
		        margin: 0;
		        padding: 0;
		        width: 100%;
		        height: 100%;
		        overflow-x: hidden;
		        font-size: calc(15px + 0.390625vw);
		        background-color: #E6E3DB;
		    }
		html {
		        scroll-behavior: smooth;
		        font-size: calc(15px + 0.390625vw);
		}
		body {
		    margin: 0;
		    overflow-x: hidden;
		    width: 100vw;
		}
		#s_bar {
		    width: 100%;
		    color: #231F20;
		    background-color: #E6E3DB;
		    position: absolute;
		    display: flex;
		    flex-direction: row;
		    justify-content: space-between;
		    bottom: 0;
		    height: 35px;
		    border-top: 1.5px solid #231F20;
		    font-family: IBM Plex Mono;
		    font-size: 0.6rem;
		    align-items: center;
		    z-index: 1;
		}
		#s_bar > span.l::before {
		    text-align: left;
		    padding-left: 12px;
		    content: "2023(c)KNOT . ";
		}

		#s_bar > span.r {
		    float: right;
		    padding-right: 12px;
		    margin-top: auto;
		    margin-bottom: auto;
		}
		#content {
		    height: calc(100vh - 35px);
		 		position: fixed;
		 		display: grid;
		 		grid-template-columns: min-content auto;
		 		grid-template-rows: repeat(3 calc(100dvh - 35px));
				overflow-y: scroll;
		 		scroll-snap-type: y mandatory;
		}
		#l_menu {
		    position: sticky;
		 		top: 0;
		 		align-self: start;
		    border-right:  1.5px solid #231F20;
		    left: 0;
		    aspect-ratio: 509 / 718;
		    max-width: 450px;
		    height: calc(100vh - 35px);
		    overflow: hidden;
		    display: flex;
		    flex-direction: row-reverse;
		    grid-column: 1;
		 		transition: 0s;
		}
		img#k {
		    position: absolute;
		    height: 50px;
		    bottom: 20px;
		    padding-right: 20px;
		}
		#ribbons {
		    align-self: flex-end;
		    aspect-ratio: 509 / 718;
		    max-width: 450px;
		    height: calc(100vh - 35px);
		    overflow: hidden;
		}
		.emp {
		    font-weight: 500;
		    color: #006837;
		    text-align: right;
		    padding-bottom: 0;
		    margin-bottom: 0;
		    padding-top: 20px;
		}
		div.maintext {
		    padding: 50px;
		}
		iframe.menu {
		    display: inline-block;
		    position: absolute;
		    min-height: 200px;
		    width: 100%;
		    height: 100%;
		    padding-right: 30vh;
		    bottom: 35px;
		    transform: scale3d(1.8,1.8,1.8);
		}
		.marquee {
		    background-color: #231F20;
		    font-family: IBM Plex Mono;
		    font-style: italic;
		    height: 35px;
		    margin: -20px;
		    margin-bottom: 20px;
		    color: #E6E3DB;
		    font-size: 16px;
		    padding-top;
		}
		marquee:hover {
		    marquee scrollamount=0.1
		    background-color: none; border: none; margin-top:5px;
		}
		.segment {
		 		font-family: Avenir Next;
		    font-size: 2.1rem;
		 		box-sizing: border-box;
		 		grid-column-start: 2;
		    height: calc(100dvh - 35px);
		 		width: 100%;
		    scroll-snap-align: start;
		    position: relative;
		    display: flex;
		    flex-direction: column;
		    overflow: hidden;
		    justify-content: space-between;
		    color: #231F20;
		 		margin: 0;
				padding: 0;
		 		transition: 0;
		}
		.segment:last-of-type {
		  margin-bottom: 0px;
		}
		.segment > img.arr{ /*scroll down arrow style*/
		    height: 50px;
		    bottom: 17px;;
		    vertical-align: bottom;
		    position: absolute;
		    left: 10px;
		}
		span.med {
		    font-weight: 500; /*increases font-weight to medium*/
		}
		.bpc { /*blogposts container*/
		    box-sizing: content-box;
		    padding-left: 50px;
		    margin-right: 50px;
		    width: calc(100%-30px);
		    row-gap: 30px;
				margin-top: -20px;
		 		padding-bottom: 10px;
		    position: relative;
		    overflow: hidden;
		    display: flex;
		    flex-direction: column;
		    flex-wrap: wrap;
		    justify-content: center;
		}
		.bpp { /*blogpost*/
		    box-sizing: content-box;
		    border: 1.5px solid #231F20;
		    display: flex;
		    min-height: 130px;
		    flex-grow: 1;
		    max-height: 300px;
		    width: calc(100% - 3px);

		}
		div.bpp_img { /*left side of blogpost container*/
		    height: calc(100% - 40px);
		    min-width: 130px;
		    max-width: 131px;
		    border-right: 1.5px solid #231F20;
		    padding: 20px;
		    overflow: hidden;
		    display: inline-flex;
		}
		img.bpp_img { /*blogpost image*/
		    vertical-align: middle;
		    width: 100%;
		    object-fit: cover;
		}
		div.readmore {/*readmore text container*/
		    min-height: 30px;
		 		margin-top: 20px;
		    text-align: right;
		    padding-right: 50px;
		 		margin-bottom: 50px;
		    font-family: "IBM Plex Mono", "Necto Mono";
		    font-size: 0.85rem;
		    color: #231F20;
		 		justify-self: flex-end;
		}
		span.readmore { /*readmore text*/
		    background-image: linear-gradient(#231F20, #231F20);
		    background-position: 0 100%;
		    transition: 0.5s;
		    padding-bottom: 0.5rem;
		    background-repeat: no-repeat;
		    background-size: 100% 0.1em, 0 0, 100% 0.1em;
		    transition: 0.5s;
		    background-position: 150px 100%;
		}
		span.readmore:hover { /*underline animation on hover*/
		    text-decoration: underline 1.5px solid #231F20;
		    text-decoration: none;
		    background-image: linear-gradient(#231F20, #231F20);
		    background-repeat: no-repeat;
		    background-size: 100% 0.1em, 0 0, 100% 0.1em;
		    transition: 0.5s;
		    background-position: 0 100%;
		    cursor: pointer;
		}
		.bpp_r { /*right part of the blogpost container*/
		    align-self: flex-end;
		    height: calc(100% - (2 * 20px) );
		    width: 100%;
		    padding: 20px;
		    position: relative;
		    display: grid;
		    align-content: space-between;
		}
		.bpp_r > div:nth-of-type(1) {/*blogpost  title*/
		    border: 2px;
		    width: 100%;
		    font-size: 0.8rem;
		    padding-top: 0px;
		    padding-bottom: 0px;
		    font-family: "IBM Plex Mono", "Necto Mono", "Courier New", "Courier";
		    display: flex;
		    color: #231F20;

		}
		.bpp_r > div:nth-of-type(2) { /*tag container*/
		    height: 26px;
		    display: flex;
		    overflow-x: scroll;
		    overflow-y: hidden;
		    padding: 0;
		    width: 100%;
		    min-height: 0;
		    scroll-snap-type: x mandatory;
		}

		.bpp_r > div:nth-of-type(3) {/*container at the bottom*/
		    display: flex;
		    justify-content: space-between;
		    width: 100%;
		}
		.bpp_r > div:nth-of-type(3) > div:nth-of-type(1){ /*author of blogpost*/
		    font-family: Avenir Next;
		    font-style: italic;
		    font-weight:500;
		    font-size: 0.7rem;
		}
		.bpp_r > div:nth-of-type(3) > div:nth-of-type(2){ /*date of blogpost*/
		    font-family: Avenir Next;
		    font-weight:500;
		    font-size: 0.7rem;
		    text-align: right;
		}
		.tag { /*tag container*/
		    height: 10px;
		    background-color: rgba(57, 181, 74, 0.2);
		    border-radius: 30px;
		    display: flex;
		    padding: 8px;
		    margin-right: 8px;
		    flex: 0 0 auto;
		    scroll-snap-align: start;
		}
		.tag > div:nth-of-type(1){ /*tag dot*/
		    height: 10px;
		    aspect-ratio: 1/1;
		    opacity: 1;
		    width: auto;
		    border-radius: 10px;
		}
.tag > div:nth-of-type(2)
{ /*text inside of tag*/
  font-family: "IBM Plex Mono";
  font-size: 12px;
  margin-top: -3px;
  color: black;
  padding-left: 8px;
  padding-right: 3px;
  font-size: 0.58rem
}
#r_text
{
	display: none;  /*hides right column used for narrower viewports*/
}
		a:hover{
			color: #231F20;
			text-decoration-color: #231F20;
			text-decoration-thickness: 0.75px;
			text-underline-offset: 4px;
			transition: 0s;
		}
		a {
			color: #231F20;
		}
		a[href^="http"] {
			background: url(assets/externalurl.svg) no-repeat;
			background-size: 0.7em;
			background-position: 100% center;
			padding: 1px;
			margin-left: 4px;
			padding-right: 14px;
			height:9px;
		}
			@keyframes marquee {
				0% {
				-moz-transform: translateX(100%);
				-webkit-transform: translateX(00%);
				transform: translateX(00%)
				}
				100% {
				-moz-transform: translateX(-100%);
				-webkit-transform: translateX(-100%);
				transform: translateX(-100%);
				}
			}
			@keyframes marquee2 {
				0% {
				-moz-transform: translateX(100%);
				-webkit-transform: translateX(100%);
				transform: translateX(100%)
				}
				100% {
				-moz-transform: translateX(00%);
				-webkit-transform: translateX(00%);
				transform: translateX(0%);
				}
			}
			.marquee_c1 {
				font-size: 5.5rem;
				position: fixed;
				padding-top: 0.2rem;
				bottom: 0;
				font-family: "Receiptional Receipt";
				width: fit-content;
				white-space: nowrap;
				animation: marquee 30s linear infinite;
			}
			.marquee_c2{
				font-size: 5.5rem;
				position: fixed;
				bottom: 0;
				padding-top: 0.2rem;
				font-family: "Receiptional Receipt";
				width: fit-content;
				white-space: nowrap;
				animation: marquee2 30s linear infinite;
			}
			#container_c { /*grid layout*/
				width: 100dvw;
				height: 100dvh;
				display: grid;
				grid-template-columns: 275px repeat(6, 1fr);
				grid-template-rows: 100px calc(100dvh - 100px);
				overflow: scroll;
				}
			#leftcolumn_c {
				grid-column-start: 1;
				grid-column-end: 2;
				grid-row-start: 1;
				grid-row-end: 4;
				z-index: 1;
				background: rgb(230,227,219);
				background: linear-gradient(90deg, rgba(230,227,219,0) 0%, rgba(230,227,219,1) 90%);
				font-family: "IBM Plex Mono";
				font-size: 0.75rem;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 30px;
			}
		#leftcolumn_c > span:nth-child(2) {
			margin-top: 1rem;
			margin-left: -1.7rem;
		}
		#middletemplate_c {
			grid-column-start: 2;
			grid-column-end: 6;
			grid-row-start: 1;
			grid-row-end: 3;
			background-color: #E6E3DB;
			border-left: 1.5px solid #231F20;
			border-right: 1.5px solid #231F20;
			z-index: 1;
			font-family: "Avenir Next";
			font-size: 1.rem;
			padding: 2rem;
			padding-top: 100px;
			line-height: 2rem;
			text-align: justify;
			overflow-y: scroll;
			}
		#righttemplate_c {
			grid-column-start: 6;
			grid-column-end: 8;
			grid-row-start: 2;
			grid-row-end: 4;
			background: rgb(230,227,219);
			background: linear-gradient(90deg, rgba(230,227,219,1) 10%, rgba(230,227,219,0) 80%, rgba(230,227,219,0) 100%);
			z-index: 1;
			font-family: "Avenir Next";
			font-size: 0.7rem;
			padding-left: 30px;
			padding-right: 30px;
			line-height: 1.5rem;
		}
		#righttemplate_c > div:not([id="gradient"]) {
			max-width: 200px;
			height: calc(100vh - 100px - 200px);
			overflow: scroll;
			padding-bottom: 20px;
			box-sizing: border-box;
		}
			#righttemplate_c > div > .section {
				font-style: italic;
				margin-bottom: 1rem;
				margin-left: 1rem;
			}
		#righttemplate_c > #gradient {
			height: 50px;
			width: 100%;
			position: absolute;
			bottom: 200px;
			background: rgb(230,227,219);
			background: linear-gradient(180deg, rgba(230,227,219,0) 0%, rgba(230,227,219,1) 80%);
		}
		.marquee_bp1 {
			font-size:1.6rem;
			position: relative;
			padding-top: 0.2rem;
			bottom: 0;
			font-family: "Receiptional Receipt";
			width: fit-content;
			white-space: nowrap;
			animation: marquee 30s linear infinite;
		}
		.marquee_bp2 {
			position: relative;
			font-size: 1.6rem;
			bottom: 0;
			margin-top: -2.6rem;
			padding-top: 0.2rem;
			font-family: "Receiptional Receipt";
			width: fit-content;
			white-space: nowrap;
			animation: marquee2 30s linear infinite;
		}
		#container_bp {
			/*grid layout*/
			width: 100dvw;
			height: 100dvh;
			display: grid;
			grid-template-columns: repeat(6, 1fr);
			grid-template-rows: 225px calc(100dvh - 225px);
			overflow: scroll;
		}
		#leftcolumn_bp {
			grid-column-start: 1;
			grid-column-end: 3;
			grid-row-start: 2;
			grid-row-end: 3;
			z-index: 1;
			background: rgb(230, 227, 219);
			font-family: "IBM Plex Mono";
			font-size: 0.75rem;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between
		}
		#leftcolumn_bp > div:first-child {
			padding: 1.8rem;
			padding-top: 0;
			font-size: 1.3rem;
			font-family: "IBM Plex Mono";
			text-align: left;
			font-weight: 500;
		}
		#leftcolumn_bp > div:first-child > div {
			padding-top: 1rem;
			font-size: 0.8rem;
			font-family: "IBM Plex Mono";
			text-align: left;
			font-weight: normal;
			opacity: 100%;
		}
		#leftcolumn_bp > div:first-child > div > a {
			opacity: 30%;
			transition: 0.2s;
		}
		#leftcolumn_bp > div:first-child > div > a:hover {
			opacity: 60%;
			transition: 0.2s;
		}
		#leftcolumn_bp > div:nth-child(2) {
			padding: 1.8rem;
			font-size: 0.9rem;
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			font-family: "Avenir Next";
			display: flex;
		   justify-content: space-between;
		}
		#leftcolumn_bp > div:nth-child(2) > div#author {
			font-style: italic;
		}
		#leftcolumn_bp > div:nth-child(2) > div#date {
		}
		#middletemplate_bp_1 {
			grid-column-start: 3;
			grid-column-end: 6;
			grid-row-start: 1;
			grid-row-end: 3;
			background-color: #e6e3db;
			border-left: 1.5px solid #231f20;
			border-right: 1.5px solid #231f20;
			z-index: 1;
			font-family: "Avenir Next";
			font-size: 0.88rem;
			text-align: justify;
			display: flex;
			flex-direction: column;
			align-content: center;
			justify-content: flex-start;
			overflow-y: scroll;
			overflow-x: hidden;
			line-height: 1.5rem;
		}
		#middletemplate_bp_1 > div:first-child > ul {
			list-style-type: "※";
			padding-left: 1.5rem;
			padding-top: 0.7rem;
			padding-bottom: 0;
			margin-bottom: 0;
			font-family: "Avenir Next";
			font-size: 0.88rem;
			list-style-position: outside;
		}
		#middletemplate_bp_1 > div:first-child > ul > li {
			padding-left: 0.5rem;
		}
		#middletemplate_bp_1 > div:first-child {
			height: 225px;
			padding: 2rem;
			padding-top: 1.8rem;
			font-family: "IBM Plex Mono";
			font-size: 0.88rem;
			line-height: 1.8rem;
			flex-flow: row wrap;
		}
		#middletemplate_bp_1 > div:nth-child(2), middletemplate_bp_1 > .heading {
			padding: 2rem;
			padding-top: 0;
			font-size: 1.1rem;
			text-align: left;
			padding-bottom: 1rem;
			font-weight: 500;
		}
		#middletemplate_bp_1 > div.section {
			padding: 2rem;
			padding-top: 0;
		}
		#righttemplate_bp {
			grid-column-start: 6;
			grid-column-end: 7;
			grid-row-start: 1;
			grid-row-end: 2;
			background: rgb(230, 227, 219);
			z-index: 1;
			font-family: "IBM Plex Mono", "Necto Mono", "Courier New";
			font-size: 0.7rem;
			padding: 1.8rem;
			padding-top: 1.5rem;
			line-height: 1.8rem;
			display: flex;
			flex-direction: column;
		}
		#righttemplate_bp_2 {
			grid-column-start: 6;
			grid-column-end: 7;
			grid-row-start: 2;
			grid-row-end: 3;
			background: rgb(230, 227, 219);
			z-index: 1;
			font-family: "Avenir Next";
			font-size: 0.7rem;
			padding-left: 30px;
			padding-right: 30px;
			padding-top: 25px;
			line-height: 1.3rem;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			padding-bottom: 30px;
		}
		#middletemplate_bp_1 > div > .gradient_l {
			height: 2.2rem; 
			aspect-ratio: 1/1; 
			background-color: red; 
			position: relative; 
			float: left;
			margin-bottom: -2.1rem; 
			z-index: 1;				
			background: rgb(230,227,219);
			background: linear-gradient(270deg, rgba(230,227,219,0) 0%, rgba(230,227,219,1) 90%);"
		}
		#middletemplate_bp_1 > div >.gradient_r {
			height: 2.2rem; 
			aspect-ratio: 1/1; 
			background-color: red; 
			position: relative; 
			margin-bottom: -2.1rem;
			float: right;
			z-index: 1;				
			background: rgb(230,227,219);
			background: linear-gradient(90deg, rgba(230,227,219,0) 0%, rgba(230,227,219,1) 90%);"
		}
		ol.sources {
			margin: 0; 
			text-align: left;
			padding-top: 0.5rem;
			counter-reset: list;
		}
		ol.sources > li {
			list-style: none;
			padding-bottom: 0.5rem;
		}
		ol.sources > li::before {
			content: counter(list) " )";
			counter-increment: list;
  			margin-left: -3.1em;
			padding-right: 0.5rem;
  			width: 2.5em;
  			display: inline-block;
  			text-align: right;
		}