Upload Mia.css

resources/CSS/Mia.css

@@ -0,0 +1,165 @@
+/* Reset CSS */
+
+/* Body Styles */
+body {
+    background-color: #FFEBF0; /* Light pastel blue */
+    color: #fb7191; /* Darker pastel blue for text */
+    font-family: 'Press Start 2P', cursive;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: auto;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+/* Heading Styles */
+h1 {
+    font-size: 20px;
+    margin-bottom: 20px; /* Adds space between paragraphs */
+    line-height: 1.5; 
+}
+
+
+button:hover {
+    background-color: #FF85A2; /* Darker green on hover */
+}
+
+/* Arrow Icon Styles */
+.arrow-icon {
+    position: absolute;
+    top: 10px;
+    left: 30px;
+    cursor: pointer;
+}
+
+/* Audio Player Styles */
+#bg-music {
+    display: none; /* Hide the audio player */
+}
+
+/* Top-right Position Styles */
+.top-right {
+    position: absolute;
+    top: 5px;
+    right: 80px;
+}
+
+/* Play/Pause Button Icon Styles */
+.play-pause-btn {
+    color: #fff;
+    padding: 5px 10px;
+    margin-top: 10px;
+    border: none;
+    cursor: pointer;
+    border-radius: 4px;
+}
+
+.play-pause-btn:hover {
+    color: #FFEBF0; /* Pastel green */
+}
+
+.icon {
+    font-size: 20px;
+}
+
+/* Smooth Scroll Styles */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Section Styles */
+#section1,
+#section2 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: auto;
+    height: auto;
+    background-color: #FFEBF0; /* Light pastel blue */
+}
+
+/* Main Section Margin Styles */
+.main1 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 300px;
+    margin-bottom: 500px;
+}
+
+.main2 {
+    margin-top: 100px;
+    margin-bottom: 500px;
+}
+
+/* Button Styles */
+button {
+    font-family: 'Press Start 2P', cursive;
+    padding: 10px 20px;
+    margin-top: 20px;
+    font-size: 12px;
+    background-color: #fbbdcd; /* Pastel green */
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: #FF85A2; /* Darker green on hover */
+}
+
+.btn-group {
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    margin-top: 50px;
+}
+
+
+.btn-group:nth-child(1) {
+        margin-left: -200px;
+        background: #FF85A2;
+        }
+
+.btn-group:nth-child(2) {
+        margin-right: -200px;
+        background: white;
+        color: #FF85A2;
+        }
+
+textarea {
+    width: 100%;
+    height: 80px;
+    margin-bottom: 10px;
+}
+
+
+
+.picMia {
+    max-width: 300px;
+    display: block;
+    margin-top: 20px; /* Adjust as needed for top margin */
+    margin-bottom: 10px; /* Adjust as needed for bottom margin */
+
+}
+
+
+.message-container p {
+    text-align: center;
+    margin-bottom: 10px; /* Add some space between paragraphs */
+    margin-bottom: 20px; /* Adds space between paragraphs */
+    line-height: 2;
+}
+
+.yes-btn, .no-btn {
+    position: absolute;
+}
+