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;
+    width: 360px;
-    height: 560px;
+    height: 660px;
-    padding: 20px;
+    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: auto; 
-    margin-top: 2rem;
+    top: 50%; 
+    left: 50%; 
+    transform: translate(-50%, -50%); 
     overflow: hidden;
     background-color: #adc4f0;
-    border: 1px solid #1E33FAff;
+    border: 1px solid #1E33FA;
-    color: #1E33FAff;
+    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,14 +119,15 @@ body {
     font-size: 20px;
     position: fixed;
     padding: 25px;
-    right: 5px;
+    right: 20px;
-    top: 5px;
+    top: 20px;
     text-align: center;
     cursor: pointer;
     border: none;
     background: transparent;
+    z-index: 9999;
 }
-  
+
 #mute-btn:hover {
  color:#FCF6F1ff;
  background-color:#1E33FAff;

backplaces/pie/styles.css

@@ -5,35 +5,51 @@
     font-size: 18px;
     margin: 0;
     padding: 0;
-    }
+}
     
-    .content {
+.content {
-    margin: 40px;
+    margin: 1rem auto; 
-    flex-wrap: wrap;
-    justify-content: center;
     max-width: 1000px;
-    position: relative;
+    display: flex;
-    }
+    flex-wrap: wrap;
+    justify-content: center; 
+
+}
     
-    .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;
+        align-self: flex-start;
-    position: static;
+        position: static;
-    right: 0;
+        right: 0;
-    text-align: left;
+        text-align: left;
     }
     
     .content-item img {
     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;
+    top: -44px;
-    left: 70px;
+    left: 80px;
-    width: 80px;
+    width: 100px;
     height: auto;
     opacity: 1;
     }
@@ -99,8 +114,8 @@
     font-size: 20px;
     position: fixed;
     padding: 25px;
-    right: 5px;
+    right: 20px;
-    top: 5px;
+    top: 20px;
     text-align: center;
     cursor: pointer;
     border: none;
@@ -114,64 +129,77 @@
     }
     
     @media only screen and (max-width: 767px) {
-    body {
+        body {
-        font-size: 18px;
+            font-size: 1rem;
-    }
+        }
+            
+        #about {
+            position: absolute;
+            top: 10px;
+            left: 40px;
+            width: 70px;
+            height: auto;
+            z-index: 1000;
+            opacity: 1;
+        }
         
-    #about {
+        #home {
-        position: absolute;
+            position: absolute;
-        top: 10px;
+            top: 20px;
-        left: 40px;
+            left: 20px;
-        width: 70px;
+            width: 70px;
-        height: auto;
+            height: auto;
-        z-index: 1000;
+            opacity: 1;
-        opacity: 1;
+        }
-    }
+        
-    
+        .content-item {
-    #home {
+            font-size: 1rem;
-        position: absolute;
+            width: 100%;
-        top: 20px;
+            line-height: 25px;
-        left: 20px;
+        }
-        width: 70px;
+        .content-item > * {
-        height: auto;
+            width: 60%;
-        opacity: 1;
+        }
-    }
+           
-    
+        .content-item p {
-    .content-item {
+            margin: 10px 0;
-        width: 100%;
+            font-family: 'Redaction-Regular';
-        line-height: 25px;
+            line-height: 24px;
-    }
+            font-size: 1rem;
-    
+            width: 200px; 
-    .content-item:first-of-type img {
+    
-        margin-top: 100px;
+        .content-item:first-of-type img {
-    }
+            margin-top: 100px;
-    
+        }
-    .content-item:last-child {
+        
-        margin-bottom: 200px;
+        .content-item:last-child {
-    }
+            margin-bottom: 200px;
-    
+        }
-    .content-item:nth-child(odd) {
+        
-        align-self: flex-end;
+        .content-item:nth-child(odd) {
-        /* margin-left: 50px; */
+            align-self: flex-end;
-        text-align: right;
+            text-align: right;
-    }
+        }
-    .content-item:nth-child(even) {
+        
-        align-items: flex-start;
+        .content-item:nth-child(even) {
-        margin-right: 50px;
+            align-items: flex-start;
-    }
+            margin-right: 50px;
-    .letterBox {
+        }
-        font-size: 16px;
+        
-        padding: 18px;
+        .letterBox {
-        max-width: 70%;
+            font-size: 16px;
-        border-radius: 10px;
+            padding: 18px;
-        overflow: hidden;
+            max-width: 70%;
-        border: 1px solid black;
+            border-radius: 10px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
-        display: flex;
+            border: 1px solid black;
-        flex-wrap: wrap;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        justify-content: right;
+            display: flex;
-        z-index: 1000;
+            flex-wrap: wrap;
-        margin: auto;
+            justify-content: right;
-        margin-top: 110px;
+            z-index: 1000;
-    }
+            margin: auto;
-    }
+            margin-top: 110px;
+        }
+    }
+}   

backplaces/sunrise/styles.css

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