styiling bckplcs

backplaces/css/style_index.css

@@ -53,6 +53,8 @@ body {
   flex-direction: column;
   align-items: center;
   padding-left: 6rem;
+  padding-right: 2rem;
+  margin-top: -20px;
   text-decoration: none;
 }
 
@@ -203,6 +205,10 @@ body {
 
   }
 
+  .img-container {
+     padding: 0;
+  }
+
   .photos img {
     margin: 20px;
     margin-top: 20px;

backplaces/hermit/styles.css

@@ -17,17 +17,17 @@ body {
     position: absolute;
     background-color:  #f9b0c5;
     color: #1E33FAff;
-    font-size: 20px;
+    font-size: 1.4rem;
     border: 1px solid  #1E33FAff;
     border-radius: 5px;
-    width: 300px;
-    height: 560px;
-    padding: 20px;
+    width: 360px;
+    height: 660px;
+    padding: 30px;
     transition: 0.25s;
     cursor: pointer;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     z-index: 0;
-    /* margin-top: 150px; */
+    margin-top: 150px;
 }
 
 .card.top {
@@ -69,20 +69,24 @@ body {
 }
 
 .letterBox {
+    position: fixed;
     font-size: 18px;
     padding: 20px;
     margin: auto; 
-    margin-top: 2rem;
+    top: 50%; 
+    left: 50%; 
+    transform: translate(-50%, -50%); 
     overflow: hidden;
     background-color: #adc4f0;
-    border: 1px solid #1E33FAff;
-    color: #1E33FAff;
+    border: 1px solid #1E33FA;
+    border-radius: 5px;
+    color: #1E33FA;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     display: flex;
     flex-wrap: wrap;
     justify-content: right;
     max-width: 70%;
-    z-index: 1000; 
+    z-index: 9999; 
 }
 
 .letterContents {
@@ -115,12 +119,13 @@ body {
     font-size: 20px;
     position: fixed;
     padding: 25px;
-    right: 5px;
-    top: 5px;
+    right: 20px;
+    top: 20px;
     text-align: center;
     cursor: pointer;
     border: none;
     background: transparent;
+    z-index: 9999;
 }
 
 #mute-btn:hover {

backplaces/pie/styles.css

@@ -8,20 +8,31 @@
 }
     
 .content {
-    margin: 40px;
+    margin: 1rem auto; 
+    max-width: 1000px;
+    display: flex;
     flex-wrap: wrap;
     justify-content: center; 
-    max-width: 1000px;
-    position: relative;
+
 }
     
-    .content-item {width: 100%;display: flex;flex-direction: column;}
+ .content-item {
+        max-width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+}
     
     .content-item > * {
-        width: 50%;
+        max-width: 60%;
     }
     
-    .content-item:nth-child(odd)  > *  {align-self: flex-end;text-align: right;float: right;}
+    .content-item:nth-child(odd)  > *  {
+        align-self: flex-end;
+        text-align: right;
+        float: right;
+    }
     .content-item:nth-child(even) > *  {
         align-self: flex-start;
         position: static;
@@ -33,7 +44,12 @@
     height: auto;
     }
     
-    .content-item p {margin: 10px 0;font-family: 'Redaction-Regular';line-height: 24px;font-size: 18px;/* width: 200px; */}
+    .content-item p {
+        margin: 10px 0;
+        font-family: 'Redaction-Regular';
+        line-height: 2rem;
+        font-size: 1.5rem;
+    }
     
     p::selection {
     color: #ee98b1;
@@ -43,7 +59,7 @@
     position: relative;
     top: 40px;
     left: 40px;
-    width: 100px;
+    width: 130px;
     height: auto;
     opacity: 1;
     }
@@ -65,7 +81,6 @@
     justify-content: right;
     z-index: 1000;
     margin: auto;
-    /* margin-top: 150px; */
     }
     
     .letterContents {
@@ -81,9 +96,9 @@
     
     #about {
     position: relative;
-    top: -30px;
-    left: 70px;
-    width: 80px;
+    top: -44px;
+    left: 80px;
+    width: 100px;
     height: auto;
     opacity: 1;
     }
@@ -99,8 +114,8 @@
     font-size: 20px;
     position: fixed;
     padding: 25px;
-    right: 5px;
-    top: 5px;
+    right: 20px;
+    top: 20px;
     text-align: center;
     cursor: pointer;
     border: none;
@@ -115,7 +130,7 @@
     
     @media only screen and (max-width: 767px) {
         body {
-        font-size: 18px;
+            font-size: 1rem;
         }
             
         #about {
@@ -138,9 +153,20 @@
         }
         
         .content-item {
+            font-size: 1rem;
             width: 100%;
             line-height: 25px;
         }
+        .content-item > * {
+            width: 60%;
+        }
+           
+        .content-item p {
+            margin: 10px 0;
+            font-family: 'Redaction-Regular';
+            line-height: 24px;
+            font-size: 1rem;
+            width: 200px; 
     
         .content-item:first-of-type img {
             margin-top: 100px;
@@ -152,13 +178,14 @@
         
         .content-item:nth-child(odd) {
             align-self: flex-end;
-        /* margin-left: 50px; */
             text-align: right;
         }
+        
         .content-item:nth-child(even) {
             align-items: flex-start;
             margin-right: 50px;
         }
+        
         .letterBox {
             font-size: 16px;
             padding: 18px;
@@ -175,3 +202,4 @@
             margin-top: 110px;
         }
     }
+}   

backplaces/sunrise/styles.css

@@ -14,8 +14,8 @@ body {
   color: #e26d3f;
   position: fixed;
   padding: 25px;
-  right: 5px;
-  top: 5px;
+  right: 20px;
+  top: 20px;
   text-align: center;
   cursor: pointer;
   border: none;