/* 1st section */
#background-box {
    border: none;
    background-image: linear-gradient(20deg, black, #001e42 0%, #009fa4);
    background-size: 100% 100%;
    /* Ensure gradient fills the fixed height */
    color: white;
    min-height: 250px;
    align-items: center;
}


.h1tag {
    letter-spacing: 3px;
    cursor: default;
    font-family: Volte rounded, sans-serif;
    color: #fff;
    transition: 0.50s;
}

.h1tag:hover,
.h1tag:focus {
    border-color: var(--hover);
}

.heading {
    background-color: #e9e7e7;
    padding: 30px;
    border-radius: 20px;
}

/* 3rd Section */

.card-link {
    font-weight: 400;
    font-size: large;
    color: #009fa4;
}

.card {
    border: 2px solid #001e42;
}

.card-text .commands ::before {
    content: attr(data-prefix);
    user-select: none;
    font-weight: 700;
    font-size: larger;
}


.card-text pre {
   
    background-image: linear-gradient(40deg, #000000, #02142a 0%, #001e42, #06696c );
    color: #f7f8fb;
    border-radius: 15px;
    box-shadow: inset 0 0 0 2px rgba(17, 25, 46, .1);
    padding: 15px;
    white-space: normal;
    word-wrap: normal;
}

.card-text pre.prefixed code {
    list-style: none;
}

.card-text pre[class*="language-"]>code .token {
    color: #f9a37e;
    background: none;
    border-radius: 0;
    font-weight: 700;
}

.toolslist{
    list-style:inside disc;
}

.toolslist2{
    list-style-type: square;
}
.toolslist3{
    list-style-type: square;
    font-weight: 500;
}
.rna-heading{
    background-color: #000;
    border-radius: 15px;
    padding: 5px;
    color: #009fa4;
    text-decoration: underline #009fa4;
}

.accordion{
    --bs-accordion-border-color: #009fa4;
    --bs-accordion-border-width: 2px;
}
.accordion-button:not(.collapsed) {
    color: #fff;
    background-image: linear-gradient(40deg, #000000, #001e42 0%, #009fa4);
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

.accordbody {
    padding: 20px;
    border-radius: 10px;
}
.accordion-header h4{
    text-align: start;
}

.copy{
    float: right;
    --bs-btn-color: #f8f9fa;
    --bs-btn-border-color: #f8f9fa;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #f8f9fa;
    --bs-btn-hover-border-color: #f8f9fa;
    --bs-btn-focus-shadow-rgb: 248,249,250;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #f8f9fa;
    --bs-btn-active-border-color: #f8f9fa;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #f8f9fa;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #f8f9fa;
    --bs-gradient: none;


    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.15rem;
    --bs-btn-font-family: ;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 1.5;
    --bs-btn-color: #fff;
    --bs-btn-bg: transparent;
    --bs-btn-border-width: 2px;
    --bs-btn-border-radius: 5px;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    text-align: center;
    text-decoration: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}





/* Styles for screens with width less than or equal to 576px (Extra Small Devices) */
@media (max-width: 576px) {
    .card-text pre {
   
        background-image: linear-gradient(140deg, #000000, #02142a 0%, #06696c , #009fa4);
        color: #f7f8fb;
        border-radius: 15px;
        box-shadow: inset 0 0 0 2px rgba(17, 25, 46, .1);
        padding: 15px;
        white-space: normal;
        word-wrap: normal;
    }

}