/* General applies to all */

* {
    font-family: 'BCSans', 'Noto Sans', Helvetica, Arial, sans-serif;
    box-sizing: border-box; /* Makes widths and heights easier to calculate*/
}

a {
    color: #234075;
    text-decoration: none; /*removes undarline*/
    font-weight: bold;
    cursor: pointer;
}

a:hover {
    color: #E3A82B;
    transform: translateX(-3px);
}

/* Navigation bar for returning to home page instead of only back button */

nav {
    background-color: #234075;
    padding: 8px 10px; /*padding in bar for text */
    border-radius: 6px; /* corner round-ness */
    margin-bottom: 2px; /* space below bar */
    display: flex; /*horizontal if space*/
    justify-content: space-between; /*allows sections to be seperated*/
    align-items: center; /*center horizontally*/
}

nav a {
    color: white;
}

body {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f5f7fa;
}


/*  Headings */

h2 {
    color: #234075;
    border-bottom: 2px solid #E3A82B; /* underline */
    padding-bottom: 2px; /* space between txt above and line */
    margin-bottom: 8px; /* space between txt below and line */
}

h3 {
    color: rgb(85, 85, 85);
}

/*  Expandable content */

summary {
    border-left: 6px solid #234075; /* flavor stripe */
    text-decoration: none;
    padding: 0px 0 0px 6px; /* inset and vertical space */
    margin: 2px 0 4px 0; /* top right bottom left */
    list-style: none; /*remove triangle*/
    display: block; /* vertical stacked segments */
    background: white; /* box color */
    border-radius: 2px; /* corner round-ness */
    text-decoration: none; /* removes the underlines */
    color: #234075; /* text */
    font-weight: bold;
}

summary:hover { /* if you hover over the dl block the style changes to this */
    background-color: #eef4ff;
    border-left-color: #E3A82B; /* flavor stripe */
    color: #E3A82B; /* text */
    cursor: pointer;
    transform: translateX(3px); /* moves object */
}

/*  Lists*/

ul {
    margin: 4px auto; /*vert space*/
    padding-left: 20px; /*indent bullet*/
    columns: 2; /*equal splits into 2*/
    column-gap: 30px;/*space between comumns*/
}

.intro-list {
    columns: 1; /*just one col*/
    margin: 12px 0 12px 0px; /* top right bottom left */
}

@media (max-width: 750px) {
    ul{
        columns: 1 /*if the page is being viewed at 750px or less change to 1 col*/
    }
}

li {
    margin-bottom: 2px;/*space under*/
    padding-left: 15px;/* space between bullet and list*/
}


/*  Dataset */

.dataset-card {
    background: white;
    padding: 4px 6px; /*internal space*/
    margin: 2px 0 10px 22px; /* top right bottom left */
    border-radius: 2px;/*corner roundness*/
    border-left: 4px solid #234075; /* flavor stripe */
}

.dataset-header {
    display: flex; /*if possible put content on same line as link*/
    flex-wrap: wrap; /* allows description to drop below on narrow screens */
    gap: 4px;/*space between link and decrip*/
    align-items: baseline; /* align text based on fonts*/
}

.dataset-header a:hover {
    color:#E3A82B;
    border-left-color: #E3A82B;
}

.dataset-description-inline {
    color: rgb(85, 85, 85);
    font-size: 0.95rem;
    font-weight: normal;
}

/*  Documentation*/

.documentation-links {
    padding: 12px;
}

.documentation-links a {
    display: block;
    background: white;
    color: #234075;
    border-left: 4px solid #234075; /*flavor stripe*/
    border-radius: 2px;/*corner roundness*/
    padding: 4px 6px;/*internal space*/
    margin-bottom: -10px; /*reduce the spacing I am adding a <br> to each link so if the .css ever is missing the links will still look good but reducing the spacing if it is present*/
}

.documentation-links a:hover {
    background-color: #eef4ff;
    border-left-color: #E3A82B;  /*flavor stripe*/
    color: #E3A82B;
    transform: translateX(-3px);  /*move a bit*/
}

.documentation-links hr {
    border: 1px solid #E3A82B; 
    margin: 4px 0;
}

/* This is realy cool documentation: 
each option has some testers set up to show what they do!
 https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-box-edge */