/* css styles */
:root {
    --links: #002569;
    --codebg: #f8f9fa;
    --tipbg: #c8e6fe;
    --border-color: #ccc;
    --text-color: #333;
    --font-family: 'Helvetica Neue', sans-serif;
    --padding: 10px;
    --border-radius: 5px;
    --hover: #0074e0;
    --subhead: #0074e0;
}

/* Style for Text/Headings*/

body {
    font-family: var(--font-family)
}

h1,
h2,
h3 {
    color: var(--links);
    /* Blue */
}

h3 {
    text-align: center;
}

h4,
h5,
h6 {
    color: var(--subhead);
    /* Red */
}

/*Style for links*/

/* Normal link color */
a {
    color: var(--links);
    /* Default color */
}

/* Link color on hover */
a:hover {
    color: var(--hover);
    /* Color when the user hovers over the link */
}

/* Link color when clicked (active) */
a:active {
    color: var(--hover);
    /* Color when the link is clicked */
}

/* Visited link color */
a:visited {
    color: var(--hover);
    /* Color for links the user has already visited */
}

/* Style for Quarto chunk outputs */


pre,
.cell-output-display {
    background-color: var(--codebg);
    /* Light background color */
    border: 1px solid var(--border-color);
    /* Optional border */
    padding: 10px;
    /* Padding inside the block */
    border-radius: var(--border-radius);
    /* Optional: rounded corners */
    font-family: monospace;
    /* Monospace font for better readability */
    overflow-x: auto;
    /* Horizontal scrolling for long output */
}



.sp {
    height: 8px;
    /* Customize the height */
}

/* style for fun blocks */

.niceblock {
    background-color: var(--tipbg);
    /* Light background for the block */
    border: 1px solid var(--tipbg);
    /* Optional border */
    padding: 10px;
    /* Padding inside the block */
    border-radius: var(--border-radius);
    /* Rounded corners */
    margin-bottom: 10px;
    /* Space below the block */
}

/* Styling for the link block */
.link-block {
    text-decoration: none;
    /* Remove underline from link */
    color: black;
    /* Text color */
    display: inline-block;
    padding: 0 20px;
}

/* Style for the image */
.link-block img {
    height: 50px;
    /* Set the width of the image */
    width: auto;
    /* Maintain aspect ratio */
    display: block;
    margin: 0 auto;
    /* Ensures the image takes up full width of the element */
}

/* Style for the text to center it under the image */
.link-block p {
    text-align: center;
    /* Center the text */
    margin: 0;
}

.link-block:hover p {
    color: var(--hover);
    /* Change text color on hover */
}

.terminal {
    background-color: #1e1e1e;
    border: 1px solid var(--border-color);
    /* Optional border */
    color: #ffffff;
    padding: 10px 5px 0px 5px;
    /* Top 10px, right 5px, bottom 5px, left 5px */
    font-family: monospace;
    border-radius: var(--border-radius);
    overflow: auto;
}

/* Style for the entire details block */
details {
    background-color: var(--tipbg);
    /* Light background for the details block */
    border: 1px solid var(--tipbg);
    /* Optional border */
    padding: 10px;
    /* Padding inside the details block */
    border-radius: var(--border-radius);
    /* Rounded corners */
    margin-bottom: 10px;
    /* Space below the block */
}

/* Style for the summary portion */
summary {
    font-weight: bold;
    /* Make the summary text bold */
    font-size: 16px;
    /* Increase font size */
    color: #040404;
    /* Custom text color */
    cursor: pointer;
    /* Show pointer cursor on hover */
    padding: 5px 0;
    /* Add padding */
}

/* Hover effect for the summary */
summary:hover {
    color: var(--hover);
    /* Darken the color on hover */
}

/* Show/reveal answers code details block */
.ans details {
    background-color: var(--codebg);
    /* Light background for the details block */
    border: 1px solid var(--border-color);
    /* Optional border */
    padding: 10px;
    /* Padding inside the details block */
    border-radius: var(--border-radius);
    /* Rounded corners */
    margin-bottom: 10px;
    /* Space below the block */
}

/* Style for the summary portion */
.ans summary {
    font-weight: bold;
    /* Make the summary text bold */
    font-size: 16px;
    /* Increase font size */
    color: #040404;
    /* Custom text color */
    cursor: pointer;
    /* Show pointer cursor on hover */
    padding: 5px 0;
    /* Add padding */
}

/* Hover effect for the summary */
.ans summary:hover {
    color: var(--hover);
    /* Darken the color on hover */
}