create new styling for desktops

resources/js/components/BottomFleur.vue

@@ -10,6 +10,10 @@
 img {
     z-index: 100;
     padding: 0;
+    max-width: 553px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 20px;
     background: var(--background-color);
     background: linear-gradient(0deg, var(--background-color) 0%, var(--background-color) 80%, rgba(255, 255, 255, 0) 100%);
 }

resources/js/components/TopFleur.vue

@@ -15,9 +15,14 @@
 }
 div {
     width: 100%;
+    max-width: 662px;
     padding: 15px;
     position: sticky;
     top: 0;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 20px;
+
     background: var(--background-color);
     z-index: 100;
     background: linear-gradient(180deg, var(--background-color) 0%, var(--background-color) 80%, rgba(255, 255, 255, 0) 100%);

resources/js/components/Wish.vue

@@ -55,7 +55,7 @@ function openWish() {
                         <div class="large-text-title z-index-normal" :style="'color: hsl(' + wish.color + ', 20%, 50%);'">
                             Lorem Ipsum
                         </div>
-                        <div class="z-index-normal">
+                        <div class="z-index-normal" style="text-align: left;">
                             {{ wish.title }}
                         </div>
                     </div>
@@ -101,7 +101,7 @@ img.cursor{
 .large-container {
     display: absolute;
     height: 100px;
-    margin: 10px;
+    margin: 20px;
 }
 .large-absolute {
     display: absolute;
@@ -109,6 +109,7 @@ img.cursor{
 }
 .large-text-title {
     text-transform: uppercase;
+    text-align: left;
     font-size: 2.3vh;
     margin-top: 15px;
 }
@@ -124,6 +125,7 @@ img.cursor{
 .large-text {
     display: flex;
     font-size: 2vh;
+    text-align: center;
     flex-direction: column;
     margin-left: 15px;
     margin-bottom: 15px;