body {
 background-color: #EBCABF; /*peach*/
}

.snake {
  position: fixed;
  max-width: 100%;
  height: auto;
  left: 82vw;
  top: 3vw;
  		-webkit-transform: rotate(145deg);
		/* Firefox */
		-moz-transform: rotate(145deg);
		/* IE */
		-ms-transform: rotate(145deg);
		/* Opera */
		-o-transform: rotate(145deg);
}

/*SNAKE HTML
/*<div class="snake">
/*<img src="snake.gif">
/*</div>
*/


header {
  position: relative;
/*  font-family: 'SFNewRepublic';*/
  text-decoration: none;
  color: #576064;
/*  font-size: 4rem;*/
  padding: 10px 10px;
  text-align: left;
}

.gray{
    -webkit-filter: grayscale(1);
}

header a {
  text-decoration: none;
  color: #576064;
  font-size: 3rem;
  text-align: left;
}

header p {
  font-size: 1.2rem;
  color: #4d494c;}

/*TOPMENU NAVIGATION STUFF*/

 /* Add a background color to the top navigation */

 
.topnav {
  position: relative;
  background-color: #AE9797;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  text-align: center;
  color: #f2f2f2;
  padding: 1vw 1vw;
  text-decoration: none;
  font-size: 1.3rem;
  background-color: #AE9797;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #EBCABF;
  color: black;
}


 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
} 

/* CENETERD MAIN CONTENT FOR ALL STUFF*/

  .main {
  margin: auto;
  width: 100%;
	max-width: 800px;
  padding: 20px 20px 20px 20px;
  border-radius: 5px;
  color: black;
  font-family: 'Lora';
  font-size: 1.15em;
  line-height: 1.5em;
}

.magmain {
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 100%;
	max-width: 1200px;
  padding: 20px 20px 20px 20px;
  border-radius: 5px;
}

.magmain p {  color: black;
  font-family: 'Lora';
  font-size: 1.15em;
  line-height: 1.5em;}

  .mainsmall {
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Lora';
  font-size: 1.1em;
  padding: 10px 30px 20px 20px;}
  
/*Start pixelated round borders - not used anymore, but keeping the div name bc whatever*/ 

.pixel-border {
	background: #FBEFEF;
	box-shadow: 15px 15px 15px white, -1em 0 1em white;
	padding: 20px 20px 20px 20px;}

/*ALL IMAGES HAVE ROUNDED BORDERS; PIC IS ONLY USED IN MY ABOUT PAGE I THINK*/

.pic { 
  float: right;
  padding: 10px 10px;
  margin-top: -5%;
  } 


img:hover {
  -webkit-filter: none !important; 
  filter: none !important;
  transition: 0.5s;
}

  @font-face {
    font-family: 'SFNewRepublic';
    src: url(/fonts/SFNewRepublic.ttf);
  }
  
    @font-face {
    font-family: 'lora';
    src: url(/fonts/Lora-Regular.ttf);
  }
  
      @font-face {
    font-family: 'library3am';
    src: url(/fonts/Library3am.otf);
      }

    @font-face {
    font-family: 'DreamGlory';
    src: url(/fonts/DreamGlory.otf);
  }
  
   @font-face {
    font-family: 'StarLitNight';
    src: url(/fonts/StarLitNight.ttf);
  }
    
  @font-face {
  font-family: 'TypeSimple';
  src: url(/fonts/TypeSimple.ttf);
  }
  
  h1{
    font-family: 'SFNewRepublic';
    text-align:center;
    color: #4d494c;
    font-size: 2.5em;
    line-height: normal;
    margin: auto;
  }
  
  h2{
  font-family: 'lora';
  color: #4d494c;
  font-size: 2em;
  padding: 10px 10px ;
  }
  
  
  h3 {
    font-family: 'lora';
    font-weight: normal;
    font-size: 1.5em;
  }
 
 h4 { 
  color: black;
  font-family: 'Lora';
  font-size: 1.1em;
  line-height: 1.5em;  
  text-decoration: none;
  font-weight: normal;
 }
 
  .pg {
  font-family: 'lora';
  color: #4d494c;
  font-size: 2rem;
  padding: 10px 10px ;}


