@import url('https://fonts.googleapis.com/css?family=Open+Sans:700');
@import url('https://fonts.googleapis.com/css?family=EB+Garamond');

/*:root {
    --html-background-color: #eee;

    --primary-bg-color: #eee;
    --primary-text-color: #11;
    --secondary-text-color: #555;

    --h1-color: #333;

    --header-bg-color: #a4a4a4;
    --header-text-color: #000000;

    --navbar-link-color: #fff;
    --navbar-link-hover-color: #ff9800;

    --sidebar-bg-color: #fff;
    --sidebar-border-color: #ff9800;
    --sidebar-link-color: #0066cc;
    --sidebar-link-hover-color: #ff9800;

    --code-background-color: #a4a4a4;
    --code-color: #000000;

    --link-visited-color: #000;
    --link-hover-color: blue;

    --fab-fas-bg-color: #333;
    --fab-fas-hover-bg-color: blue;
    --fab-fas-link-color: #eee;

    --main-bg-color: #fff;
    --main-text-color: #333;
    --main-secondary-text-color: #555;

    --bullet-point-color: #ff9800;

    --pre-bg-color: #f4f4f4;

    --box-shadow-color: rgba(0, 0, 0, 0.2);
    --box-shadow-hover-color: rgba(0, 0, 0, 0.15);

    --blockquote-border-color: #e0e0e0;
    --blockquote-text-color: #666;
    --code-bg-color: #f5f5f5;

    --user-card-bg-color: #f9f9fb;
    --user-card-border-left-color: #ff9800;
    --user-card-box-shadow: rgba(0, 0, 0, 0.15);
    --user-card-hover-box-shadow: rgba(0, 0, 0, 0.2);
    --user-card-description-color: #444;
    --user-card-profile-image-bg-color: #ccc;
    --user-card-profile-image-box-shadow: rgba(0, 0, 0, 0.1);

    --table-border-color: #e0e0e0;
    --table-header-bg-color: #f5f5f5;

    --bullet-point-spacing: 0.1rem;

    --font-family: 'EB Garamond';
    --font-family-serif: serif;
    
    --font-family-h: 'Open Sans';
    --font-family-h-serif: sans-serif;


}
*/

:root {
    /* Backgrounds */
    --html-background-color: #f4f5f7; /* Soft light gray */
    --primary-bg-color: #ffffff;      /* Clean white-ish background for cards */
    --main-bg-color: #f4f5f7;
    --sidebar-bg-color: #e0e0e5;      /* Gentle sidebar background */

    /* Texts */
    --primary-text-color: #1c1c1e;    /* Dark gray for main text */
    --secondary-text-color: #4d4d50;  /* Medium gray for secondary text */
    --main-text-color: #1c1c1e;
    --main-secondary-text-color: #4d4d50;

    --header-bg-color: #f0f0f0;
    --header-text-color: #000000;



    /* Headings */
    --h1-color: #0077b6;              /* Nerdy blue */
    --font-family-h: 'Inter', 'Helvetica Neue', sans-serif;
    --font-family-h-serif: sans-serif;

    /* Links */
    --link-visited-color: #5a5a66;
    --link-hover-color: #ff6b6b;      /* Warm playful accent */
    --navbar-link-color: #0077b6;
    --navbar-link-hover-color: #ff6b6b;

    /* Sidebar links */
    --sidebar-link-color: #0077b6; 
    --sidebar-link-hover-color: #ff6b6b;
    --sidebar-border-color: #0077b6;

    /* Code / pre */
    --code-background-color: #e8eef5;
    --code-color: #1c1c1e;
    --pre-bg-color: #e8eef5;
    --code-bg-color: #e8eef5;

    /* Blockquote */
    --blockquote-border-color: #0077b6;
    --blockquote-text-color: #4d4d50;

    /* Bullet points */
    --bullet-point-color: #0077b6;
    --bullet-point-spacing: 0.25rem;

    /* FontAwesome / icons */
    --fab-fas-bg-color: #dbe6f1;
    --fab-fas-hover-bg-color: #ff6b6b;
    --fab-fas-link-color: #1c1c1e;

    /* User cards */
    --user-card-bg-color: #ffffff;
    --user-card-border-left-color: #0077b6;
    --user-card-box-shadow: rgba(0,0,0,0.05);
    --user-card-hover-box-shadow: rgba(0,0,0,0.1);
    --user-card-description-color: #4d4d50;
    --user-card-profile-image-bg-color: #dbe6f1;
    --user-card-profile-image-box-shadow: rgba(0,0,0,0.05);

    /* Table */
    --table-border-color: #cfd6e0;
    --table-header-bg-color: #e8eef5;

    /* Shadows */
    --box-shadow-color: rgba(0,0,0,0.05);
    --box-shadow-hover-color: rgba(0,0,0,0.1);

    /* Fonts */
    --font-family: 'Inter', 'Helvetica Neue', sans-serif;
    --font-family-serif: serif;
}


html{
  background-color: var(--html-background-color);
}

