/* Reset Default */
* {
    all: unset;

    display: block;
    box-sizing: border-box
}

body {
    max-width: 1000px;
    width: 100%;

    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}


/* Text */
* { font-size: 1rem; }
h2 { font-size: 1.75rem; }

a {
    color: blue;
    text-decoration: underline;
    display: inline;
}
a:hover { cursor: pointer; }

/* Interactive Elements */
button {
    background-color: #55c2da;
    border: 1px solid black;

    text-align: center;
    padding: .25rem;
}
button:hover {
    background-image: linear-gradient(to bottom, #5783db, rgba(255, 255, 255, .5));
    cursor: pointer;
}

/* Special Layouts */
mediaScroller {
    backdrop-filter: brightness(35%);

    overflow-x: scroll;

    display: flex;
    flex-direction: row;
    gap: 1rem;

    padding: 1rem;

    img, video {
        height: 15rem;
        width: auto;
    }
}

fillingContent {
    overflow: hidden;

    height: 350px;
    width: 100%;

    > * {
        width: 100%;
        height: 100%;
    }
}

section {
    border: 1px solid black;

    margin-bottom: 1rem;

    > *:not(mediaScroller, fillingContent) {
        margin: .5rem;
    }
}
section.noBorder { border: none; }