/* mobile */
@media all and (max-width: 812px){
    .note { width: 100%; }
}

/* not mobile */
@media not all and (max-width: 812px){
    .note { width: 150px; }
}

h3 {
    margin-top: 0;
}

.notes {
    /*width: 95%;*/
    margin: 0 auto;

    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.note {
    /*width: 140px;*/
    margin: 1%;  /* outside spacing */
    /*padding: 10px;*/  /* inside spacing */

    /*background-color: 239r, 228g, 176b;*/
    /*background-color: #FAEBD7;*/
    background-color: rgba(239, 228, 176, 0.3);
    opacity: 0.9;

    border-width: 5px;
    box-sizing: border-box;
    border-color: black;

    /*display: flex;*/
    /*flex-direction: row;  [> not sure I need flex here, but its solving my word wrap problem too <]*/
    /*justify-content: center;*/
}

.note-link {
}

.note-date {
    color: grey;
    font-size: 12px;
}

.note-preview-text {
    font-size: 14px;
}

.note-tag-area {
    margin-top: 30px;
    /*font-size: 14px;*/
}

#add-tag-box {
    position: relative;
}

#auto-complete-results {
    position: absolute;
    bottom: 30px;
    left: 70px;

    margin: 0;
    padding: 5px;

    background-color: white;

    border: 2px solid black;
}

.selected {
    background-color: lightblue;
}