/*OFFSET JUMPLINKS THANK YOU SO MUCH https://www.itsupportguides.com/knowledge-base/tech-tips-tricks/how-to-offset-anchor-tag-link-using-css/*/
:target::before {
  content: "";
  display: block;
  height: 75px;
  margin-top: -75px;
}


hr{
  box-sizing:content-box;
  height:0;
  /*overflow:visible*/
  }

* {
  box-sizing: border-box;
}


.row {
  display: flex;
  height: 100%;
}


/*I am so in love with StackOverflow and SnowMonkey for Multiple Modal Images on a Page! https://stackoverflow.com/questions/47798971/several-modal-images-on-page 

USED FOR MY CINEMAGRAPHS IN /ART

Giant thank you*/

#myImg {
  border-radius: 5px;
  padding: 5px 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {
  opacity: 0.7;
}

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

.center{
  text-align: center;
}

#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

.modal-content,
#caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}


/*NEW NEW ACCORDION DESIGN FOR /ART I LOVE IT KATHERINE KATO WOOOO https://codepen.io/kathykato/pen/MoZJom*/

 .container {
	 margin: 0 auto;
	 padding: 4rem;
	 width: 48rem;
}
 .accordion .accordion-item {
	 border-bottom: 1px solid #e5e5e5;
}
 .accordion .accordion-item button[aria-expanded='true'] {
	 border-bottom: 1px solid #534E6A;
}
 .accordion button {
	 position: relative;
	 display: block;
	 text-align: left;
	 width: 100%;
	 padding: 1em 0;
	 color: #534E6A;
  transition: max-height 0.2s ease-out;
	 font-size: 1.4rem;
	 font-weight: 400;
	 border: none;
	 background: none;
	 outline: none;
}
 .accordion button:hover, .accordion button:focus {
	 cursor: pointer;
	 color: #70759A;
}
 .accordion button:hover::after, .accordion button:focus::after {
	 cursor: pointer;
	 color: #70759A;
	 border: 1px solid #03b5d2;
}
 .accordion button .accordion-title {
	 padding: 1em 1.5em 1em 0;
}
 .accordion button .icon {
	 display: inline-block;
	 position: absolute;
	 top: 18px;
	 right: 0;
	 width: 22px;
	 height: 22px;
	 border: 1px solid;
/*	 border-radius: 22px;*/
}
 .accordion button .icon::before {
	 display: block;
	 position: absolute;
	 content: '';
	 top: 9px;
	 left: 5px;
	 width: 10px;
	 height: 2px;
	 background: currentColor;
}
 .accordion button .icon::after {
	 display: block;
	 position: absolute;
	 content: '';
	 top: 5px;
	 left: 9px;
	 width: 2px;
	 height: 10px;
	 background: currentColor;
}
 .accordion button[aria-expanded='true'] {
	 color: #383c37;
}
 .accordion button[aria-expanded='true'] .icon::after {
	 width: 0;
}
 .accordion button[aria-expanded='true'] + .accordion-content {
	 opacity: 1;
	 max-height: 100em;
	 transition: all 200ms linear;
	 will-change: opacity, max-height;
}
 .accordion .accordion-content {
   text-align: center;
	 opacity: 0;
	 max-height: 0;
	 overflow-y: auto;
	 overflow-wrap: normal;
	 transition: opacity 200ms linear, max-height 200ms linear;
	 will-change: opacity, max-height;
}
 .accordion .accordion-content p {
	 font-size: 1.15rem;
	 font-weight: 300;
	 margin: 2em 0;
}

/*NEW TOOLS PAGE WILL FEATURE SIDE LINKS NOT ACCORDION - LET'S SEE HOW THIS GOES! TY TO BLENDER TABS BY GRABES https://codepen.io/Grabes/pen/GRoGBQ*/

/* Main Tab Styles */

