/*
       ,_    /) (\    _,				hi! if you're seeing this,
        >>  <<,_,>>  <<					you're a nerd!
       //   _0.-.0_   \\				
       \'._/       \_.'/				
        '-.\.--.--./.-'					
        __/ : :Y: : \     				
';,  .-(_| : : | : : |_)-.  ,:'			
  \\/.'  |: : :|: : :|  `.\//
   (/    |: : :|: : :|    \)
         |: : :|: : :;
        /\ : : | : : /\
       (_/'.: :.: :.'\_)
        \\  `""`""`  //
         \\         //
          ':.     .:'
*/

:root {
	--bg: #f7f5de; /*background-color*/
	--col1: #e2d3ee; /*light purple*/
	--col2: #c4a7dd; /*lightish purple*/
	--col3: #aa7dce; /*normal purple*/
	--col4: #6b3894; /*dark purple*/
	--col5: #f7f5de; /*beige*/
	--col6: #dfd77c; /*yellow*/
	--col7: #fce1d9; /*lightest pink*/
	--col8: #fad1c6; /*light pink*/
	--col9: #f4967c; /*salmony pink*/
	--col10: #bcdcd4; /*lightest green*/
	--col11: #93c8ba; /*light green*/
	--col12: #519e8a; /*green*/
	--col13: #376c5f; /*dark green*/
	--col14: #b1c0e7; /*periwinkle*/
	--col15: #829bd9; /*light blue*/
	--col16: #5375ca; /*blue*/
	--col17: #253c78; /*dark blue*/
	/* color palette: https://coolors.co/aa7dce-f7f5de-fad1c6-519e8a-253c78 */

	background-color: var(--bg);
	background-image: url(/media/images/1gingham%20background.jpg);
	background-attachment: fixed;
	background-size: 80px;
	font-family: Cause;
	color: var(--col4);
}

@font-face {
	font-family: CherryBomb;
	src: url(/media/fonts/CherryBombOne-Regular.woff);
}
@font-face {
	font-family: Cause;
	src: url(/media/fonts/Cause-Regular.woff);
}
@font-face {
	font-family: Cause-bold;
	src: url(media/fonts/Cause-Bold.woff);
}
@font-face {
	font-family: Crewel;
	src: url(/media/fonts/GoodbyeCrewelWorldNF.otf);
}
@font-face {
	font-family: StitchParty;
	src: url(/media/fonts/Stitch%20Party.ttf);
}

/* 
   (       )
   `-.`-'.-'
   ,:--.--:.
  / |  |  | \
   /\  |  /\
   | `.:.' |
   
ʚĭɞೃ𓋼𓍊๑ï𓍊𓋼⋆˚✿˖°𓆣 𖢥⊹₊⟡⋆ general styles ⋆⟡₊⊹𖢥 𓆣°˖✿˚⋆𓋼𓍊ï๑𓍊𓋼ʚĭɞೃ
*/

body {
	margin: 0;
}

button {
	background-color: var(--col2);
	color: var(--col4);
	border-color: var(--col4);
	border-style: dashed;
	width: fit-content;
	height: fit-content;
	border-radius: 5px;
	border-width: 2px;
	padding: 3px 5px;
	font-family: Cause;
	transition:
		background-color 0.5s,
		color 0.5s;
	cursor: pointer;
	margin: 2px;
}

button:hover {
	background-color: var(--col1);
	color: var(--col3);
	border-color: var(--col3);
}

h1,
h2,
h3,
h4 {
	font-family: CherryBomb;
	color: var(--col3);
	padding: 0;
	margin: 0;
}

.default-box {
	background-color: var(--col5);
	border-style: dashed;
	border-color: var(--col3);
	border-radius: 20px;
	margin: 20px auto 10px;
	width: 600px;
	padding: 30px;
}

.default-box-grid {
	background-color: var(--col5);
	border-style: solid;
	border-width: 6px;
	border-color: var(--col4);
	border-radius: 20px;
	padding: 50px;
}

