memo.css

/* Ensure consistent border-box based element sizing */
body > * {
    box-sizing: border-box;
}
/* Outer wrapper div */
#wrapper {
    display: flex;
    flex-flow: row wrap;
    max-width: 1200px;
    margin: auto;
}
#wrapper > * {
    padding: 10px;
    flex: 1 100%;
}

/* Header containing title and memo administration elements*/
header {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Flex for header button elements*/
#itemEntry {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
/*Buttons for creating and administrating memo items*/
.entryButton {
    border: 0;
    border-radius: 5px;
    height: 4ex;
    flex-basis: 40%;
}
/* "New" button */
#newMemo {
    background: #6dc96d;
}
/* "Remove Done" button */
#deleteDone {
    background-color: tomato;
}

/* --- Flex box of memo card elements ---*/
main {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}
/* A memo card flex item */
.card {
    width: 100%;
    height: 98%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 2px;
    margin: 10px 0 0 0;
    border-radius: 5px;
    box-shadow: 5px 3px 5px -1px rgba(0, 0, 0, 0.34);
    /* transition for element mouse hover*/
    transition: all 0.1s cubic-bezier(.18, .89, .32, 1.28);
    font-size: xx-large;
    color: black;
}
/* User input text on item card */
.itemText {
    /*be greedy*/
    flex-grow: 1;
}

/* --- Memo card button elements --- */
.cardButton {
    border: 0;
    background-color: transparent;
}
/* Checkbox marking card item as "done" */
.checkBtn {
    margin-right: 1em;
}
.checkButtonHover {
    color: orange;
}
/* Button and dropdown for priority marking */
.priStarBtn {
}
/* Delete button on item card*/
.deleteBtn {
    color: #5d6164;
}

/* Styling for items checked off as done*/
.done {
}
.done > .itemText{
    filter: blur(1px);
    text-decoration: line-through;
    color: #aaaaaaaa;
}

/* --- Memo item priority select dropdown menu --- */
#priDropdown {
    position: fixed;
    width: min-content;
}
#priDropdown > * {
    /*just to make sure the dropdown is always on top*/
    z-index: 10;
}
/* The actual dropdown menu element*/
.dropMenu {
    box-shadow: 5px 3px 5px 2px rgba(0, 0, 0, 0.34) ;
    border-radius: 5px;
    background-color: white;
}
/* Priority select buttons inside dropdown menu*/
.priButton {
    border: 0;
    display: block;
    width: 100%;
    font-size: inherit;
    padding: 0 0.5em;
}
.priTop{
    background-color: tomato;
}
.priMid{
    background-color: #6dc96d;
}
.priLow{
    background-color: cornflowerblue;
}
.priNone{
    background-color: inherit;
}


/* --- Hover styling only enabled on devices that support it --- */
/* todo: these can be changed to JS instead*/
@media all and (hover) {
    .entryButton:hover{
        color: whitesmoke;
    }

    .card:hover {
        width: 101%;
        box-shadow: 5px 3px 5px 2px rgba(0, 0, 0, 0.34);
    }

    .deleteBtn:hover {
        color: #f24236;
    }

    .priButton:hover {
        filter: brightness(90%);
    }

}

/* --- Palace holder for mobile media rules --- */
@media all and (min-width: 600px) {
}
@media all and (min-width: 1200px) {
}