:root {
    	--sidebar-width: 25rem;
    	--sidebar-image: 13rem;
    	--distance-media: 14rem;
    	--social-size: 14rem;
    	--card-width: 55rem;
    	--theme-color: rgb(2, 133, 220);
    	/* Blue: #007bff */
    	/* Red: rgb(255,39,60) */
    	/*rgb(0,117,194)
    	rgb(16,202,252) - lightblue
	rgb(2, 133, 220)*/
}

@font-face {
	font-family: 'Russo One';
	src: url(RussoOne-Regular.ttf);
}

@font-face {
	font-family: 'Anton';
	src: url(Anton-Regular.ttf);
}

@font-face {
	font-family: 'IBM Plex Mono';
	src: url(IBMPlexMono-Medium.ttf);
	font-style: normal;
  	font-weight: 100;
  	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
  	font-weight: 400;
  	font-display: swap;
	src: url(UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7SUc.woff2) format('woff2');	
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
   background-color:rgb(6, 6, 7);
   display: flex;
   flex-direction: column;
}

@media (max-width: 1920px) {
    :root {
        --sidebar-width: var(--sidebar-width - 5); /* Smaller sidebar width for screens up to 768px wide */
        --sidebar-image: 12rem;
        --distance-media: 6rem;
        --social-size: 12rem;
        --card-width: 50rem;
    }
}

@media (max-width: 1000px) {
    :root {
        --sidebar-width: 20rem; /* Smaller sidebar width for screens up to 768px wide */
        --sidebar-image: 10rem;
        --distance-media: 5rem;
        --social-size: 10rem;
        --card-width: 40rem;
    }
}

@media (max-width: 820px) { /* Adjust 600px to the threshold you want */
    .sidebar {
        width: 0;
        overflow: hidden; /* Hide any overflowing content */
    }

    :root {
        --sidebar-width: 0rem; /* Even smaller sidebar width for screens up to 480px wide */
        --distance-media: 0rem;
        --card-width: 25rem;
    }
}


.sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--sidebar-width);
    background: rgb(16,15,19);
    padding: 10px 14px;
    border-right: 1px solid #666666; /* Subtle shadow */;
    
}

.sidebar .all-content {
    opacity: 0;
    transition: opacity 0.1s ease;
}

.sidebar .sidebar-body {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center horizontally */
    justify-content: center; /* Center vertically */
    height: 40%; /* Adjust height to fit the container */
    margin: 0;
    /* Additional styling as needed */
}


.sidebar:hover {
    border-right: 1px solid var(--theme-color);
    transition: box-shadow 2.0s ease;
}

.sidebar * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Source Sans Pro","Microsoft Yahei",sans-serif;
}

.sidebar .user-img { 
    width: var(--sidebar-image);
    border-radius: 100%;
    border: 2px solid var(--theme-color);
    display: flex;
    align-items: center;
}

.user {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 2rem 0;
}

.user a {
    text-decoration: none;
}

.user .author__heading:hover {
    color: var(--theme-color);
}


.user .author__heading {
    margin-top: 2rem;
    color: #fff;
    text-align:center;
    font-size: 2.6rem;
    font-family: Anton;
}

.user .author__body {
    margin-top: 0.5rem;
    color: #fff;
    text-align:center;
    font-size:12px;
    margin-bottom: 2rem;
}

.sidebar ul, .sidebar ol {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%; /* Ensure list takes full width of sidebar */
}

.sidebar li {
    display: flex;
    justify-content: center; /* Center the content of li */
    align-items: center;
    width: 100%; /* Full width of the sidebar */
    height: 40px;
    margin-bottom: 10px; /* Adjust as needed */
}

.sidebar li i {
    font-size: 20px;
    width: 50px; /* Fixed width for icons */
    text-align: center; /* Center icons */
}

.sidebar li a, .dropdown-btn {
    flex-grow: 1; /* Allow link to take the remaining space */
    display: flex;
    align-items: center;
    text-decoration: none;
    color: rgba(117, 117, 117, .9);
    padding-left: 25px; /* Space between icon and text */
    font-weight: 900;
    font-size: 1.0rem;
    outline: none;
    border: none;
    background: none;
}

.sidebar ul li a:hover, .dropdown-btn:hover {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}

.sidebar ul li a.active {
    color: #fff;
}

.dropdown-container {
    display: none;
    padding-left: 35px;
    padding-top: 10px;
    position: absolute; /* Position it absolutely relative to the dropdown item */
    top: 100%; /* Position it below the dropdown item */
    left: 0; /* Align it with the left edge of the dropdown item */
    z-index: 1;
    cursor: pointer;
}

.dropdown-container a {
    display: block; /* Make the options a block element */
    margin-bottom: 10px; /* Add margin between the options */
}

.dropdown-item {
    position: relative; /* Set the position of the dropdown item to relative */
}


.content-below-dropdown {
    margin-top: 0; /* Initial margin is 0 */
    transition: margin-top 0.3; /* Add a smooth transition effect */
}

.hello {
    color:rgba(117,117,117,.9);
    display: block;
    margin: 4rem var(--social-size) auto;
}

.hello:hover {
    color: #fff;
    margin: 4rem var(--social-size) auto;
    transition: box-shadow 0.3s ease;
}

