:root {
    --rotation: 0deg;
    /* --yellow: #eabc46; */
    --yellow: #e9ac10;
    /* --red: #d35049; */
    --red: #df4037;
    /* --blue: #6591cb; */
    --blue: #4073d8;
}

body {
    max-width: 980px;
    margin: auto;
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        "Open Sans",
        "Helvetica Neue",
        sans-serif;
}

p,
button {
    font-size: 16px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
}

a {
    color: var(--blue);
}

a:visited {
    color: var(--red);
}

a:hover {
    color: var(--yellow);
}

#welcome {
    text-align: center;
    margin-bottom: 32px;
    border-radius: 8px;
    padding: 8px;
    /* margin: 16px 16px; */
    margin: 16px auto;
    align-self: center;
    width: fit-content;
    background-color: var(--red);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#welcome h2 {
    background-color: white;
    border-radius: 8px;
    padding: 8px;
    /* width: fit-content; */
    margin: 8px auto;
}
#welcome p {
    background-color: white;
    border-radius: 8px;
    padding: 8px;
    width: fit-content;
    margin: 8px auto;
}

#hero {
    background-color: var(--blue);
    border-radius: 8px;
    /* padding: 16px; */
    padding: 8px;
    margin: 16px 16px;
    width: fit-content;
    display: flex;
    justify-content: center;
}
.s-c-h-l-a-g-e-t-o-w-n {
    /* width: 80%; */
    width: calc(100% - 48px);
    align-self: center;
    background: white;
    border-radius: 8px;
    padding: 8px 16px;
    margin: 8px;
    /* filter: sepia(0.5); */
    @media (min-width: 960px) {
        width: 50%;
        padding: 16px 64px;
    }
}

.brendanlist {
    /* background-color: gold; */
    border-radius: 8px;
    padding: 8px;
    margin: 16px 16px;
    width: fit-content;
    /* rotate: var(--rotation); */
    clear: both;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.brendanlist h2 {
    text-align: center;
    /* font-weight: bold; */
    background-color: white;
    padding: 8px;
    width: fit-content;
    margin: 8px auto;
    border-radius: 8px;
}

.brendanlist ul {
    padding: 0 16px 0 24px;
}

#existingsites {
    /* rotate: var(--rotation); */
    /* margin-left: 0%; */
    background-color: var(--yellow);
}

#wannamake {
    margin-left: 35%;
    background-color: var(--red);
}

#enjoying {
    margin-left: 20%;
    background-color: var(--blue);
}

#onedayprojects {
    margin-left: 5%;
    background-color: var(--yellow);
}

#futurewriting {
    /* margin-left: 60%; */
    float: right;
    margin-right: 20%;
    background-color: var(--red);
}

#funtohost {
    margin-left: 20%;
    /* position: relative; */
    background-color: var(--blue);
}

#findmehere {
    /* margin-left: 80%; */
    margin-right: 15%;
    /* position: relative; */
    float: right;
    /* right: 0px; */
    background-color: var(--yellow);
}

/* expando-collapso experiments! */
/* see: https://www.w3schools.com/howto/howto_js_collapsible.asp */
/* --> */
/* button used to open and close the collapsible content */
.collapsible {
    background-color: #fff;
    color: #333;
    cursor: pointer;
    padding: 8px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    /* font-size: 15px; */
    border-radius: 8px;
    border: 2px solid white;
}

/* button bg color if clicked (active) or hovered */
.active,
.collapsible:hover {
    /* background-color: #ccc; */
    border: 2px solid black;
}

/* collapsible content - animated! */
.content {
    padding: 0 12px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.1s ease-out;
    border-radius: 8px;
    /* margin: 8px; */
    /* border: 2px solid white; */
}

.content p {
    margin: 16px 0;
}

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

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