Custom Code CSS - Backup

 ``
 /* AESTHETIC THEME CUSTOMIZATION */


/* PLACED IN MAIN.CSS */
* {
   cursor: crosshair;
} /*cursor, duh*/



::selection, mark {
  background: #D3B89A;
} /* colour of highlights, mark tag */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); /* import fonts */



body {
background: #E8CEB1;
font-family: 'Work Sans', sans-serif;
border-color: #DAC0A4;
} /* set body font */

h1, h2, h3, h4, h5, h6 {
	font-family: 'Syne', sans-serif;
    font-weight: 700;
} /* set heading font */

.listing__desc {
	color: rgba(35,35,36,.7);
} /* subtitle? */

a.logo {
	color: #232324;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
} /* set color and font of header logo */

.header {
    background: #E8CEB1;
    border-color: #DAC0A4;
    z-index: 9180;
} /* change bkg colour and border of header, bring header above Able Player */

.sidebar, .post__nav {
    border-color: #DAC0A4;
} /* change border color of the sidebar menu and post line */

.navbar_mobile_sidebar__overlay .navbar_mobile_sidebar {
    z-index: 10020;
} /* bring menu above header nav bar */

.navbar_mobile_sidebar {
	background: #E8CEB1;
    z-index: 10021;
} /* bkg color of menu in mobile view, bring above header nav bar */

[type="email"], [type="number"], [type="search"], [type="tel"], [type="text"], [type="url"], select, textarea {
	background-color: #e8ceb1;
    border-color: #DAC0A4;
} /*search bar + forms customization*/

[type=text]:focus, [type=url]:focus, [type=tel]:focus, [type=number]:focus, [type=email]:focus, [type=search]:focus, textarea:focus, select:focus {
  border-color: #a18e79;
} /*search bar + forms customization, focus*/

.course-title {
    font-weight: bold;
} /*makes course title menu item bold*/

.comments ">> h3 {
	border-color: #232324;
} /*line above comment section*/

.footer {
    background: #232324;
    color: #E8CEB1;
    border-color: #DAC0A4;
} /*footer bkg + border colour*/

a:hover.footer__logo, .footer__logo {
    color: #E8CEB1;
} /*makes footer logo one colour*/

.footer__social path {
    fill: #e8ceb1;
} /*makes footer social icons all beige*/

/*scroll bars*/
/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #A18E79 #D9C1A5;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
  background: #D9C1A5;
}

*::-webkit-scrollbar-thumb {
  background-color: #A18E79;
  border-radius: 20px;
  border: 3px solid #D9C1A5;
}

/* FOOTER FIX ATTEMPT
.footer__nav li {
	margin: 0 0 0 0;
}

ol ol, ol ul, ul ol, ul ul {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-right: 2rem;
}
*/


@media (max-width: 56.187em) {
	.sidebar__menu {
		background: #D9C1A5;
	}
} /*change colour of sidebar menu when in mobile view*/

/* HORIZONTAL PAGE SCROLL PROGRESS BAR */

#scrollbar {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 0%;
  height: 5px;
  z-index: 9999;
}

#scrollbar-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #232324;
}

*/

/*ACCORDION BOX FOR TRANSCRIPT*/

.wrap-collabsible input[type='checkbox'] {
  display: none;
}

.wrap-collabsible {
  margin: 1.2rem 0;
}

.lbl-toggle {
  display       : block;
  text-align    : center;
  padding       : 1rem;
  /*background    : #A18E79;*/
  cursor        : pointer;
  border-radius : 7px;
  transition    : all 0.25s ease-out;
  margin: 0;
}

.lbl-toggle:hover {
  color: #A18E79;
}

.lbl-toggle::before {
  content       : ' ';
  display       : inline-block;
  border-top    : 5px solid transparent;
  border-bottom : 5px solid transparent;
  border-left   : 5px solid currentColor;
  vertical-align: middle;
  margin-right  : .7rem;
  transform     : translateY(-2px);
  transition    : transform .2s ease-out;
}

.toggle:checked+.lbl-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}

.collapsible-content {
  max-height: 0px;
  overflow  : hidden;
  transition: max-height .25s ease-in-out;
}

.toggle:checked+.lbl-toggle+.collapsible-content {
  max-height: 435px;
}

.toggle:checked+.lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius : 0;
}

.collapsible-content .content-inner {
  /*background                : rgba(0, 105, 255, .2);
  border-bottom             : 1px solid rgba(0, 105, 255, .45);
  border-bottom-left-radius : 7px;
  border-bottom-right-radius: 7px;*/
  padding                   : .5rem 1rem;
}

.collapsible-content p {
  margin-bottom: 0;
}

input[type="checkbox"] + label::before, input[type="radio"] + label::before {
	background-color: #fff0;
	border: 0px solid #d6d8d9;
}


/* ABLE PLAYER */
.collapsible-content .content-inner input[type="checkbox"], input[type="radio"] {
	display: inline;
    opacity: 1;
	position: inherit;
} /*add back the checkbox*/
``