Add files via upload

frontend-react/src/styles/style.css

+body{
+    background: url('recipe.jpeg');
+    margin: 0;
+}
+
+
+.main {
+    transition: margin 400ms cubic-bezier(0.17,0.04,0.03,0.94);
+    position: relative;
+    height: calc(100vh - 40px);
+    max-width: 900px;
+    margin: auto;
+    margin-top: 20px;
+    background-color: #d0d0d0;
+    border: 3px solid white;
+    border-radius: 30px;
+    overflow: hidden;
+}
+
+#sidebar {
+    background: linear-gradient(135deg, #be7819 0%, #fd8d00 100%);
+    position: absolute;
+    top: -250px;
+    left: 0;
+    width: 100%;
+    height: 250px;
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
+    transition: top 400ms cubic-bezier(0.17,0.04,0.03,0.94);
+    color: white;
+    font-family: 'Times New Roman';
+}
+
+.down_label {
+    display: block;
+    position: absolute;
+    right: 50px;
+    top: 0;
+    cursor: pointer;
+    background: #fd8d00;
+    width: 30px;
+    height: 20px;
+    border-radius: 0 0 5px 5px;
+    color: white;
+    font-size: 1em;
+    text-align: center;
+    cursor: pointer;
+    transition: all 400ms cubic-bezier(0.17,0.04,0.03,0.94);
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
+    padding: 10px;
+    z-index: 100;
+}
+
+
+.down_label:hover {
+    box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15)
+}
+
+
+.down_label:after, .down_button:checked + .down_label {
+    content: "=";
+    font-family: "Arial";
+}
+
+
+.down_button:checked ~ #sidebar {
+    top: 0
+}
+
+
+.down_button:checked ~ .down_label {
+    top: 250px;
+    background-color: #f1ed04;
+}
+
+
+.down_button:checked ~ .main {
+    margin-top: 300px
+}
+
+
+ul{
+    margin: 0;
+    padding: 0;
+    background: linear-gradient(135deg, #be7819 0%, #fd8d00 100%);
+    color: white;
+}
+li{
+    list-style-type: none;
+    display: inline-block;
+    color: inherit;
+}
+.bar{
+    margin-left: 30px;
+    padding: 8px;
+    border: none;
+    cursor: pointer;
+    background: none;
+    font-size: 1.3em;
+    color: inherit;
+    font-family: "Arial";
+}
+
+#home{
+    cursor: default;
+}
+.bar:hover{
+    transition: 0.3s;
+    background: #b5c7c3;
+}
+#dark_theme{
+    position: absolute;
+    right: 30px;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+#text{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+footer{
+    margin: 20px;
+    color: #5b5b5b;
+}
+
+.placeholder-white::placeholder {
+    color: white;
+}
+
+.msg_area{
+    position: absolute;
+    width: 100%;
+    height: calc(100% - 103px);
+    background-image: url("light.jpeg");
+    background-size: cover;
+    overflow: auto;
+}
+
+.msg_area.black{
+    background-image: url("dark.jpeg");
+}
+.header{
+    margin: auto;
+    padding: 10px;
+    text-align: center;
+    font-size: 1.5em;
+    color: rgb(255, 115, 0);
+    background: rgb(211, 170, 130);
+    border-bottom: 3px solid rgb(255, 255, 255);
+    border-top-left-radius: 30px;
+    border-top-right-radius: 30px;
+    font-family: 'Times New Roman', Times, serif;
+    font-size: 1.6em;
+}
+.refresh {
+    position: absolute;
+    top: 10px;
+    width: 30px;
+    height: 22px;
+    right: 20px;
+    border: none;
+    cursor: pointer;
+    appearance: none;
+    background-color: inherit;
+}
+.update {
+    position: absolute;
+    right: 0;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 30px;
+    height: 22px;
+    transition: .2s;
+}
+.update.hover {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    opacity: 0;
+    transition: opacity .2s;
+}
+.refresh:hover .update.hover {
+    opacity: 1;
+    transform: rotate(180deg);
+}
+.refresh:hover .update {
+    opacity: 0;
+    transform: rotate(180deg);
+}
+.left_message{
+    display: flex;
+    max-width: 80%;
+    margin-left: 20px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    word-wrap: break-word;
+}
+.right_message{
+    display: flex;
+    max-width: 80%;
+    flex-direction: row-reverse;
+    margin: 20px 20px 20px auto;
+    word-wrap: break-word;
+}
+
+.msg{
+    min-width: 100px;
+    padding: 10px 10px 15px 10px;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+    word-wrap: break-word;
+
+}
+.msg.left{
+    margin-left: 10px;
+    border-bottom-right-radius: 10px;
+    background: linear-gradient(135deg, #d7a858 0%, #ca7b47 100%);
+}
+.msg.right{
+    margin-right: 10px;
+    border-bottom-left-radius: 10px;
+    color: white;
+    background: linear-gradient(135deg, #d7a858 0%, #ca7b47 100%);
+}
+.mes_info{
+    display: flex;
+    margin-bottom: 5px;
+    margin-left: 6px;
+    font-weight: bold;
+    font-size: 1.2em;
+}
+.mes_header{
+    margin-right: 6px;
+    max-width: 60%;
+}
+.mes_time{
+    margin: auto 1px 5px auto;
+    font-size: 0.5em;
+}
+
+.mes_text{
+    margin-left: 6px;
+    font-size: 1em;
+}
+
+
+@media (min-width: 992px){
+    .msg_area{
+        height: calc(100% - 101px);
+    }
+}
+
+.icon{
+    width: 50px;
+    height: 50px;
+    min-width: 50px;
+    margin: auto 0 0 0;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    background-image: url(person1.png);
+    border-radius: 50%;
+}
+
+.icon.left{
+    background-image: url("person.png")
+}
+
+
+.header_bottom{
+    position: absolute;
+    display: flex;
+    width: 100%;
+    height: 50px;
+    bottom: 0;
+    background: rgb(211, 170, 130);
+    border-top: 3px solid white;
+    border-bottom-left-radius: 30px;
+    border-bottom-right-radius: 30px;
+}
+#input_area{
+    display: flex;
+    width: 60%;
+    flex: 1;
+    margin: 8px 3px 8px 11px;
+    padding: 2px 2px 2px 10px;
+    border: none;
+    border-radius: 5px 5px 5px 15px;
+    font-size: 1.3em;
+    height: auto;
+    overflow-y: auto;
+    resize: none;
+}
+.send_button{
+    width: 60px;
+    margin: 8px 8px 8px 3px;
+    cursor: pointer;
+    border: none;
+    border-radius: 5px 5px 15px 5px;
+    color: #ffffff;
+    background-color: #d89a4e;
+    transition-duration: 0.3s;
+    overflow: hidden;
+    text-align: center;
+}
+.send_button:hover{
+    background-color: #ffffff;
+}
+
+footer{
+    margin-top: 0;
+    margin-bottom: 5px;
+    margin-left: 20px;
+    color: #000000;
+}
+
+@media (max-width: 767px) {
+    .mes_text{
+        font-size: 2em;
+    }
+    .mes_info{
+        font-size: 2.5em;
+    }
+    .msg_area{
+        height: calc(100% - 93px);
+    }
+    .header{
+        padding: 5px;
+    }
+    .refresh{
+        top: 5px;
+    }
+    .bar {
+        padding: 6px;
+        margin-left: 10px;
+        font-size: 0.8em;
+    }
+
+    #dark_theme {
+        right: 10px;
+        top: 0.3px;
+    }
+
+    #text{
+        font-size: 0.8em;
+    }
+
+}
\ No newline at end of file