:root {
    --fontfamily1: "Raleway", sans-serif;
    --font1: 24px/30px var(-font1);
    --colorbody: hsl(0, 0%, 10%);
    --coloraccent1: goldenrod;
    --coloraccent2: gold;
    --colorprimary1: black;
    --colorsecondary1: white;
    --shadow1: black 0px 0px 12px 0px;
    --shadow2: var(--coloraccent2) 0px 0px 8px 0px;
    --borderwidth1: 1px;
    --transition1: 0.0s ease-in-out;
    --transition2: 3.0s ease-in-out;
}
body {
    font-family: Verdana, Geneva, Tahoma, sans-serif ;
    text-align: center;
    margin: auto;
    color: var(--colorsecondary1);
    background-color: var(--colorbody);
}
p, .p1 {
    margin: 0;
}
.banner {
    background-color: var(--colorprimary1);
    border-radius: 0px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: center;
    justify-content: center;
    transition: var(--transition1);
}
.navbar {
    background-color: #00000033;
    width: 100%;
    border-radius: 0px;
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0px;
    align-items: center;
    justify-content: center;
    transition: var(--transition1);
}
.navbar a {
    text-decoration: none;
    color: var(--coloraccent1);
}
.navbutton {
    background-color: var(--colorprimary1);
    max-width: fit-content;
    padding: 12px;
    margin: 2px;
    font-weight: bold;
    border: var(--borderwidth1) solid transparent;
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0px;
    align-items: center;
    justify-content: center;
    transition: var(--transition1);
}
.navbutton a {
    text-decoration: none;
    color: var(--coloraccent1);
}
a:hover {
    color: var(--coloraccent2);
}
.navbutton:hover {
    border: var(--borderwidth1) solid var(--coloraccent2);
    border-radius: 4px;
    /*box-shadow: var(--shadow2);*/
}
.body-content1 {
    background-color: var(--colorbody);
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: var(--transition1);
}
.body-card {
    background-color: inherit;
    width: 100%;
    padding: 24px;
    gap: 8px;
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    transition: var(--transition1);
}
.card, .card0, .card1, .card2, .card3 {
    background-color: var(--colorprimary1);
    padding: 4px;
    border-radius: 4px;
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: center;
    transition: var(--transition1);
}
.card:hover {
}
.card1:hover, .card2:hover, .card3:hover {
    background-color: var(--coloraccent1);
}
.card0:hover {
    background-color: var(--colorprimary1);
}
.card {
    width: 100%;
    margin: 0px;
    height: 160px;
    gap: 12px;
    display: flex;
    flex-wrap: wrap;
}
.card0 {
    min-width: 160px;
    width: auto;
    height: inherit;
    border: 1px solid var(--coloraccent1);
    gap: 12px;
    padding: 12px;
    margin: 0px;
    display: flex;
    flex-wrap: wrap;
}
.card1 {
    min-width: 160px;
    height: 160px;
    gap: 12px;
    display: flex;
    flex: 1;
    flex-wrap: wrap;
}
.card2 {
    min-width: 160px;
    height: 160px;
    gap: 12px;
    display: flex;
    flex: 2;
    flex-wrap: wrap;
}
.card3 {
    min-width: 160px;
    height: 160px;
    gap: 12px;
    display: flex;
    flex: 3;
    flex-wrap: wrap;
}
	/* collapsible items */
    details {
        margin-bottom: 10px;
        max-width: 600px;
        margin: 10px auto;
    }
/* collapsible item title */
    summary {
        cursor: pointer;
        padding: 10px;
        background-color: var(--colorprimary1);
        color: var(--colorsecondary1);
        border: 2px solid var(--coloraccent1);
        outline: none;
        font-size: 15px;
    }

    summary:hover {
        background-color: var(--coloraccent1);
    }

    details[open] summary {
        background-color: black;
        color:white;
        border: 2px solid var(--coloraccent2);
    }

    .details-content {
        padding: 12px;
        background-color: var(--coloraccent2);
        color: black;
        border: 2px solid var(--coloraccent2);

    }
    img {
    display: block;
    }
.traintrack {
	background-color: black;
	min-height: 2px;
	margin: 0px auto;
}
.footer1 {
    background-color: var(--colorbody);
    padding: 12px;
    margin: 12px;
    min-height: 12px;
    border-radius: 0px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: center;
    justify-content: center;
    transition: var(--transition1);
}