.blenderTabs ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.blenderTabs ul li {
	height: 60px;
	margin: 0;
	padding: 26px 0 0 10px;
	border-bottom: 1px solid #fff;
	display: block;
	overflow: hidden;
	cursor: pointer;
}
.blenderTabs li:after {
    content:"⬡";
    font-size: 30px;
    font-weight: normal;
    line-height: 0;
    float: right;
    padding-right: 10px;
}

.tabContent{
}
.active.tabContent {display: block !important;}
.leading--zero {
	list-style-type: decimal-leading-zero;
}
ol.leading--zero {
    counter-reset: item;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
ol.leading--zero li { 
  display: block; 
  height: 67px;
  line-height: 67px; 
  width: 100%; cursor: pointer;
  overflow: hidden; 
  border-bottom: 1px solid #e7e7e7; }

ol.leading--zero li.active {
  background: #b9c6cf;
  color: #fff;
 }

ol.leading--zero li:after {
    line-height: 67px;
}

/* Custom Layout */
.blenderTabs {font-family:Helvetica, Arial, sans-serif}
.content--inline {display: inline;}
.span_6 { width: 20%; float:left; }
.span_5 { width: 77.333%;float:right; }

/*HUGE GIANT THANK YOU TO STEPHANIE FOR HER NOM NOM GALLERY!!! https://codepen.io/ramenhog/pen/MpORPa THIS IS FOR MY 3D DESIGNS PAGE*/

.section {
  margin-left:13vw;
  display: none;
  padding: 2rem;
  
  @media screen and (min-width: 768px) {
    padding: 4rem;
  }
  
  @supports(display: grid) {
    display: block;
  }
}


.grid {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 150px;
  grid-auto-flow: row dense;
}

.item {
	 position: relative;
	 display: flex;
	 flex-direction: column;
	 justify-content: flex-end;
	 box-sizing: border-box;
   background: rgb(255,255,255, .5);
	 grid-column-start: auto;
	 grid-row-start: auto;
	 box-shadow: -2px 2px 10px 0px rgba(68, 68, 68, 0.4);
	 transition: transform 0.3s ease-in-out;
	 counter-increment: item-counter;
	 overflow: hidden;
	 text-align: center;
}

/* .item:hover {
	 transform: scale(1.05);
}*/
/* .item:hover:after {
	 opacity: 0;
}*/
 .item--medium {
	 grid-row-end: span 2;
}
 .item--large {
	 grid-row-end: span 3;
}

}
 @media screen and (min-width: 768px) {
	 .item--full {
		 grid-column: -1;
		 grid-row-end: span 2;
	}
}
 .item__details {
	 position: relative;
	 z-index: 1;
	 padding: 15px;
	 color: #242222;
	 background: #fff;
	 text-transform: lowercase;
	 letter-spacing: 1px;
	 color: #242222;
	 font-family: "Lora";
}
 .item__details:before {
/*	 content: counter(item-counter);*/
	 font-weight: bold;
	 font-size: 1.1rem;
	 padding-right: 0.5em;
	 color: #242222;
}

 /*I AM TRYING A MAGAZINEY LOOK FROM https://codepen.io/mcraiganthony/pen/NxGxqm THIS IS FOR MY BULLETIN BOARD HOME PAGE*/

@gray-darker:               #444444;
@gray-dark:                 #696969;
@gray:                      #999999;
@gray-light:                #cccccc;
@gray-lighter:              #ececec;
@gray-lightest:             lighten(@gray-lighter,4%);

*,
*::before,
*::after { 
  box-sizing: border-box;
}

img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

.btn {
  background-color: white;
  border: 1px solid @gray-light;
  //border-radius: 1rem;
  color: @gray-dark;
  padding: 0.5rem;
  text-transform: lowercase;
}

.btn--block {
  display: block;
  width: 100%;
  font-size:1.2rem;
}
 
.cards {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cards__item {
  display: flex;
  padding: 1rem;
  @media(min-width: 40rem) {
    width: 50%;
  }
  @media(min-width: 56rem) {
    width: 33.3333%;
  }
}

.card {
  background-color: white;
/*  border-radius: 0.25rem;*/
  box-shadow: 0 20px 40px -14px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  &:hover {
    .card__image {
      filter: contrast(100%);
    }
  }
}

.card__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1rem;
}

.card img {
  width: 100%;
  height: auto;
  overflow: hidden;
  filter: contrast(70%);
  //filter: saturate(180%);  
  position: relative;
  transition: filter 0.5s cubic-bezier(.43,.41,.22,.91);;
  &::before {
/*    content: "";*/
  display: block;
  padding-top: 56.25%; // 16:9 aspect ratio
  }
/*  @media(min-width: 40rem) {
    &::before {
      padding-top: 66.6%; // 3:2 aspect ratio*/
    }
}

