@import 'lib_color_use_custom_var.css';

@import 'lib_color_dark_gruvbox.css';

body {
  /* Variable */
  
  /* Page */
  margin: 15px; max-width:900px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  
  /* Font */
  font-family: 'Droid Sans', sans-serif; font-size: 17px; font-weight: 400; line-height: 30px;
}

/* H1 */
h1 { 
  font-family: "Century Gothic", "Avant Garde Gothic", "Avant Garde", "URW Gothic L", helvetica, sans-serif;
  font-size: 40px; font-weight: 400;
  line-height: 44px; margin: 50px -10px 20px; 
  max-width: 900px;
}
h1:after {
  content:' ';
  display:block;
  border:2px solid var(--col-h1);
  border-radius:4px;
  box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
  max-width: 900px;
}
h1.title {
  text-align: center;
  font-size: 50px;
  line-height: 60px;
  color: #ddd;
  max-width: 900px;
  margin: 0;
}
h1.title:before {
  content:' ';
  display:block;
  border:4px solid var(--gb-faded_blue);
  border-radius:4px;
  margin: 0px 0px 10px 0px;
  box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
h1.title:after {
  content:' ';
  display:block;
  border:4px solid var(--gb-faded_blue);
  border-radius:4px;
  margin: 10px 0px 30px 0px;
  box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}


/* H2 */
h2 {
  color: color(--col-h2) ; margin: 0 -10px 20px; 
  text-decoration: underline;
  max-width: 800px;
  margin: 60px 0 20px 0;
}

/* Box */
.box {
    outline: 2px solid var(--gb-neutral_aqua);
    padding: 4px;
}

/* Footer */
footer {
    text-align: right;
    margin-right: 100px;
    line-height: 150%;
}

/* Normal */
p {
  margin: 0 0 14px; 
  max-width: 1000px; /* or a suitable width*/
}

/* Link */
a { text-decoration: none; }



/* Show description when hover or focus */
*:hover > .description, *:active > .description, *:focus > .description {
  display: block;
  overflow-wrap: break-word;
}

/*.sidebar > *:focus > .description {
  display: block;
}*/
  /* Add overlay description */
.description {
  /* Position */
  position: absolute;
  /* Remove superscirpt */
  font-size: 17px;
  /* Apperance */
  text-align: left;
  background: #222;
  padding: 10px;
  border: 3px solid var(--gb-faded_blue);
  border-radius: 20px;
  /* Push in front */
  z-index: 4;
  display: none;
}
  
.border-aqua {
    border-radius: 25px;
    border: 2px solid var(--gb-neutral_aqua);
    padding: 10px;
    margin-bottom: 20px;
}

table {
    margin-bottom: 10px;
}


/* Blockquote */ 
blockquote {
  background: var(--col-bck);
  color: var(--color-font);
  margin: 1.5em 10px 0 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
  max-width: 800px;
}
blockquote:before {
  color: var(--col-font);
  content: "\201C";
  /* Bigger lefter */
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote:after {
  content:' ';
  display:block;
  border:1px solid var(--color-font);
  border-radius:1px;
  margin: 10px 0px 0px 0px;
  box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
blockquote p {
    display: inline;
}

/* Shorten HTML */
.center {
    display: block;
    margin: 0 auto;
}


/* Title Styles */
.title-box {
    /* background-color: rgba(255, 255, 0, 0.3);  Light yellow background */
    border: 5px solid #fabd2f; /* Darker yellow border */
    border-radius: 15px; /* Rounded corners */
    padding: 20px; /* Padding inside the box */
    text-align: center; /* Center the text */
    /* margin: 20px auto; /* Center the box horizontally */
    max-width: 800px; /* Maximum width of the box */
    margin-bottom: 20px;  /* Add some air below */
}

/* Title Text */
.title-box h1 {
    font-size: 40px; /* Title font size */
    font-weight: 400; /* Title font weight */
    color: #fabd2f; /* Dark text color for contrast */
    margin: 0; /* Remove default margin */
}

.title-box h1:after {
  border:0px;
}