@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Georgia&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Verdana&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Times+New+Roman&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Helvetica&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Coming+Soon&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courier&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lalezar&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Overpass+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oxygen&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap');


:root {
    --primary-bg: #ffffff;
    --primary-text: #2c3e50;
    --primary-font: system-ui, -apple-system, sans-serif;


    --page-background: #f4f4f4;
    --gray-indicator: #d6d6d6;
    --very-slight-gray: #f9f9f9;
    --link-color: #0066cc;
    --link-hover-color: #004080;
    --link-hover-background-color: #f0f0f0;
    --link-hover-border-left-color: #0066cc;
    --min-max-text-color: #414141;
    --min-max-text-background-color: #ebebeb;
    --min-max-text-hover-color: #214141;
    --min-max-text-hover-background-color: #f8f8f8;
    --slogan-div-color: #323232;
    --slogan-div-border-color: #000;
    --subtitle-color: #444;
    --h1-color: #333;
    --li-p-color: #2a2a2a;
    --about-div-color: #ADE1F5;
    --about-link-color: #97CBDF;
    --example-li-border-color: #F69C99;
    --example-link-color: #6499c2;
    --example-link-bg-color: #FCFCFC;
    --example-sentence-border-color: #e0e0e0;
    --example-sentence-color: #999999;
}

html, 
body {
    font-family: var(--primary-font);
}


blockquote {
    border-left: 4px solid var(--gray-indicator); 
    padding-left: 15px; 
    margin: 20px 0; 
    color: var(--min-max-text-color);
}
  
  
  body {
    background-color: var(--primary-bg);
    color: var(--primary-text);
  }

  h1, h2, h3, h4, h5, h6 {
    color: var(--h1-color);
  }

a, #article-list span:nth-of-type(1) {
    background-color: var(--very-slight-gray);
    color: var(--link-color);
}


  .subtitle {
    color:var(--subtitle-color); 
}

#slogan-text {
   border-bottom: 1px dashed var(--slogan-div-border-color);  border-right: 1px dashed var(--slogan-div-border-color);
}

#slogan-div {
    background-color: var(--primary-bg); color:var(--slogan-div-color);
}

.min-max-text:hover {
    color: var(--min-max-text-hover-color); background-color: var(--min-max-text-hover-background-color); 
}

.min-max-text {
    color:var(--min-max-text-color); background-color: var(--min-max-text-background-color); 
}

hr {
    background-color: var(--gray-indicator);
 }

 #article-list a:hover {
    color: var(--link-hover-color);
    background-color: var(--link-hover-background-color);
    border-left-color: var(--link-hover-border-left-color);
}

#article-list li p, #article-list span:nth-of-type(2) {
    color: var(--li-p-color);
}

#about-div {
    background-color: var(--about-div-color);
}

#about-link {
    background-color:var(--about-link-color); color: var(--primary-bg)
}

#example-li {
   border: 1px dashed  var(--example-li-border-color);
}

#example-link {
    color: var(--example-li-border-color); background-color:var(--example-link-bg-color); 
}

#example-sentence {
    border-left: 4px solid var(--example-sentence-border-color); color: var(--example-sentence-color)
}

::-webkit-scrollbar {
    width: 12px; /* Width of the scrollbar */
    background-color: var(--very-slight-gray); /* Background of the scrollbar track */
}

::-webkit-scrollbar-thumb {
    background-color: var(--gray-indicator); /* Color of the scrollbar thumb */
    border-radius: 10px; /* Rounded corners for the thumb */
    border: 2px solid var(--primary-bg); /* Padding-like effect with border */
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--link-color); /* Highlight color when hovered */
}

::-webkit-scrollbar-track {
    background-color: var(--very-slight-gray); /* Background color of the track */
    border-radius: 10px; /* Rounded corners for the track */
    border: 1px solid var(--primary-bg); /* Optional border for the track */
}

input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background-color: var(--primary-bg);
    border: 2px solid var(--gray-indicator);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.125s, border-color 0.125s, transform 0.125s;
}

/* Checkbox when checked */
input[type="checkbox"]:checked {
    background-color: var(--primary-text);
    border-color: var(--link-color);
    transform: scale(1.1); /* Slightly grow when checked */
}

/* Hover effect on checkbox */
input[type="checkbox"]:hover {
    border-color: var(--link-hover-color);
}

/* Inner checkmark styling */
input[type="checkbox"]:checked::before {
    color: var(--primary-bg);
    font-size: 14px;
    position: absolute;
    top: -2px;
    left: 2px;
}

/* Focus state for better accessibility */
input[type="checkbox"]:focus {
    outline: none;
    border-color: var(--link-hover-color);
    box-shadow: 0 0 5px var(--link-color);
}