/* hi hello hi i see u reading my code :) */

:root {
    --text-color: #543344;
    --bg-image: url("bg-index2.png");
	--bg-style: cover;
    --bg-color: #bfb4b3;
    --link-color: #515262;
	/* --link-hover-color: #8ea091; */
	--link-hover-color: #8ea091;
	--icon-color: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(107%) hue-rotate(104deg) brightness(116%) contrast(100%);
	--icon-hover: brightness(0) saturate(100%) invert(10%) sepia(53%) saturate(5517%) hue-rotate(346deg) brightness(119%) contrast(98%);
	--dark-button: 'turn off the lights';
	--popup-expand-w: 30vw;
	--popup-expand-h: 30vw;
}

@charset "utf-8";
/* CSS Document */

@font-face {
	font-family: om_font;
	src: url(HelvetiPixel.ttf);}

/* ---------------------------- */
/* ---STYLESHEET FOR DESKTOP--- */
/* ---------------------------- */

a, a:hover, label:hover { cursor:url("ghost1.png") /* 4 0 */, auto !important; }

body {
	cursor: url("ghost.png"), auto !important;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	margin: 16px;
	padding: 16px;
	padding-top: 42px;
	color: var(--text-color);
	font-family: om_font;
	line-height: 1.2;
  	background: #000000;
  	background-image: var(--bg-image);
  	background-size: var(--bg-style);
  	background-position-y: bottom;
	background-position-x: center;
  	background-attachment: fixed;
	
}

/*--------------------*/
/*--HTML TAG STYLING--*/
/*--------------------*/

hr {
	display: block;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    unicode-bidi: isolate;
    overflow: hidden;
	border-style: solid;
	border-width: 1.5px;
	border-top-color: #8e8287;
	border-left-color: #8e8287;
	border-right-color: #e6dedd;
	border-bottom-color: #e6dedd;
}

.black-icon{
    filter: var(--icon-color);
}

.black-icon:hover{
	filter: var(--icon-hover);
	cursor:url("ghost1.png") /* 4 0 */, auto !important;
}

li {
  list-style-type: none;
}

h.small {
  line-height: 0.8;
}

a {
	color: var(--link-color);
  	text-decoration: underline;
}

a:hover,
a:focus {
  	color: var(--link-hover-color);
  	text-decoration: none;
}

.footer {
	color: white;
}

.footer a {
  	color: white;
  	text-decoration: none;
	text-shadow:1px 1px 10px #fff, 1px 1px 10px #ccc;
}

.footer a:hover, a:focus {
  	color: #d3181c;
  	text-decoration: none;
	text-shadow:1px 1px 10px red, 1px 1px 10px #ccc;
}

.socials a {
	color: var(--link-color);
  	text-decoration: none;
	text-shadow:1px 1px 10px #fff, 1px 1px 10px #ccc;
}

.socials a:hover, a:focus {
  	text-decoration: none;
}

h3 {
  line-height: 0;
}

/*--------------------*/
/*---LAYOUT + STYLE---*/
/*--------------------*/

.container {
	width: 50vw;
	display: grid;
	justify-content: center;
	grid-template-areas:
		"content menu"
		"content extra-menu"
		"socials socials"
		"footer footer";
	grid-template-rows: min-content 1fr;
	grid-template-columns: 2fr 0.5fr;
  	gap: 16px;
  	background-color: transparent;
  	padding: 5px;
	padding-top: 0px;
}