/* SIDEBAR ************************************************************/
.footer {
    margin:auto;
    margin-left: 45rem;
    margin-top: auto;
    height: 60px;
    width:50%;
    padding: 8px;
    border-top-width: 0.5px;
    border-top-style: solid;
    border-top-color: #5a5a5a;
    color: #666666;
    font-size: 12px;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.footer a {
    color: #adadad;
    text-decoration: none;

}

.footer a:hover {
    text-decoration: underline;
    color: #cccccc
}

.main {
    margin-left: calc(var(--sidebar-width) + var(--distance-media)); /* Shifts the main content to the right of the sidebar */
    flex-grow: 1; /* Allows the main content to grow and fill available space */
    padding: 20px; /* Adds some padding around the content */
    overflow-x: hidden;
}


/*********************************** Article Cards*********************************/
.card {
    font-family: "Lucida Console";
    position: relative;
    background-color: rgb(16,15,19); 
    border: 1px solid #666666; 
    border-radius: 8px; /* Rounded corners */
    margin-bottom: 4rem; /* Space between cards */
    padding: 20px;
    width: var(--card-width);
    height: auto;
    overflow: hidden; /* Ensures no content spills outside the border radius */
    transition: box-shadow 0.3s ease;
}

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 10px; /* Spacing inside the card */
}

.card-subtitle {
    font-family: 'IBM Plex Mono';
    font-size: 0.8rem; /* Regular font size for the text */
    color: #666666; /* Medium grey color for text */
    margin-bottom: 15px; /* Space below the text */
}

.card-title {
    font-family: "Russo One";
    margin-top: 0px;
    font-size: 1.8rem; /* Larger font size for the title */
    color: #fff; /* Dark grey color for text */
    margin-bottom: 10px; /* Space below the title */
}

.card-text {
    font-family: 'Lucida Console';
    font-size: 1.0rem; /* Larger font size for the title */
    color: #dad9d9; /* Dark grey color for text */
    margin-bottom: 25px; /* Space below the title */
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-category {
    font-family: 'IBM Plex Mono';
    font-size: 0.8rem; /* Regular font size for the text */
    color: #666666; /* Medium grey color for text */
    position: absolute;
    top: 0; /* Align to the bottom */
    right: 0; /* Align to the left */
    padding: 2rem;
}

.card-link {  
    text-decoration: none;
    color: inherit;
    display: block; /* Added to make the link block-level */
    width: 100%;
}

.card:hover {
    border: 1px solid var(--theme-color);
    transition: box-shadow 1s ease;
}

.card:hover .card-title {
    color: var(--theme-color);

}

.card:hover .card-text {
    color: var(--theme-color);
}

.read-more {
    align-self: flex-end;
    font-size: 1.0rem;
    color: #fff;
}

.card:hover .read-more {
    color: var(--theme-color);
}

.btn {
    padding: 10px 15px; /* Padding inside the button */
    text-decoration: none; /* Removes underline from links */
    color: white; /* White text color */
    border-radius: 5px; /* Rounded corners for the button */
    font-size: 1rem; /* Font size for the button text */
    margin-right: 10px; /* Space between buttons */
    border: none; /* No border for the button */
    cursor: pointer; /* Pointer cursor on hover */
}

.btn-primary {
    background-color: #007bff; /* Blue background for primary button */
}

.btn-info {
    background-color: #17a2b8; /* Teal background for info button */
}

.btn-danger {
    background-color: #dc3545; /* Red background for danger button */
    margin-left: 300px;
}

/* Adjust the hover effect for buttons */
.btn:hover {
    opacity: 0.9;
}

/*********************************** Article Cards*********************************/
.articleContainer h1 {
    color: var(--theme-color);
    font-family: "Lucida Console";
    padding: 15px;
    margin: 0 auto;
}

.article-body {
    font-family: 'Lucida Console', sans-serif;
    line-height: 1.6;
    color: white;
      
}

.article-header {
    text-align: center;
    margin-bottom: 20px;
}

.article-date {
    font-size: 0.8rem;
    font-family: 'Courier New', Courier, monospace;
    color: #666;
    padding-bottom:15px;
}

.article-content {
    border: 1px solid #666;
    max-width: 70%;
    min-width: 300px;
    font-size: 1.0rem;
    background-color: rgb(16,15,19);;
    padding: 50px;
    padding-top:30px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.article-content h1 {
    font-family: "Russo One";
}

.article-content pre {
    background-color: #333232; /* Light grey background */
    border: 1px solid #e1e1e1; /* Light grey border */
    border-radius: 5px; /* Rounded corners */
    padding: 15px; /* Padding inside the code block */
    line-height: 1.5;
    margin: 1rem auto; /* Center the code block */
    display: block; /* Use block display */
    width: 80%; /* Standard width, adjust as needed */
    max-width: 100%; /* Ensure it doesn't exceed the width of its container */
    overflow-x: auto; /* Horizontal scrolling for long lines of code */
    white-space: nowrap; /* Prevents wrapping of content */
}
.article-content code {
    font-family: "Courier 10 Pitch", Courier, monospace; /* Monospace font for inline code */
    /*font-family: 'Cascadia Code';*/
    background-color: #333232; /* Light grey background for inline code */
    padding: 2px 4px; /* Padding for inline code */
    border-radius: 3px; /* Rounded corners for inline code */
    font-size: 0.95em; /* Slightly smaller font size for inline code */
}

.article-content table {
    margin: 1rem auto;
}

.article-content p {
    margin-bottom: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    
}

.article-content em {
    margin: 1rem auto;
}

.article-content summary {
    padding: 0.5rem;
    color: var(--theme-color);
}

.article-content img {
    margin: 1rem auto; /* Center the code block */
    display: block;
    max-width: 100%; /* Ensures images don't exceed the width of their containi>
    height: auto; /* Allows images to maintain their aspect ratio */
}

.article-content summary:hover {
    padding: 0.5rem;
    color: white;
}

.article-content h2, .article-content h3 {
    color: var(--theme-color);
}

.article-content ul, .article-content ol {
    padding-left: 20px;
}

.article-content a {
    color: var(--theme-color);
    text-decoration: none;
}

.article-content a:hover {
    text-decoration: underline;
}