/** COMMENTING SYSTEM **/

strong {
  font-weight: 600;
}

111111111111111article {
  width: 90%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.125rem;
  padding: 2rem;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 15px 20px -10px rgba(0, 0, 0, 0.1);
}
1111111111111111111article > * + * {
  margin-top: 1em;
}
1111111111111111article:is(h1, h2, h3) + * {
  margin-top: 0.5em;
}
111111111111111article h1 {
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.125;
}
111111111111111article code {
  background-color: #eee;
  font-weight: 600;
  font-family: monospace;
}
111111111111111article ol {
  counter-reset: sickstuff;
}
111111111111111111article ol li {
  position: relative;
  padding-left: 32px;
  counter-increment: sickstuff;
}
1111111111111article ol li + li {
  margin-top: 0.5em;
}
11111111111111111article ol li:before {
  content: counter(sickstuff);
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
  top: calc((1.125rem * 1.5) - 24px);
  font-size: 0.75em;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #185adb;
  color: #fff;
  font-weight: 600;
}

details { 
  position: fixed;
  right: 1rem;  
  bottom: 1rem; BOTTOM: 0.1REM; bottom: 4.7rem;
  margin-top: 2rem;
  11111111111111111color: #6b7280; color: #FFFFFF;
  display: flex;
  flex-direction: column; z-index: 10 !important; 
}
details div {
  background-color: #1e1e27;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
  padding: 1.25rem;
  border-radius: 8px;
  position: absolute;
  max-height: calc(100vh - 100px);
  width: 400px;
  max-width: calc(100vw - 2rem);
  bottom: calc(100% + 1rem);
  right: 0;
  overflow: auto;
  transform-origin: 100% 100%;
  1111111111111color: #95a3b9; color: #FFFFFF !important;
}
details div::-webkit-scrollbar {
  width: 15px;
  background-color: #1e1e27;
}
details div::-webkit-scrollbar-thumb {
  width: 5px;
  border-radius: 99em;
  background-color: #95a3b9;
  border: 5px solid #1e1e27;
}
details div > * + * {
  margin-top: 0.75em;
}
details div p > code {
  font-size: 1rem; 11111111111111FONT-WEIGHT: 900;
  font-family: monospace; 
}
details div pre {/**WELCOME NOTE**/
	FONT-WEIGHT: 600;
  white-space: pre-line;
  border: 1px solid #95a3b9;
  border-radius: 6px;
  font-family: monospace;
  padding: 0.75em;
  font-size: 0.875rem; 
  color: #fff;
	}

details[open] div {
  -webkit-animation: scale 0.25s ease;
          animation: scale 0.25s ease;
}

summary {
	font-family: "Alegreya Sans SC", sans-serif; /**IMPORTANT**/  
  display: inline-flex;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  align-items: center;
  font-weight: 600; font-weight: 900 !important;
  11padding: 0.75em 3em 0.75em 1.25em;  padding: 0.70em 3em 0.70em 1.25em;
  border-radius: 99em;
  color: #fff;
  background-color: #185adb;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  list-style: none;
  text-align: center;
  cursor: pointer;
  transition: 0.15s ease;
  position: relative;
	}



summary:hover {  
  	11border: 2px solid transparent;
  	background: linear-gradient(#000, #000) padding-box, radial-gradient(farthest-corner at var(--x) var(--y), #00C9A7, #845EC2) border-box;
	}


/** BORDER TRANSITION ON PAGE LOAD**/
summary {
	position: relative;
	background: linear-gradient(0deg, #000, #272727);
	}

summary:before, summary:after {
	content: '';
	position: absolute;
	left: -2px;
	top: -2px;
	background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, 
		#0000ff, #00ff00,#ffff00, #ff0000);
	background-size: 400%;
	width: calc(100% + 4px);  
	height: calc(100% + 4px); 
	z-index: -1; 
	animation: steam 20s linear infinite; animation: steam 20s linear;  animation: steam 1s linear ;   animation: steam 2s linear; 
	border-radius: 27px;
	}

@keyframes steam {
	0% {
		background-position: 0 0;
	}
	50% {
		background-position: 400% 0;
	}
	100% {
		background-position: 0 0;
	}
}

summary:after {
	filter: blur(50px);
}
/**END OF BORDER TRANSITION ON PAGE LOAD**/






summary::-webkit-details-marker {
  display: none;
}
summary:hover, summary:focus {
  background-color: #1348af;
}
summary svg {
  position: absolute;
  right: 1.25em; right: 0.1em;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5em; width: 2.8em;
  height: 1.5em; height: 2.8em;
}

@-webkit-keyframes scale {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes scale {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.comment-system { 
	color: #FFFFFF;  
	7878width: 50vw; 
  	box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.75); 
	}





/* SMALLER TABLET screens */   /* SMALLER TABLET */
@media screen and (max-width: 480px) {
  	.comment-system {  
		width: 98vw;  width: 100vw;
		11margin-right: 10px;    
  		}
	}





@media only screen and (min-width : 320px) and (max-width : 480px) {/* Mobile portrait */
  	.comment-system {  
		width: 87vw; width: 100vw;
		111margin-right: 10px;  
  		}
	}





@media only screen and (min-width : 480px) and (max-width : 595px) {/* Mobile landscape */
  	.comment-system {  
		width: 87vw; width: 100vw;
		11margin-right: 10px;  
  		}
	}





@media only screen and (min-width : 595px) and (max-width : 690px) {/* Small tablet portrait */
  	.comment-system {  
		width: 87vw; width: 100vw; 
		11margin-right: 30px;    
  		}
	}





@media only screen and (min-width : 690px) and (max-width : 769px) {/* Tablet portrait */
  	.comment-system {  
		width: 85vw;  width: 100vw;  
		111margin-right: 30px;   
  		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture) --- SMALLER TABLET */
@media only screen and (min-width : 769px) and (max-width : 800px) {/* Small tablet landscape */
	.comment-system {  
		width: 80vw; width: 100vw; 
		111margin-right: 30px; 
  		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture --- SMALLER TABLET */
@media only screen and (min-width : 800px) and (max-width : 1024px) {/* Small tablet landscape */
  	.comment-system {  
		width: 80vw;   
		111margin-right: 30px;    
  		}
	}





@media only screen and (min-width : 1024px) and (max-width : 1224px) {/* Tablet landscape */
  	.comment-system {  
		width: 70vw;  
		111margin-right: 30px;  
  		}
	}






/* Desktops and laptops */  /* SMALL DESKTOP */
@media only screen 
and (min-width : 1224px) {
  	.comment-system { 
		width: 43vw;  width: 50vw;
		111margin-right: 30px;  
		} 
	}







/*****************************************/
.comment-system {
	 height: 85vh !important;
	}

#header-commenting-zone {
	padding-left: 55px;
	}

#join-the-conversation {
	padding-left: 55px;
	}
/*****************************************/





#commenting-zone {
	color: #FFFFFF !important;
	}

#header-commenting-zone {
	color: #FFFFFF !important;
	font-size: 20px;
	font-family: 'Work Sans', sans-serif !important;
	font-weight: 900 !important;
	}

object:focus {
  	outline: none;
	}
/** END OF COMMENTING SYSTEM **/