.container > div.content {
	grid-area: content;
	position: relative;
	background-color: var(--bg-color);
	padding: 16px;
	border-style: solid;
	border-width: 2px;
	border-top-color: #e6dedd;
	border-left-color: #e6dedd;
	border-right-color: #8e8287;
	border-bottom-color: #8e8287;
}
.container > div.menu {
	grid-area: menu;
	position: relative;
	background-color: var(--bg-color);
	padding: 16px;
	border-style: solid;
	border-width: 2px;
	border-top-color: #e6dedd;
	border-left-color: #e6dedd;
	border-right-color: #8e8287;
	border-bottom-color: #8e8287;
}
.container > div.menu-mobile {
	display:none;
}
.container > div.extra-menu {
	grid-area: extra-menu;
	position: relative;
	background-color: var(--bg-color);
	padding: 16px;
	border-style: solid;
	border-width: 2px;
	border-top-color: #e6dedd;
	border-left-color: #e6dedd;
	border-right-color: #8e8287;
	border-bottom-color: #8e8287;
}
.container > div.socials {
	grid-area: socials;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.container > div.footer {
	grid-area: footer;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.footer p {
	margin-top: 0px;
	margin-bottom: 0px;
}
.border-img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	border-style: solid;
	border-width: 2px;
	border-top-color: #e6dedd;
	border-left-color: #e6dedd;
	border-right-color: #8e8287;
	border-bottom-color: #8e8287;
}
.container > div.header {
	grid-area: header;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.container > div.image {
	grid-area: image;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.image img {
	vertical-align:middle;
}

.float-img1 {
	display: none;
	position: fixed;
	top: 48px;
	right: 0px;
	width: 10vw;
	height: auto;
}

.float-img2 {
	display: none;
	position: fixed;
	left: 0px;
	bottom: 48px;
	z-index: -1;
}

.float-img3 {
	position: absolute;
	text-align: center;
	bottom: 16px;
}

.image img {
	vertical-align:middle;
}
.header-image {
	width: 50%; 
	height: auto;
}
.middle-image {
	width: 40%; 
	height: auto;
}
.cat-img {
    position: absolute;
    top: -36px;
	left: 4px;
    width: 65px;
    height: 65px;
}
.cinna-img1 {
	position: absolute;
	top: -64px;
	right: -20px;
	z-index: 1;
}
#popup-mob {
	display: none;
}

/* --------------------------- */
/* ---STYLESHEET FOR MOBILE--- */
/* --------------------------- */
@media (max-width: 1000px) {
	.container > div.socials {
		margin: 16px;
	}
	#popup-mob {
		display: block;
	}
	hr {
		display: block;
		margin-block-start: 0.5em;
		margin-block-end: 0.5em;
		margin-inline-start: auto;
		margin-inline-end: auto;
		unicode-bidi: isolate;
		overflow: hidden;
		border-style: solid;
		border-width: 2px;
		border-top-color: #8e8287;
		border-left-color: #8e8287;
		border-right-color: #e6dedd;
		border-bottom-color: #e6dedd;
	}
	.cinna-img1 {
		display: none;
	}
	.link-icons {
		width: 70%;
		height: auto;
	}
	:root {
		--popup-expand-w: 94vw;
		--popup-expand-h: 92vw;
	}
	body {
		display: flex;
		align-items: left;
		font-size: 24px;
		margin: 8px;
		padding: 16px;
		padding-top: 0px;
		line-height: 1.2;
	}
	p {
		margin-top: 0px;
		padding-top: 0px;
	}
	.container {
		width: 100% !important;
		display: grid;
		justify-content: center;
		grid-template-areas:
			"menu-mobile"
			"content"
			"socials"
			"footer";
		grid-template-columns: 1fr;
		gap: 0px;
		padding: 0px;
	}
	.menu {
		display: none;
	}
	.extra-menu {
		display: none;
	}
	@media (min-width: 693px) {
		.menu-mobile > div.mobile-list {
			grid-template-columns: repeat(3, 200px) !important;
		}
	}
	.container > div.menu-mobile {
		display: block;
		justify-content: center;
		grid-area: menu-mobile;
		position: relative;
		background-color: var(--bg-color);
		padding: 12px;
		border-style: solid;
		border-width: 2px;
		border-top-color: #e6dedd;
		border-left-color: #e6dedd;
		border-right-color: #8e8287;
		border-bottom-color: #8e8287;
	}
	.menu-mobile > div.mobile-list {
		display: grid;
		padding: 12px;
		justify-content: center;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}
	.float-img1, .float-img2, .float-img3 {
		display: none;
	}
	.running-cat {
		display: none;
	}
/* ------------------------ */
/* ---POPUP MOBILE STYLE--- */
/* ------------------------ */
	#popup-mob {
		margin: auto;
		width: 30vw;
		height: 30vw;
		color: black;
		background-color: var(--bg-color);
		padding: 0px;
		margin-bottom: 8px;
		border-style: solid;
		border-width: 2px;
		border-top-color: #e6dedd;
		border-left-color: #e6dedd;
		border-right-color: #8e8287;
		border-bottom-color: #8e8287;
	}

	#popupcontent-mob {
		width: 30vw;
		height: 30vw;
	}

	#popup-mob iframe {
		position: relative;
		justify-content: center;
		align-items: center;
		margin:0px;
		width: calc(100% - 4px);
		height: calc(100% - 32px);
	}

	#popupheader-mob {
		padding-left: 6px;
		cursor: move;
		z-index: 10;
		background-color: #543344;
		text-align: left;
		color: white;
	}

	#popup-close-button-mob, #popup-min-button-mob, #popup-max-button-mob {
		cursor: url("ghost1.png"), auto !important;
		width: 24px;
		height: 24px;
		background-color: var(--bg-color);
		padding: 4px;
		margin-top: 2px;
		margin-right: 2px;
		border-style: solid;
		border-width: 2px;
		border-top-color: #e6dedd;
		border-left-color: #e6dedd;
		border-right-color: #8e8287;
		border-bottom-color: #8e8287;
	}

	#popup-close-button-mob:active, #popup-min-button-mob:active, #popup-max-button-mob:active {
		border-top-color: #8e8287;
		border-left-color: #8e8287;
		border-right-color: #e6dedd;
		border-bottom-color: #e6dedd;
	}

	#popup-close-button-mob img, #popup-min-button-mob img, #popup-max-button-mob img {
		width: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}