styles.css

/* Clear default browser styles */
body {
    /* Set default font to DM Sans */
    font-family: "DM Sans", Verdana, sans-serif;
    margin: 0px; /* remove default margin; we don't need it */
    background: #f3f5ff;
    color: #333;
}

/* browsers being annoying https://stackoverflow.com/questions/6520689/font-family-is-not-inherited-to-the-form-input-fields */
input, textarea, select, button {
    font-family: inherit;
}

h1, h2, h3, h4, h5, p {
    margin: 0;
}

a {
    text-decoration: none;
}

/* Buttons */
.button {
    border: none;
    padding: 10px 30px;
    border-radius: 7px;
    cursor: pointer;
}

.buttonPrimary {
    background: #a08eff;
}

.buttonPrimary:hover {
    background: #ac9bff;
}

.buttonSecondary {
    background: #cddbff;
}

.buttonSecondary:hover {
    background: #dee7ff;
}

.buttonDanger {
    background: #ff5d5d;
}

.buttonDanger:hover {
    background: #f0a4a4;
}

.buttonDisabled {
    background: rgb(206, 206, 206);
    cursor: not-allowed;
}

/* Statuses/Text */
.textGreen {
    color: green;
}

.textYellow {
    color: sandybrown;
}

.textGold {
    color: gold;
}

/* Container */
.container {
    width: 100vw;
    height: 100vh;
    min-width: 360px;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

/* Header */
.header {
    width: 100%;
    height: 60px;
    background: #fff;
    position: sticky;
    display: flex;
    flex-wrap: nowrap;
    top: 0;
}

#headerTitleBox {
    display: flex;
    align-items: center;
    width: 50%;
    height: 100%;
    margin-left: 20px;
}

#headerTitle {
    font-family: 'Rubik', Verdana, sans-serif;
    font-size: 1rem;
    color: #222;
}

#headerIcon {
    margin-right: 10px;
}

#headerLinks {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: flex-end;
    width: 50%;
    margin-right: 20px;
    gap: 20px;
}

/* Main segment */

#jumpTo {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: scroll;
}

#jumpTo * {
    flex-shrink: 0;
}

#main {
    width: 100%;
    height: 100%;
}

.verticallySpaced {
    margin: 20px 0;
}

/* Boxes */
.box {
    background-color: white;
    padding: 10px;
}

/* Cards */
.cardList {
    display: flex;
    width: auto;
    overflow-x: scroll;
    gap: 10px;
}

.card {
    display: flex;
    flex-direction: column;
    background-color: white;
    width: 200px;
    height: 250px;
    border-radius: 10px;
}

.card.borderYellow {
    border: 3px solid sandybrown;
}

.card.borderGreen {
    border: 3px solid lightgreen;
}

.card .cardContent {
    margin: 0px 5px;
    flex-grow: 2;
}

.card ul {
    padding-left: 20px;
}

.card .button {
    width: 90%;
    margin-bottom: 10px;
    align-self: center;
}

.card img {
    width: 100%;
    height: 50%;
    flex-shrink: 0;
}

/* search bar */
.searchBar {
    border: none;
    width: 80%;
    background-color: #f3f5ff;
    font-size: 20px;
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;
}

/* footer */
#footer {
    height: 100px;
    background-color: #434343;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 25px;
}

/* Utility */
.noFlexShrink {
    flex-shrink: 0;
}

.marginWrapper {
    margin: 25px 15px;
}

.thin {
    font-weight: lighter;
}

.tinyText {
    font-size: 0.75rem;
}

.scrollBox {
    overflow-x: scroll;
}

.flex {
    display: flex;
}

.justifyRight {
    justify-content: right;
}

.justifyCenter {
    justify-content: center;
}

.fullWidth {
    width: 100%;
}

/* easter egg */
#cat {
    font-size: 2rem;
    cursor: grab;
}

/* adjust based on break points */
@media screen and (min-width: 768px) {
    #headerTitle {
        font-size: 1.5rem;
    }

    .marginWrapper {
        margin: 25px;
    }

    .box {
        max-width: 80%;
    }

    .cardList {
        min-width: 80%;
    }
}