body,
  html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  
  body {
    color: #000000;
    background: rgb(241, 255, 246);
    font-size: 12px;
  }
  main {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  
  html {
  scroll-behavior: smooth;
}
  
  
p{
  font-family:sans-serif; 
}
  
div {
  display: block;
  unicode-bidi: isolate;
}

pre.banner{
 font-family: monospace;
 justify-content: center;
 align-items: center;
  }

p.quote{
padding-left: 5vw;
padding-right: 14vw;
}


div.col {
  position: absolute;
  top: 5px;
  bottom: 0;
  overflow: hidden;
  overflow-y: scroll;
  padding: 12px 8px;
}



.highlight{
background-color: rgba(0, 255, 255, 0.279);
}

::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}




#receptiontwo {
  left: 0px;
  z-index: 1024;
  background: #00ff0000;
  color: #000000;
  width: 14vw;
  font-family:sans-serif;

  

}

#center {
  left: 14vw;
  z-index: 1024;
  background: #ff68be00;
  color: #000000;
  width: 66vw;
  padding-left: 50px;
  padding-right: 50px;
  font-family:sans-serif;
}



#left {
  left: 1px;
  z-index: 1025;
  display: none;

}

.highlight{
  background-color: rgba(0, 255, 255, 0.279);

}

.left {
  left: 1px;
  z-index: 1025;
  display: none;
}


  img {
    display: block;
width: 20vw;
height: auto;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}




.counter{

  font-size: 14px;
  font-family: 'Times New Roman', Times, serif;
  font-weight: 400;
  }



span.serif{

  font-size: 14px;
  font-family: 'Times New Roman', Times, serif;
  font-weight: 400;
  }

p.skew{
  padding-top: 50px;
  transform: skew(0deg, 5deg);
  }

span.name{
  font-family: 'Times New Roman', Times, serif;
  }
  
a{
text-decoration: underline;
color:black ;  }

a:hover{
  background: #000000; color: rgb(241, 255, 246); }

  summary:hover{    cursor: pointer;
  }


em.date{
  font-family: monospace;
  font-size: 10.5px;
  }

em.book{
  font-family: 'Times New Roman', Times, serif;
  -webkit-transform:scale(2,1); /* Safari and Chrome */
  -moz-transform:scale(2,1); /* Firefox */
  -ms-transform:scale(2,1); /* IE 9 */
  -o-transform:scale(2,1); /* Opera */
  transform:scale(2,1); /* W3C */
  }



button {
  display: block;
  background: rgba(0, 253, 89, 0);
  border: none;
  color: rgb(0, 0, 0);
  padding: 0px 0px;
  text-align: center;
  text-decoration: underline;
  display: inline-block;
  font-size: 12px;
  cursor: pointer;

}


button:hover{
  background: #000000; color: white; }

.collapse{
    padding-left: 0px;
  
  }


  .container {
    display: flex;
  }
  
  .container div {
    padding: 10px;
    font-size: 24px;
  }


  ::-webkit-scrollbar {
    width: 0px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-track {
  background: #f1f1f100;
}






    
.sidenote,
.marginnote {
    float: right;
    clear: right;
    width: 50%;
    margin-top: 0.3rem;
    margin-bottom: 0;
    font-size: 0.8em;
        line-height: 1.3;
right:10px;
z-index: 100;
padding-left: 60px;
z-index: 100;
}
 

label.sidenote-number {
    display: inline;
}
 


 

label.margin-toggle:not(.sidenote-number) {
    display: none;
}



::selection {
  color: rgb(241, 255, 246);
  background: black;
}














.filters {
	display: flex;
	flex-direction: column;
}

input:checked + span {
	text-decoration: underline;
}

.items {
	all: unset;
	display:block;

}

.items li {
	aspect-ratio: 1/1;
	border: 2px solid white;
	display: block;
	justify-content: center;
	align-items: center;
}

.filters:has(input[value=all]:checked) + .items li {
	display: flex;
}

.filters:has(input[value=branding]:checked) + .items li:not([data-tags*=branding]),
.filters:has(input[value=motion]:checked) + .items li:not([data-tags*=motion]),
.filters:has(input[value=webdesign]:checked) + .items li:not([data-tags*=webdesign]) {
	display: none;
}



.svg{
	padding-top: 10px;
}