/* fonts */

@font-face {
    font-family: 'catshopregular';
    src: url('../fonts/catshop-webfont.woff2') format('woff2'),
         url('../fonts/catshop-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'cooper reg';
    src: url('../fonts/Cooper-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'llewieregular';
    src: url('../fonts/llewie-webfont.woff2') format('woff2'),
         url('../fonts/llewie-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ta-marugo_gf_03regular';
    src: url('../fonts/ta-marugo_gf_03_regular-webfont.woff2') format('woff2'),
         url('../fonts/ta-marugo_gf_03_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ta-marugo_gf_05regular';
    src: url('../fonts/ta-marugo_gf_05_regular-webfont.woff2') format('woff2'),
         url('../fonts/ta-marugo_gf_05_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ocr_b_stdregular';
    src: url('../fonts/ocr_b_std_regular-webfont.woff2') format('woff2'),
         url('../fonts/ocr_b_std_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: "Peix Square";
  src: url("../fonts/Peix.woff") format("woff-variations"),
       url("../fonts/Peix.ttf") format("truetype-variations");
}
@font-face {
    font-family: 'hershenoaillesfuturatriplexRg';
    src: url('../fonts/hershey-noailles-futura-triplex-regular-webfont.woff2') format('woff2'),
         url('../fonts/hershey-noailles-futura-triplex-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'hershenoaillesfuturatriplexRg';
    src: url('../fonts/hershey-noailles-futura-triplex-regular-webfont.woff2') format('woff2'),
         url('../fonts/hershey-noailles-futura-triplex-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'hershey-noailnoailleshelpmeLt';
    src: url('../fonts/hershey-noailles-helpme-light-webfont.woff2') format('woff2'),
         url('../fonts/hershey-noailles-helpme-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'kupoleregular';
    src: url('../fonts/kupole-regular-webfont.woff2') format('woff2'),
         url('../fonts/kupole-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* general element style and layout */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
code {
	font-family: monaco;
	font-size: 10pt;
	cursor: url(https://files.catbox.moe/x5d5ia.png), text;
}
body {
	cursor: url(https://files.catbox.moe/cj2t8a.png), auto;
	background-attachment: fixed;
}
main {
	padding: 1.5%;
	align-content: start;
	display: grid;
	grid-gap: 30px;
	grid-template:
		"left centre right"
		"left centre right"
		"left centre right"
		/1fr 7fr 2fr;
}
.left {
	grid-area: left;
	display: flex;
	flex-direction: column;
}
.centre {
	grid-area: centre;
}
.right {
	position: relative;
	grid-area: right;
	display: flex;
	flex-direction: column;
	height: fit-content;
}

/* links */

a {
	text-decoration: none;
	color: black;
	font-size: 14pt;
	cursor: url(https://files.catbox.moe/vyp65t.png), pointer;
}
a:hover {
	color: white;
}
a:active {
	color: black;
}
p > a {
	text-decoration: underline;
}

/* text */

p {
	text-align: justify;
	font-family: "peix square";
	margin-bottom: 28px;
	color: black;
	font-size: 14pt;
}

/* header text */

h1 {
	font-family: "peix square";
	font-variation-settings: "VOID" 0, "BLCK" 10, "LONG" 600, "ROND" 0;
	font-size: 22pt;
	padding-bottom: 20px;
}
.boxinfo > h1 {
	font-size: 15pt;
	animation-name: floating;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, 5px); }
100% { transform: translate(0, -0px); }
}
h3 {
	font-family: "peix square";
	font-weight: normal;
	font-variation-settings: "VOID" 0, "BLCK" 10, "LONG" 600, "ROND" 0;
	font-size: 14pt;
	margin-bottom: 18px;
}

/* site header style */

.siteheaderdiv {
	position: relative;
	display: flex;
}
.siteheader {
	max-width: 42%;
	margin-left: 230px;
	margin-top: 20px;
}

/* general div style */

.boxcentre {
	position: relative;
	border: 2px solid #292929;
	box-shadow: 3px 3px #292929;
	background-image: url(https://files.catbox.moe/zk4hbv.png);
	padding: 32px;
	max-width: 880px;
	margin-bottom: 30px;
}
.boxinfo {
	border-width: 45px;
	border-style: solid; 
	max-width: 290px;
}
.scroll > p{ 
	margin: 0 auto; 
	padding-bottom: 10px;
	width:100%; 
	font-family: "monaco";
	font-size: 10pt;
}
.scroll {
	margin: 0 auto;
	margin-top: 6px;
	padding: 10px;
	width:100%;
	min-height: 100px;
	max-height:155px;
	border: dotted black;
	border-radius: 10px;
	background:white;
	color:black;
	overflow-y:auto;
}
.bubbleylw {
	position: relative;
	border-radius: .5em;
	background-color: lightyellow;
	padding: 20px;
}
.bubbleylw:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 25%;
	width: 0;
	height: 0;
	border: 23px solid transparent;
	border-top-color: lightyellow;
	border-bottom: 0;
	border-left: 0;
	margin-left: -11.5px;
	margin-bottom: -23px;
}

/* navigation button style */

.swirl {
	margin-bottom: -2px;
	margin-left: 4px;
	width: 18px;
}
.navoption {
	background-image: url(https://files.catbox.moe/zk4hbv.png);
	border: 2px solid #292929;
	box-shadow: 3px 3px #292929;
	align-content: center;
	height: 40px;
	width: 138px;
	margin: 0px 10px 10px 30px;
	text-align: left;
	text-wrap: nowrap;
}
.navoption:active {
	box-shadow: none;
	transform: translate(3px, 3px);
}
.navoption > a {
	font-family: "peix square";
	font-weight: normal;
	font-variation-settings: "VOID" 0, "BLCK" 10, "LONG" 600, "ROND" 0;
	font-size: 15pt;
	text-decoration: none;
	border-start-start-radius: 5px;
	border-end-start-radius: 5px;
}

/* links side box */

.boxinfo > ul {
	list-style: none;
	font-family: monaco;
}
.boxinfo ul a {
	display: block;
	position: relative;
	align-content: center;
	width: 128px;
	height: 35px;
	margin-bottom: 5px;
	font-size: 10.5pt;
	border-radius: 3px;
}
.boxinfo ul a:active {
	border: inset black;
}

/* footer */

footer {
	display: grid;
	grid-template: 
		"copyright footerlink footer3"
		"top . ."
		/1fr 1fr 1fr;
	grid-gap: 5px;
	padding: 15px;
	font-family: peix square;
	background-color: purple;
	height: fit-content;
}
footer div {
	display: flex;
	height: fit-content;
	padding: 2px 5px 2px 5px;
}
footer p {
	margin: 0;
}
footer a {
	margin: 0 5px 0 5px;
	text-decoration: underline;
}
.copyright {
	grid-area: copyright;
}
.footerlink {
	grid-area: footerlink;
	justify-content: center;
}
.footer3 {
	grid-area: footer3;
	justify-content: end;
}
.top {
	grid-area: top;
}

/* images */

.divide {
	margin: 20px 0px 20px 0px;
	width: 450px;
	display: block;
}
.button {
	max-width: 88px;
	height: fit-content;
}

/* responsive */

@media (max-width: 500px) {
	main {
		display:flex;
		flex-direction: column;
		align-items: center;
	}
	nav {
		display: flex;
		justify-items: space-between;
		align-content: space-between;
		max-width: 100%;
	}
	.navoption {
		margin: 0;
	}
}