/* If you're using a custom font, you'll want to set it up in the CSS like this, replacing the font name and source file with the name and source file of the font you're using: @font-face{font-family:OpenDyslexic;src:url(/fonts/OpenDyslexic-Regular.otf);} */
/* The name you use for font-family is what you'll put into the value attribute of the option you add in the font selector for this */
.ff-container {
display:inline-flex;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: #d78a96 #fff;
}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 10px;
}
*::-webkit-scrollbar-track {
  background: #fff;
}
*::-webkit-scrollbar-thumb {
  background-color: #d78a96;
}
/* To avoid a horizontal scrollbar from appearing due to the cursor sparkles */
html, body {
  overflow-x: hidden;
  overflow-y: overlay;
}


/*bg */
body {
  background: url('/images/style/carpet2.png');
  background-attachment:fixed;
  line-height: 133%;
  font-size: 1em;
  font-family: "Open Sans", "Droid Sans", Calibri, sans-serif;
}

img, svg {
  vertical-align: inherit;
}

code {
  background-color: black;
  font-family: courier, monospace;
  border-radius: 3px;
  color:#000;
  padding: 2px;
}

pre {
  background-color: black;
  display: block;
  border-radius: 6px;
  font-family: Courier, monospace;
  white-space: pre-wrap;
  margin: 1em 0;
  padding: 10px;
  color:#000;
}

kbd {
  border-radius: 3px;
  background-color: black;
  font-family: Courier, monospace;
  padding: 2px;
  border: 1px solid #aaa;
  color:#000;
}

blockquote {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 2.5%;
  padding-left: 15px;
  border-left: 3px solid #825561;
}

/* -------------------------------------------------------- */
/*fonts */
/* -------------------------------------------------------- */
@font-face {
  font-family: 'TooMuchInk';
    src: url('fonts/TooMuchInk.eot');
    src: url('fonts/TooMuchInk.eot') format('embedded-opentype'),
    url('fonts/TooMuchInk.woff2') format('woff2'),
    url('fonts/TooMuchInk.woff') format('woff'),
    url('fonts/TooMuchInk.ttf') format('truetype'),
    url('fonts/TooMuchInk.svg#TooMuchInk') format('svg');
}

@font-face {
  font-family: 'Shantell_Sans';
    src: url('fonts/Shantell_Sans-Bouncy_Regular.woff2') format('woff2');
}

h1   {
  color: rgb(236,73,41); 
  letter-spacing: 3px;
  text-shadow: 0px 0px 10px rgb(236,73,41);
  display: block;
  font-size: 1.17em;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  unicode-bidi: isolate;
}

h2   {
  color: rgb(236,73,41); 
  text-shadow: 0px 0px 10px rgb(236,73,41);
  font-size: 1.17em;
}

body {
  color: #dcc9a9;
  letter-spacing: 3px;
  font-family: TooMuchInk;
}

a:link {
  color: rgb(236,73,41);
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: rgb(236,73,41);
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: skyblue;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}

/* -------------------------------------------------------- */
/*for the gallery page /
/* -------------------------------------------------------- */
#gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#gallery img {
  margin: 3px;
  max-width: 300px;
  max-height: 300px;
  height: max-content;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/* -------------------------------------------------------- */
/* NAVIGATION */
/* -------------------------------------------------------- */
nav {
  margin-bottom: 3em;
}

nav .sidebar-title {
  margin-bottom: 0.5em;
}

nav ul {
  margin: 0 -5px;
  padding: 0;
  list-style: none;
  user-select: none;
}

nav ul li {
  margin-bottom: 0;
}
nav > ul li > a,
nav > ul li > strong {
  display: inline-block;
}
nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
  padding: 5px 10px;
}
nav > ul li > a.active,
nav > ul li > details.active summary {
  font-weight: bold;
}
nav ul summary {
  cursor: pointer;
}
nav ul ul li > a {
  padding-left: 30px;
}
.container {
  display: grid;
  align-items: center; 
  grid-template-columns: 1fr 1fr;
  column-gap: 5px;
}
.imgab {
  float: left;
}
.text {
  padding-left: 20px;
  padding-top: 20%;
  float: left;
}

/* -------------------------------------------------------- */
/* Preloader (https://nenrikido.neocities.org/blog/post/making-a-preloader/)*/
/* -------------------------------------------------------- */
#preloader {
  background: black
  url("https://samherbert.net/svg-loaders/svg-loaders/spinning-circles.svg")
  no-repeat center;
  align-items: center;
  justify-content: center;
  width: 100%;
  display: flex;
  position: fixed;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 9999;
}

img {
  overflow-clip-margin: content-box;
  overflow: clip;
}

/* -------------------------------------------------------- */
/* btn links (*/
/* -------------------------------------------------------- */
.bcontainer {
  margin-top: 20px;
  margin-bottom: 20px;
  overflow: hidden;
}

.filterDiv {
  float: left;
  width: 88px;
  height: 31px;
  color: #ffffff;
  text-align: center;
  padding: 30px 15px;
  margin: 1px;
  display: none;
/* Hidden by default */
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #FAA18F;
  cursor: pointer;
  color: #F87C63;
}

/* Add a light grey background on mouse-over */
.btn:hover {
  background-color: #e38e7d;
  color: rgb(117,1,1);
}

/* Add a dark background to the active button */
.btn.active {
  background-color: #F87C63;
  color: white;
}

textarea {
  background: var(--white);
    color: rgb(236,73,41);
    font-size: .7em;
    word-wrap: break-word;
    word-break: break-all;
    padding: 5px;
    font-family: monospace;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    appearance: auto;
    -webkit-rtl-ordering: logical;
    resize: -internal-textarea-auto;
    cursor: text;
    overflow-wrap: break-word;
    background-color: field;
    column-count: initial !important;
    margin: 0em 0em 0em 0em;
    border-width: 1px;
    border-style: solid;
    border-color: light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-image: initial;
    padding: 2px;
    white-space: pre-wrap;
}

/* -------------------------------------------------------- */