.card__image {
  max-height: 10rem;}

.card__title {
  color: @gray-dark;
  font-size: 1.45rem;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.card__text {
  flex: 1 1 auto;
  font-size: 1.1rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

/*DESIGN FOR STATIONARY PAGE OMG FINGERS CROSSED THANK YOU TO MAX KURAPOV https://codepen.io/mkurapov/pen/qNQXxz*/

}
.wrap
{
  margin:50px auto 0 auto;
  width:100%;
  display:flex;
  align-items:space-around;
  max-width:1200px;
}
.tile
{
  width:350px;
  height:410px;
  margin:10px;
  background-color: #AE9797;
  display:inline-block;
  background-size:cover;
  position:relative;
  cursor:pointer;
  transition: all 0.4s ease-out;
  box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.44);
  overflow:hidden;
  color:white;
  font-family:'Lora';
  
}
.tile img
{
  height:100%;
  width:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  transition: all 0.4s ease-out;
}
.tile .text
{
/*   z-index:99; */
  position:absolute;
  padding:20px;
  height:calc(100% - 60px);
  font-family:'Lora';
}
.tile h1
{
 font-family:'Lora';
  font-weight:300;
  margin:0;
  color: white;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
  
}
.tile h2
{
  font-family:'Lora';
  font-weight:100;
  color: white;
  margin:20px 0 0 0;
  transform: translateX(200px);
}
.tile p
{
  color: white;
  font-family:'Lora';
  font-weight:300;
  margin:20px 0 0 0;
  line-height: 25px;
/*   opacity:0; */
  transform: translateX(-200px);
  transition-delay: 0.2s;
}
.animate-text
{
  font-family:'Lora';
  opacity:0;
  transition: all 0.6s ease-in-out;
}
.tile:hover
{
/*   background-color:#99aeff; */
box-shadow: 0px 35px 77px -17px rgba(120, 161, 176,0.9);
  transform:scale(1.05);
}
.tile:hover img
{
  opacity: 0.2;
}
.tile:hover .animate-text
{
  transform:translateX(0);
  opacity:1;
}
.dots
{
  position:absolute;
  bottom:20px;
  right:30px;
  margin: 0 auto;
  width:30px;
  height:30px;
  color:currentColor;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-around;
  
}

.dots span
{
    width: 5px;
    height:5px;
    background-color: currentColor;
    border-radius: 50%;
    display:block;
  opacity:0;
  transition: transform 0.4s ease-out, opacity 0.5s ease;
  transform: translateY(30px);
 
}

.tile:hover span
{
  opacity:1;
  transform:translateY(0px);
}

.dots span:nth-child(1)
{
   transition-delay: 0.05s;
}
.dots span:nth-child(2)
{
   transition-delay: 0.1s;
}
.dots span:nth-child(3)
{
   transition-delay: 0.15s;
}


@media (max-width: 1000px) {
  .wrap {
   flex-direction: column;
    width:400px;
  }
}

/*LET'S SEE IF I CAN EMBED NOTION'S WEB BOOKMARKS BC I LOVE THEM*/


a,
a.visited {
	color: inherit;
	text-decoration: underline;
}

.pdf-relative-link-path {
	font-size: 80%;
	color: #444;
}

.source {
	/*border: 1px solid #576064;*/
	border-radius: 3px;
	padding: 1.5em;
	word-break: break-all;
}

.callout {
	border-radius: 3px;
	padding: 1rem;
}