.center {
	justify-content: center;
	text-align: center;
}

.left-align {
	justify-content: flex-start;
	text-align: left;
}

.left-float {
	float: left;
}

.imagebutton {
	width: 88px;
	height: 31px;
	transition: all 0.1s;
}

.imagebutton:hover {
	scale: 110%;
}
.imagebutton:active {
	scale: 100%;
}
.stamp {
	width: 99px;
	height: 56px;
	padding: 3px;
}
.blinkie {
	width: 150px;
	height: 20px;
	padding: 3px;
}

img {
	filter: drop-shadow(1px 2px 2px darkgray);
}

/* style-my-tootltips plugin, tooltip styling */
#s-m-t-tooltip {
	max-width: 300px;
	z-index: 10;
	margin: 24px 14px 7px 12px;
	padding: 8px;
	background: var(--col1);
	border-radius: 6px;
	font-size: 14px;
	color: var(--col4);
}

/* links • . ݁₊ ⊹ . ݁꒰ঌ·✦·໒꒱ ݁ . ⊹ ₊ ݁. • */

a {
	color: var(--col12);
	text-decoration: none;
}
a:visited {
	color: var(--col9);
}
a:hover {
	color: var(--col13);
	text-decoration: none;
}

/*
   (       )
   `-.`-'.-'
   ,:--.--:.
  / |  |  | \
   /\  |  /\
   | `.:.' |
   
ʚĭɞೃ𓋼𓍊๑ï𓍊𓋼⋆˚✿˖°𓆣 𖢥⊹₊⟡⋆  header styles ⋆⟡₊⊹𖢥 𓆣°˖✿˚⋆𓋼𓍊ï๑𓍊𓋼ʚĭɞೃ
*/

header {
	display: flex;
	align-items: center;
}

/*
   (       )
   `-.`-'.-'
   ,:--.--:.
  / |  |  | \
   /\  |  /\
   | `.:.' |
   
ʚĭɞೃ𓋼𓍊๑ï𓍊𓋼⋆˚✿˖°𓆣 𖢥⊹₊⟡⋆  navigation styles ⋆⟡₊⊹𖢥 𓆣°˖✿˚⋆𓋼𓍊ï๑𓍊𓋼ʚĭɞೃ
*/

nav {
	display: flex;
	align-items: center;
	justify-content: center;
}

button.nav-button {
	background-color: var(--col1);
	color: var(--col3);
	border-color: var(--col3);
	font-size: 20px;
	width: 100px;
	padding: 5px;
	margin: 8px;
}

button.nav-button:hover {
	background-color: var(--col2);
	color: var(--col4);
	border-color: var(--col4);
}

/*
   (       )
   `-.`-'.-'
   ,:--.--:.
  / |  |  | \
   /\  |  /\
   | `.:.' |
   
ʚĭɞೃ𓋼𓍊๑ï𓍊𓋼⋆˚✿˖°𓆣 𖢥⊹₊⟡⋆ absolute images ⋆⟡₊⊹𖢥 𓆣°˖✿˚⋆𓋼𓍊ï๑𓍊𓋼ʚĭɞೃ
*/

.hoverimgright {
	transform: rotate(15deg);
	transition: all 0.2s;
}
.hoverimgright:hover {
	transform: rotate(20deg) scale(110%);
}
.hoverimgleft {
	transform: rotate(-15deg);
	transition: all 0.2s;
}
.hoverimgleft:hover {
	transform: rotate(-20deg) scale(110%);
} /*
       ,_    /) (\    _,				hi! if you're seeing this,
        >>  <<,_,>>  <<					you're a nerd!
       //   _0.-.0_   \\				
       \'._/       \_.'/				
        '-.\.--.--./.-'					
        __/ : :Y: : \     				
';,  .-(_| : : | : : |_)-.  ,:'			
  \\/.'  |: : :|: : :|  `.\//
   (/    |: : :|: : :|    \)
         |: : :|: : :;
        /\ : : | : : /\
       (_/'.: :.: :.'\_)
        \\  `""`""`  //
         \\         //
          ':.     .:'
*/

