Added Search-Tips functionality into the _search-bar.scss file

Author: Donovan Vernon

_sass/elements/_search-bar.scss

@@ -53,4 +53,84 @@ form#search-bar {
     padding: 0;
     margin: 0;
     border: none;
-}
+}
+
+// Further instructions for search-bar functionality using a modal.
+.search-tip-link {
+    text-decoration: underline;
+    cursor: pointer;
+    display: block;
+    margin: 10px 0;
+    padding: 10px 0;
+    border-top: solid 1px #cccccc;
+}
+
+
+// page
+.search-tip-card{
+    padding: 45px;
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    overflow: visible;
+}
+
+.search-tip-card-top{
+    display: flex;
+}
+
+.search-tip-card-title{
+    display: flex;
+    justify-content: space-between;
+}
+
+.search-tip-card-name{
+    font-size: 19px;
+    line-height: 22px;
+}
+
+
+//modal overlay
+.overlay {
+    display: none;
+    z-index: 1;
+    position: fixed;
+    left: 0px;
+    top: 0px;
+    width: calc(100vw + 17px);
+    height: 100%;
+    background-color: rgba(70, 70, 70, 0.5);
+    padding: 10px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.top-buffer{
+    height: 20vh;
+}
+.bottom-buffer {
+    height: 5vh;
+}
+.search-tip-modal-container{
+    position: absolute;
+    width: 60%;
+    left: 20%;
+}
+.overlay-close-icon {
+    float: right;  
+    padding: 20px 20px 0 0; 
+    cursor: pointer;
+}
+.center-screen {
+    opacity: 1;
+}
+.overlay-card-text{
+    padding-top: 40px;
+}
+
+@media screen and (max-width: 768px) {
+    .search-tip-modal-container {
+        width: 90%;
+        left: 5%;
+    }
+}