body { padding-top: 70px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #EEAAB1 !important; }
.bg-hero { 
    background-image: url(https://static.igem.wiki/teams/4649/wiki/website-banner-5.png); 
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    background-size: cover;
    }
/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }
            
@font-face {
    font-family: "HammersmithOne";
    src: url("https://static.igem.wiki/teams/4649/wiki/hammersmithone-regular.ttf") format("truetype");
    font-style: normal;
     }
            @font-face {
                font-family: "BeVietnam";
                src: url("https://static.igem.wiki/teams/4649/wiki/bevietnampro-light.ttf") format("truetype");
                font-style: normal;
            }
            :root {
                --base-header-font: "HammersmithOne";
                --base-body-font: "BeVietnam";
            }
            body {
                background-image: url(https://static.igem.wiki/teams/4649/wiki/background-image-home.png);

            }
            h1 {
                font-family: var(--base-header-font);
                color: #4F695D;
                font-size: 64px;
                text-align: center;
            }
            h2 {
                font-family: var(--base-body-font);
                color: #FFEECF;
                font-size: 48px;
                text-align: center;
            }
            h3 {
                padding-top: 40px;
                font-family: var(--base-body-font);
                color: #FFEECF;
                font-size: 40px;
                text-align: center;
            }
            p  {
                font-family: var(--base-body-font);
                color: #FFEECF;
                font-size: 20px;
                text-align: justify;
                padding-left: 20px;
                padding-right: 20px;
                padding-top: 20px;
                
            }
             .paragraph  {
                font-family: var(--base-body-font);
                color: #FFEECF;
                font-size: 20px;
                justify-self: right;
                padding-left: 20px;
                padding-right: 20px;
                padding-top: 20px;
                width: 550px;
                
            }
            table {
                font-family: var(--base-body-font);
                color: #FFEECF;
                font-size: 20px;
            }
            
            ul {
                font-family: var(--base-body-font);
                color: #FFEECF;
                font-size: 20px;
                text-align: justify;
                padding-left: 40px;
                padding-right: 20px;
                padding-top: 20px;
            }
            
            .apasource {
                padding-left: 66px;
                padding-right: 40px;
                text-indent: -26px;
                margin-block: 5px;
                overflow-wrap: anywhere;
                font-family: var(--base-body-font);
                color: #FFEECF;
                font-size: 20px;

}

            .container1 {
                align-items: center;
                justify-content: center;
            }
            .text1 {
                font-size:20px;
                float: left;
            }
            .image1 {
                float:right;
            }
            .textbox {
                background-color: #608073;
                padding-right: 40px;
                padding-left: 40px;
                padding-bottom: 40px;
                padding-top: 40px;

            }
            .textspace {
                padding-top: 80px;
            }
            a:hover {
                color: #9F6365;
                text-decoration: underline;
            }
            a:visited, a:active {
                color: #724345;
                text-decoration: none;
            }
            a:link {
                color: #724345;
            }
            .clear {
                clear: both;
            }
            .collapsible {
                background-color: #608073;
                color: #FFEECF;
                cursor: pointer;
                padding: 18px;
                width: 100%;
                border: none;
                text-align: left;
                outline: none;
                font-size: 48px;
            }

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
            .active, .collapsible:hover {
                background-color: #608073;
            }

/* Style the collapsible content. Note: hidden by default */
            .content {
                padding: 0 18px;
                display: none;
                overflow: hidden;
                background-color: #80A994;
                color: #623C23;
                font-size: 20px;
                padding-top: 20px;
}
            .collapsible:after { /*'\02795'*/
                content: '\02795'; 
                font-size: 40px;
                color: wheat;
                float: right;
                margin-left: 5px;
                margin-top: 9px;
}

            .active:after {
                content: "\2796"; 
}
            figcaption {
                display: block;
                color: #FFEECF;
                font-family: var(--base-body-font);
            }
            figure {
                display: inline;
            }

         /*   .collapsible {
                background-color: #608073;
                color: #FFEECF;
                cursor: pointer;
                padding: 18px;
                width: 100%;
                border: none;
                text-align: left;
                outline: none;
                font-size: 40px;
            }
            .day {
                padding: 0 18px;
                padding-top: 18px;
                display: none;
                overflow: hidden;
                background-color: #80A994;
            }


            .grid-wrapper {
                display: grid;
                height: auto;
                grid-template-rows: min-content auto;
                width: 1150px;
            }
            .collapsible:active,
.collapsible:hover {
    background-color: #80A994;
}

.collapsible:after {
    content: '\02795';
    /* Unicode character for "plus" sign (+) */
   /* font-size: 1.1rem;
    color: white;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2796";
    /* Unicode character for "minus" sign (-) */
}*/