:root {
	--bg: #f7f5de; /*background-color*/
	--col1: #e2d3ee; /*light purple*/
	--col2: #c4a7dd; /*lightish purple*/
	--col3: #aa7dce; /*normal purple*/
	--col4: #6b3894; /*dark purple*/
	--col5: #f7f5de; /*beige*/
	--col6: #dfd77c; /*yellow*/
	--col7: #fce1d9; /*lightest pink*/
	--col8: #fad1c6; /*light pink*/
	--col9: #f4967c; /*salmony pink*/
	--col10: #bcdcd4; /*lightest green*/
	--col11: #93c8ba; /*light green*/
	--col12: #519e8a; /*green*/
	--col13: #376c5f; /*dark green*/
	--col14: #b1c0e7; /*periwinkle*/
	--col15: #829bd9; /*light blue*/
	--col16: #5375ca; /*blue*/
	--col17: #253c78; /*dark blue*/
	/* color palette: https://coolors.co/aa7dce-f7f5de-fad1c6-519e8a-253c78 */

	background-color: var(--bg);
	background-image: url(/media/images/1gingham%20background.jpg);
	background-attachment: fixed;
	background-size: 80px;
	font-family: Cause;
	color: var(--col4);
}

@font-face {
	font-family: CherryBomb;
	src: url(/media/fonts/CherryBombOne-Regular.woff);
}
@font-face {
	font-family: Cause;
	src: url(/media/fonts/Cause-Regular.woff);
}
@font-face {
	font-family: Cause-bold;
	src: url(media/fonts/Cause-Bold.woff);
}
@font-face {
	font-family: Crewel;
	src: url(/media/fonts/GoodbyeCrewelWorldNF.otf);
}
@font-face {
	font-family: StitchParty;
	src: url(/media/fonts/Stitch%20Party.ttf);
}

/* 
   (       )
   `-.`-'.-'
   ,:--.--:.
  / |  |  | \
   /\  |  /\
   | `.:.' |
   
ʚĭɞೃ𓋼𓍊๑ï𓍊𓋼⋆˚✿˖°𓆣 𖢥⊹₊⟡⋆ general styles ⋆⟡₊⊹𖢥 𓆣°˖✿˚⋆𓋼𓍊ï๑𓍊𓋼ʚĭɞೃ
*/

body {
	margin: 0;
}

button {
	background-color: var(--col2);
	color: var(--col4);
	border-color: var(--col4);
	border-style: dashed;
	width: fit-content;
	height: fit-content;
	border-radius: 5px;
	border-width: 2px;
	padding: 3px 5px;
	font-family: Cause;
	transition:
		background-color 0.5s,
		color 0.5s;
	cursor: pointer;
	margin: 2px;
}

button:hover {
	background-color: var(--col1);
	color: var(--col3);
	border-color: var(--col3);
}

h1,
h2,
h3,
h4 {
	font-family: CherryBomb;
	color: var(--col3);
	padding: 0;
	margin: 0;
}

.default-box {
	background-color: var(--col5);
	border-style: dashed;
	border-color: var(--col3);
	border-radius: 20px;
	margin: 20px auto 10px;
	width: 600px;
	padding: 30px;
}

.default-box-grid {
	background-color: var(--col5);
	border-style: solid;
	border-width: 6px;
	border-color: var(--col4);
	border-radius: 20px;
	padding: 50px;
}

.center {
	justify-content: center;
	text-align: center;
}

.left-align {
	justify-content: flex-start;
	text-align: left;
}

.left-float {
	float: left;
}

#toplace {
	position: absolute;
	display: flex;
	width: 100%;
	height: 80px;
	top: 0;
	z-index: -5;
	overflow: clip;
	justify-content: center;
}

