/* how to use this in other files */
/* put <link rel="stylesheet" href="https://app.mcbcode.com/theme/site.css"> into the <head> of the html file */

/* scrollbar */

    html {
  scrollbar-width: thin; /* firefox */
  scrollbar-color: #05ee93 #0c0c0c; /* thumb track */
  background-color: #0c0c0c;
}

/* For Chrome, Edge, and Safari */
html::-webkit-scrollbar {
  width: 10px; /* Width of the vertical bar */
  height: 10px; /* Height of the horizontal bar */
}

html::-webkit-scrollbar-track {
  background: #121212; /* Light gray background */
}

html::-webkit-scrollbar-thumb {
  background-color: #232323; /* Medium gray handle */
  border-radius: 5px; /* Rounds the corners */
  border: 2px solid #232323; /* Padding effect around the handle */
}

html::-webkit-scrollbar-thumb:hover {
  background-color: #05ee93; /* Darker gray when hovered */
}


/* mcfont */
    @font-face {
      font-family: 'mcfont';
      src: url('https://app.mcbcode.com/theme/font/mcfont.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }

    /* mcfontb */
    @font-face {
      font-family: 'mcfontb';
      src: url('https://app.mcbcode.com/theme/font/mcfontb.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }

    /* mcfontwide */
    @font-face {
      font-family: 'mcfontwide';
      src: url('https://app.mcbcode.com/theme/font/mcfontwide.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }


/* fira code import */
    @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');

/* ubuntu import */
    @import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* inconsolota import */
    @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap');

body {
  background-color: #0c0c0c;
  font-family: 'mcfont', sans-serif;
  animation: fadeIn 0.5s ease-in;
}

body::selection {     
  background: #05ee9340 !important;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

g {
  color: #05ee93 !important;
  font-family: inherit !important;
}

opacity {
    opacity: 0.5;
}

c {
  color: #e7007b !important;
}

br {
    user-select: none;
}
h1 {
  font-family: 'mcfontb' !important;
}
h2 {
  font-family: 'mcfontb' !important;
}
h3 {
  font-family: 'mcfontb' !important;
}
h4 {
  font-family: 'mcfont' !important;
}
p {
  font-family: 'mcfont';
}
input {
  font-family: 'mcfont' !important;
}
button {
  font-family: 'mcfont';
}

.code-area, .highlight-layer {
  font-family: monospace !important;
}

#codeArea, #highlightLayer {
  font-family: monospace !important;
}