figure {
	margin: 1.25em 0;
	page-break-inside: avoid;
}

figcaption {
	opacity: 0.9;
	font-size: 95%;
	margin-top: 0.5em;
}

mark {
	background-color: transparent;
}

.indented {
	padding-left: 1.5em;
}

hr {
	background: transparent;
	display: block;
	width: 100%;
	height: 1px;
	visibility: visible;
	border: none;
	border-bottom: 1px solid rgba(55, 53, 47, 0.09);
}

img {
	max-width: 100%;
}

@media only print {
	img {
		max-height: 100vh;
		object-fit: contain;
	}
}

@page {
	margin: 1in;
}

.collection-content {
	font-size: 0.875rem;
}

.column-list {
	display: flex;
	justify-content: space-between;
}

.column {
	padding: 0 1em;
}

.column:first-child {
	padding-left: 0;
}

.column:last-child {
	padding-right: 0;
}

.table_of_contents-item {
	display: block;
	font-size: 0.875rem;
	line-height: 1.3;
	padding: 0.125rem;
}

.table_of_contents-indent-1 {
	margin-left: 1.5rem;
}

.table_of_contents-indent-2 {
	margin-left: 3rem;
}

.table_of_contents-indent-3 {
	margin-left: 4.5rem;
}

.table_of_contents-link {
	text-decoration: none;
	opacity: 0.7;
	border-bottom: 1px solid rgba(55, 53, 47, 0.18);
}

table,
th,
td {
	border: 1px solid rgba(55, 53, 47, 0.09);
	border-collapse: collapse;
}

table {
	border-left: none;
	border-right: none;
}

th,
td {
	font-weight: normal;
	padding: 0.25em 0.5em;
	line-height: 1.5;
	min-height: 1.5em;
	text-align: left;
}

th {
	color: rgba(55, 53, 47, 0.8);
}

ol,
ul {
	margin: 0;
	margin-block-start: 0.6em;
	margin-block-end: 0.6em;
}

li > ol:first-child,
li > ul:first-child {
	margin-block-start: 0.6em;
}

ul > li {
	list-style: disc;
}

ul.to-do-list {
	padding-inline-start: 0;
}

ul.to-do-list > li {
	list-style: none;
}

.to-do-children-checked {
	text-decoration: line-through;
	opacity: 0.375;
}

ul.toggle > li {
	list-style: none;
}

ul {
	padding-inline-start: 1.7em;
}

ul > li {
	padding-left: 0.1em;
}

ol {
	padding-inline-start: 1.6em;
}

ol > li {
	padding-left: 0.2em;
}

.mono ol {
	padding-inline-start: 2em;
}

.mono ol > li {
	text-indent: -0.4em;
}

.toggle {
	padding-inline-start: 0em;
	list-style-type: none;
}

/* Indent toggle children */
.toggle > li > details {
	padding-left: 1.7em;
}

.toggle > li > details > summary {
	margin-left: -1.1em;
}

.selected-value {
	display: inline-block;
	padding: 0 0.5em;
	background: rgba(206, 205, 202, 0.5);
	border-radius: 3px;
	margin-right: 0.5em;
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	white-space: nowrap;
}

.collection-title {
	display: inline-block;
	margin-right: 1em;
}

.page-description {
    margin-bottom: 2em;
}

.simple-table {
	margin-top: 1em;
	font-size: 0.875rem;
	empty-cells: show;
}
.simple-table td {
	height: 29px;
	min-width: 120px;
}

.simple-table th {
	height: 29px;
	min-width: 120px;
}

.simple-table-header-color {
	background: rgb(247, 246, 243);
	color: black;
}
.simple-table-header {
	font-weight: 500;
}

time {
	opacity: 0.5;
}

.icon {
	display: inline-block;
	max-width: 1.2em;
	max-height: 1.2em;
	text-decoration: none;
	vertical-align: text-bottom;
	margin-right: 0.5em;
}

img.icon {
	border-radius: 3px;
}

.user-icon {
	width: 1.5em;
	height: 1.5em;
	border-radius: 100%;
	margin-right: 0.5rem;
}

