@import url(https://fonts.bunny.net/css?family=atkinson-hyperlegible:400|roboto-mono:100,400,700);
html, body{
	padding: 0;
	margin: 0;
	height: 100%;
	font-size: 1.1em;
}

body {
	color: #cdd6f4;
	background-color: #1e1e2e;
	font-family: 'Atkinson Hyperlegible', 'Roboto Mono', Arial, sans-serif;

}

a {
	color: #f5c2e7;
}
a:hover {
	color:  #f38ba8;
}
.page {
	display: flex;
	width: 65%;
	margin: 0 auto;
	align-items: start;
	padding-top: 3em;
}
.page .content{
	flex-grow: 7;
	padding: 0.25em;
	max-width: 70%;
	min-width: 68%;
}
.page .sidebar {
	flex-grow: 3;
	min-width: 27%; /* this is highly cursed */
	max-width: 40%;

}
.container {
	border-color: #f5c2e7;
	border-width: 2px;
	border-style: solid;
	margin: 1em;
	background-color: #1e1e2e;
	padding: 0.6em;
}
/* time to fix these cursed media queries */
@media only screen and (min-width: 0px) and (max-width: 600px){
	.page {
		width: 100%;
		margin-top: 0;
		flex-direction: column-reverse;
		
	}
	.container {
		margin: 0.5em;
	}
	.sidebar {
		min-width: 95% !important;
		/*max-width: 100% !important;*/
		width: 100% !important;
		
	}
	.content {
		min-width: 95% !important;
		width: 100% !important;
	}
}
@media only screen and (min-width: 600px) and (max-width: 1000px){
	.page {
		margin-top: 0;
		width: 85%;
	}
}

.page .sidebar header{
	text-align: right;
}

  canvas {
	display: block;
	vertical-align: bottom;
  }
  
  
  #particles-js {
	z-index: -1;
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #1e1e2e;
	background-image: url("");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
  }

  .content hr:last-of-type {
	display:none;
  }
  .socials {
	background-color: #fff;
	display: inline-block;
	padding:5px;
	padding-bottom: 0px;
	border: 2px solid #f5c2e7;
	margin-bottom: 1em;
  }
  #animal_img {
	width: 100%;
	height: auto;
  }
  #gif_buttons {
	image-rendering: pixelated;
  }

  .breakword {
	word-wrap: break-word;
  }

  #analytics-iframe {
	border: unset;
	width: 100%;
	height: 30vh;
  }

  .qr {
	width: 20%;
	height: auto;
  }
  #kofiframe {
	overflow: hidden;
  }
  html.is-changing {
	view-transition-name: main;
  }
  
  ::view-transition-old(main) {
	animation: fade 0.5s ease-in-out both;
  }
  
  ::view-transition-new(main) {
	animation: fade 0.5s ease-in-out both reverse;
  }
  
  @keyframes fade {
	from { opacity: 1; }
	to { opacity: 0; }
  }
  
  html.is-changing:not(.swup-native)  {
	transition: 0.25s opacity;
	opacity: 1;
  }
  
  html.is-animating:not(.swup-native)  {
	opacity: 0;
  }