#bottomlace {
	position: absolute;
	display: flex;
	width: 100%;
	height: 80px;
	z-index: -5;
	overflow: clip;
	transform: scaleY(-1);
	justify-content: center;
}

.imagebutton {
	width: 88px;
	height: 31px;
	transition: all 0.1s;
	image-rendering: auto;
}

.imagebutton:hover {
	scale: 110%;
}
.imagebutton:active {
	scale: 100%;
}

.unbutton {
	background-color: transparent;
	border: none;
}

.unbutton:hover {
	background-color: transparent;
	border: none;
}

.tooltip {
	position: relative;
}

.tooltiptext {
	font-family: cause;
	font-size: 14px;
	visibility: hidden;
	width: fit-content;
	background-color: var(--col1);
	color: var(--col3);
	border-radius: 6px;
	padding: 5px 10px;
	position: absolute;
	z-index: 1;
	bottom: 100%;
	right: 19%;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
}

.tab {
	margin-left: 40px;
}

/* links • . ݁₊ ⊹ . ݁꒰ঌ·✦·໒꒱ ݁ . ⊹ ₊ ݁. • */

a {
	color: var(--col12);
	text-decoration: none;
}
a:visited {
	color: var(--col9);
}
a:hover {
	color: var(--col13);
	text-decoration: none;
}

/*
   (       )
   `-.`-'.-'
   ,:--.--:.
  / |  |  | \
   /\  |  /\
   | `.:.' |
   
ʚĭɞೃ𓋼𓍊๑ï𓍊𓋼⋆˚✿˖°𓆣 𖢥⊹₊⟡⋆  header styles ⋆⟡₊⊹𖢥 𓆣°˖✿˚⋆𓋼𓍊ï๑𓍊𓋼ʚĭɞೃ
*/

header {
	display: flex;
	align-items: center;
}

/*
   (       )
   `-.`-'.-'
   ,:--.--:.
  / |  |  | \
   /\  |  /\
   | `.:.' |
   
ʚĭɞೃ𓋼𓍊๑ï𓍊𓋼⋆˚✿˖°𓆣 𖢥⊹₊⟡⋆  navigation styles ⋆⟡₊⊹𖢥 𓆣°˖✿˚⋆𓋼𓍊ï๑𓍊𓋼ʚĭɞೃ
*/

nav {
	display: flex;
	align-items: center;
	justify-content: center;
}

button.nav-button {
	background-color: var(--col1);
	color: var(--col3);
	border-color: var(--col3);
	font-size: 20px;
	width: 100px;
	padding: 5px;
	margin: 8px;
}

button.nav-button:hover {
	background-color: var(--col2);
	color: var(--col4);
	border-color: var(--col4);
}

/*
   (       )
   `-.`-'.-'
   ,:--.--:.
  / |  |  | \
   /\  |  /\
   | `.:.' |
   
ʚĭɞೃ𓋼𓍊๑ï𓍊𓋼⋆˚✿˖°𓆣 𖢥⊹₊⟡⋆ absolute images ⋆⟡₊⊹𖢥 𓆣°˖✿˚⋆𓋼𓍊ï๑𓍊𓋼ʚĭɞೃ
*/

.hoverimgright {
	transition: all 0.2s;
}
.hoverimgright:hover {
	transform: rotate(5deg) scale(110%);
}
.hoverimgleft {
	transition: all 0.2s;
}
.hoverimgleft:hover {
	transform: rotate(-5deg) scale(110%);
}
.hoverimg {
	transition: all 0.2s;
}
.hoverimg:hover {
	transform: scale(110%);
}

#toplace {
	position: absolute;
	display: flex;
	width: 100%;
	top: 0;
	z-index: -5;
	overflow: clip;
}

#bottomlace {
	position: absolute;
	display: flex;
	width: 100%;
	/*! bottom: 0; */
	z-index: -5;
	overflow: clip;
	transform: scaleY(-1);
}