.user-icon-inner {
	font-size: 0.8em;
}

.text-icon {
	border: 1px solid #000;
	text-align: center;
}

.page-cover-image {
	display: block;
	object-fit: cover;
	width: 100%;
	max-height: 30vh;
}

.page-header-icon {
	font-size: 3rem;
	margin-bottom: 1rem;
}

.page-header-icon-with-cover {
	margin-top: -0.72em;
	margin-left: 0.07em;
}

.page-header-icon img {
	border-radius: 3px;
}

.link-to-page {
	margin: 1em 0;
	padding: 0;
	border: none;
	font-weight: 500;
}

p > .user {
	opacity: 0.5;
}

td > .user,
td > time {
	white-space: nowrap;
}

input[type="checkbox"] {
	transform: scale(1.5);
	margin-right: 0.6em;
	vertical-align: middle;
}

p {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.image {
	border: none;
	margin: 1.5em 0;
	padding: 0;
	border-radius: 0;
	text-align: center;
}

.code,
code {
	background: rgba(135, 131, 120, 0.15);
	border-radius: 3px;
	padding: 0.2em 0.4em;
	border-radius: 3px;
	font-size: 85%;
	tab-size: 2;
}

code {
	color: #eb5757;
}

.code {
	padding: 1.5em 1em;
}

.code-wrap {
	white-space: pre-wrap;
	word-break: break-all;
}

.code > code {
	background: none;
	padding: 0;
	font-size: 100%;
	color: inherit;
}

blockquote {
	font-size: 1.25em;
	margin: 1em 0;
	padding-left: 1em;
/*	border-left: 3px solid #576064;*/
}

.bookmark {
	text-decoration: none;
	max-height: 11em;
	padding: 0;
	display: flex;
	width: 55rem;
	align-items: stretch;
	background-color: #E5DCDF;
}

.bookmark-title {
	font-size: 1.3em;
/*	overflow: hidden;*/
	text-overflow: ellipsis;
	height: 2.4em;
/*	white-space: nowrap;*/
}

.bookmark-text {
	display: flex;
	flex-direction: column;
  overflow-wrap: normal;
}

.bookmark-info {
	flex: 4 1 180px;
	padding: 12px 14px 14px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.bookmark-image {
	width: 33%;
	flex: 1 1 180px;
	display: block;
	position: relative;
	object-fit: cover;
	border-radius: 1px;
}

.bookmark-description {
	color: #576064;
	font-size: 1em;
	overflow: hidden;
	max-height: 4.5em;
	word-break: break-word;
}

.bookmark-href {
	font-size: 0.75em;
	margin-top: 0.25em;
}

.checkbox {
	display: inline-flex;
	vertical-align: text-bottom;
	width: 16;
	height: 16;
	background-size: 16px;
	margin-left: 2px;
	margin-right: 5px;
}

.checkbox-on {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%2358A9D7%22%2F%3E%0A%3Cpath%20d%3D%22M6.71429%2012.2852L14%204.9995L12.7143%203.71436L6.71429%209.71378L3.28571%206.2831L2%207.57092L6.71429%2012.2852Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E");
}

.checkbox-off {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20x%3D%220.75%22%20y%3D%220.75%22%20width%3D%2214.5%22%20height%3D%2214.5%22%20fill%3D%22white%22%20stroke%3D%22%2336352F%22%20stroke-width%3D%221.5%22%2F%3E%0A%3C%2Fsvg%3E");
}

/*FILTERS AND ITEM TAGS FOR CAULDRON! WOOHOO THANK YOU TO A PEN BY KYLA https://codepen.io/kvana/pen/LLJmZb */

.item{
  width: 100%;
  float:right; 
  /*display:inline-block;*/
  background:transparent;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

#show_all, #show_library, #show_apoth, #show_vibes, #show_halloween, #show_yule  {
  background-color: transparent;
  color: black;
  font-family: 'Lora';
  font-size: 1.1em;
  line-height: 1.5em;  
  text-decoration: none;
  font-weight: normal;
  border: none;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  width: 100%;
}