/*==============================================================================
/ Reset styles
==============================================================================*/
body, h1, p, ul, li, a {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}

/*==============================================================================
/ Body
==============================================================================*/
body {
    padding-top: 60px;
    padding-bottom: 50px;
    font-family: var(--font-family), var(--font-family-serif);
    background-color: var(--primary-bg-color);
    color: var(--primary-text-color);
    line-height: 1.6;
    min-height: 100vh;
    flex-direction: column;
    overflow-x: hidden;
    font-size: 16px;
    width: 100%;
    justify-content: center;
}

/*==============================================================================
/ Container
==============================================================================*/
.container {
    margin: 0 0 0 0;
    padding: 0rem 0rem 0rem 0rem; 
    display: flex;
    gap: 1rem;
    flex: 1;
    flex-wrap: wrap;
    /*align-items: stretch;*/
    align-items: center; 
    justify-content: center;
    width: 100%;
    max-width: 100%;
    animation: fadein 2s;
    position: relative;
    z-index: 0;
    border-bottom: 1px solid #ff0000;
    border-top: 1px solid #ff0000;
    border-left: 1px solid #ff0000;
    border-right: 1px solid #ff0000;
}

/*==============================================================================
/ Header
==============================================================================*/
header {
    position: fixed;
    top: 0;
    left: 0;
    padding: 0rem 0rem;
    width: 100%;
    background: var(--header-bg-color);
    color: var(--header-text-color);
    box-shadow: 0 2px 4px var(--box-shadow-color);
    z-index: 1000;
}

.navbar {
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style-type: none;
    margin: 0;
    gap: 1.5rem;
}

.navbar li {
    display: flex;
    align-items: center;
}

.navbar img {
    width: auto;
    max-height: 80%;
    object-fit: contain;
    vertical-align: middle;
}

.navbar a {
    color: var(--navbar-link-color);
    text-transform: uppercase;
    font-weight: bold;
    transition: color 0.3s ease;
}

.navbar a:hover {
    color: var(--navbar-link-hover-color);
}

/*==============================================================================
/ Main
==============================================================================*/
main {
    flex: 1;
    background: var(--main-bg-color);
    margin: 0 0 0 0;
    padding: 3.5rem 1rem 0rem 1rem;
    border-radius: 10px;
    min-height: 60vh;
    max-width: 800px;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
    justify-content: center;
    border-bottom: 1px solid #000000;
}

h1, h2, h3 {
  font-family: var(--font-family-h), var(--font-family-h-serif);
}


h1 {
  padding: 0em;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 3em;
  text-align: center;
  color: var(--h1-color);
  margin-bottom: 0.5em;
}

h3 {
  text-transform: uppercase;
  font-weight: 900;
  padding-top: 1.5em;
}

h4{
  font-weight: 700;
}

.list{
}

a, a:visited {
  color: var(--link-visited-color);
  text-decoration: none;
  line-height: 1.6em;
}

a:hover {
  color: var(--link-hover-color);
}

.fab, .fas{
  vertical-align: middle;
  background-color: var(--fab-fas-bg-color);
  border-radius: 50%;
  padding: 0.7em;
  margin: 0.8em;
}

a > .fab, a > .fas{
  color: var(--fab-fas-link-color);
  font-size: 1.2em;
}

.fab:hover, .fas:hover{
  background-color: var(--fab-fas-hover-bg-color);
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/*==============================================================================
/ Code styling
==============================================================================*/
code {
  color: var(--code-color);
  background-color: var(--code-background-color);
  padding: 2px;
  font-size: 80%;
}

pre {
   background-color: var(--code-background-color);
   padding: 10px;
   border-radius: 4px; /* Optional: for rounded corners */
   white-space: pre; /* Ensures that whitespace and newlines are preserved */
   overflow-x: auto; /* Allows horizontal scrolling for long lines */
}

img {
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/*==============================================================================
/ User Card
==============================================================================*/

user-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--user-card-bg-color);
    box-shadow: 0 4px 8px var(--user-card-box-shadow);
    border-radius: 0px;
    padding: 1rem;
    width: 100%;
    max-width: 600px;
    max-height: 80px;
    box-sizing: border-box;
    overflow: hidden;
    margin: 1rem auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-left: 4px solid var(--user-card-border-left-color);
}

/*user-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 2px 4px var(--user-card-hover-box-shadow);
}*/

user-card .description {
    flex: 2;
    padding-right: 1rem;
    color: var(--user-card-description-color);
    font-size: 1em;
    line-height: 1.4;
    text-align: left;
}

user-card .profile-img {
    flex-shrink: 0;
    width: auto;
    max-height: 80%;
    border-radius: 0%;
    background: var(--user-card-profile-image-bg-color);
    object-fit: contain;
    box-shadow: 0 2px 4px var{--user-card-profile-image-box-shadow);
}

/* Ensures it expands horizontally in main */
main user-card {
    width: 100%;
}

/*==============================================================================
/ @media Responsive design
==============================================================================*/
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        align-items: stretch;
        row-gap: 0rem;
    }
    header {
        text-align: center;
    }
}