-
-
+
+
+
diff --git a/style.css b/style.css
index 62933a2..8ab1913 100644
--- a/style.css
+++ b/style.css
@@ -1,36 +1,20 @@
:root {
- --main-background-color: black;
- --main-invert-color: white;
+ --main-background-color: white;
+ --main-text-color: black;
--main-highlight-color: cyan;
}
body {
background-color: var(--main-background-color);
- display: flex;
color: --main-invert-color;
-}
-
-.dialog {
- height: 200px;
- width: 400px;
- background-color: var(--main-invert-color);
- position: relative;
- border-radius: 10%;
display: flex;
- text-align: center;
+ flex-direction: column;
}
-.left-point {
- width: 0;
- height: 0;
- border-left: 1rem solid transparent;
- border-right: 1rem solid transparent;
- border-top: 5rem solid var(--main-invert-color);
- position: absolute;
- margin-top: 30%;
- margin-left: -10%;
- transform: rotate(60deg) ;
- z-index: -1;
+main {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
}
.text-bubble {
@@ -42,13 +26,41 @@ body {
z-index: 2;
}
+.dialog {
+ height: 200px;
+ width: 400px;
+ background-color: var(--main-background-color);
+ position: relative;
+ border-radius: 10%;
+ display: flex;
+ text-align: center;
+ border: 1px solid black;
+}
+
+.left-point {
+ width: 0;
+ height: 0;
+ border-left: 1rem solid transparent;
+ border-right: 1rem solid transparent;
+ border-top: 5rem solid black;
+ position: absolute;
+ margin-top: 30%;
+ margin-left: -10%;
+ transform: rotate(60deg) ;
+ z-index: -1;
+}
+
+.shifted {
+ transform:rotate(60deg) translate(0px,-2px);
+ border-top: 5rem solid white;
+ z-index: 4;
+}
+
+
+
.speech {
z-index: 3;
margin: auto;
position: relative;
text-align: justify;
}
-
-.to-center {
- margin: 0 auto;
-}