@font-face {
    font-family: breezeSansLight;
    src: url("fonts/BreezeSans-Thin_20150728.ttf");
}

::-webkit-scrollbar {
    width: 15px;
}
::-webkit-scrollbar-thumb {
    background: rgb(184, 184, 184); 
    border-radius: 20px;
    border: 4px solid rgb(255, 255, 255);
}
::-webkit-scrollbar-thumb:hover {
    background: rgb(156, 156, 156);
}

/*MAIN SCREEN SECTION*/
h1, h3, h5 {
    font-family: breezeSansLight;
    font-weight: lighter;
    user-select: none;
    outline: none;
    color:rgb(184, 184, 184);
}
.note h1, 
.note h3, 
.note h5 {
    padding: 10px;
    color:rgb(105, 105, 105);
}
.note h1:hover, 
.note h3:hover {
    cursor: text;
}

.main_screen{
    margin: 0 auto;
}
.top_menu {
    font-family: breezeSansLight;
    text-align: center;
    user-select: none;
    margin: 20px;
    transform: translate(0%, 10%);
}

.add_note_button:hover, 
.edit_note_button:hover,
.back_button:hover,
.delete_note_button:hover {
    cursor: pointer;
    background-color: rgb(246, 246, 246);
}

.add_note_button, 
.edit_note_button,
.back_button,
.delete_note_button {
    font-family: breezeSansLight;
    font-size: 30px;
    vertical-align: top;
    color: rgb(184, 184, 184);
    height: 40px;
    width: 40px;
    border: 1px solid rgb(184, 184, 184);
    border-radius: 20px;
    background-color: white;
    transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
}
.back_button{
    display: none;
}

/* gets rid of the ‘X’ from the search bar. Ugly, I know, but it was all I could find*/
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }
.search_bar {
    flex-shrink: 1px;
    font-family: breezeSansLight;
    font-size: 15px;
    outline: none;
    border: 1px solid rgb(184, 184, 184);
    border-radius: 20px;
    padding-left: 20px;
    padding-right: 20px;
    height: 40px;
    width: 300px;
    transition: 0.1s ease-in-out;
}
.search_bar:hover, 
.search_bar:focus {
    border: 0px;
    box-shadow: 0px 2px 2px rgba(0,0,0,0.12), 
                0px 4px 4px rgba(0,0,0,0.12), 
                0px 12px 8px rgba(0,0,0,0.12);
}

.note_display {
    display: flex;
}
.note_display_outline {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    width: 700px;
    height: 500px;
    padding: 20px;
    margin: auto;
    overflow: scroll;
    transform: translate(2%, 0);
}
.note{
    flex-shrink: 1;
    width: 300px;
    height: max-content;
    margin: 15px;
    word-wrap: break-word;
    border-radius: 20px;
    transition: box-shadow 0.1s ease-in-out, margin 0.1s ease-in-out;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.12), 
                0px 2px 2px rgba(0,0,0,0.12), 
                0px 4px 4px rgba(0,0,0,0.12);
}
.note:hover{
    cursor: pointer;
    box-shadow: 0px 2px 2px rgba(0,0,0,0.12), 
                0px 4px 4px rgba(0,0,0,0.12),
                0px 8px 8px rgba(0,0,0,0.12), 
                0px 12px 12px rgba(0,0,0,0.12);
}

/*ANIMATIONS*/
@keyframes fade_in {
    0%{opacity: default;}
    100%{opacity: 1;}
}
@keyframes fade_out {
    0%{opacity: 1;}
    100%{opacity: default;}
}
@keyframes pulsating {
    0%{opacity: 1;}
    50%{opacity: 0.5;}
    100%{opacity: 1;}
}
@keyframes shift_up {
    0%{transform: translate(0%, 10%);}
    100%{transform: translate(0%, 0%);}
}