Introduction
Act 1.
diff --git a/style.css b/style.css
index 6d9faca..79aa573 100644
--- a/style.css
+++ b/style.css
@@ -20,31 +20,6 @@ body {
box-sizing: border-box;
}
-.container {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- position: absolute;
- bottom: 0;
- left: 70px;
- margin-bottom: 70px;
-}
-
-h1 {
- font-family: 'Platypi-Bold', serif;
- font-size: 50px;
- max-width: 20%;
- margin: 0;
-}
-
-.container h2 {
- font-family: 'Platypi-Regular', serif;
- font-size: 40px;
- max-width: 30%;
- margin: 0;
- margin-bottom: -0.5rem;
-}
-
.content-list {
max-width: 633px;
margin: auto;
@@ -64,52 +39,65 @@ h1 {
filter: saturate(2);
}
-#row1, #row2 {
- width: 100%;
+.container {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ margin: 200px 0;
+}
+
+h1 {
+ font-family: 'Platypi-Bold', serif;
+ font-size: 50px;
+ max-width: 20%;
+ margin: 0;
}
+.container h2 {
+ font-family: 'Platypi-Regular', serif;
+ font-size: 40px;
+ max-width: 30%;
+ margin: 0;
+ margin-bottom: -0.5rem;
+}
-#content{
+#content {
font-size: 22px;
line-height: 1.7rem;
max-width: 633px;
margin: auto;
margin-right: 0;
- margin-top: 430px;
- margin-bottom: 200px;
+ margin-top: -100px;
}
-#content p{
+#content p {
margin-left: 25mm;
}
-#content h1{display: none;}
-#content h2, #content h3{
+#content h1 {display: none;}
+#content h2, #content h3 {
text-decoration: underline;
text-align: center;
}
-#content strong{
- position: absolute;
- margin-left: -44mm;
- width: 44mm;
+#content strong {
+ position: absolute;
+ margin-left: -44mm;
+ width: 44mm;
}
-
-
-@keyframes wiggle{
- 25%{
- transform: scale(0.8,1.3);
+@keyframes wiggle {
+ 25% {
+ transform: scale(0.8, 1.3);
}
- 50%{
- transform: scale(1.1,0.8);
+ 50% {
+ transform: scale(1.1, 0.8);
}
- 75%{
- transform: scale(0.7,1.2);
+ 75% {
+ transform: scale(0.7, 1.2);
}
}
-
.content-list a:hover img,
.content-list img:hover {
animation: wiggle 0.6s infinite;
@@ -118,38 +106,60 @@ h1 {
@media (max-width: 768px) {
body {
- font-size: 21px;
- line-height: 1.5rem;
- padding: 0 50px;
+ font-size: 21px;
+ line-height: 1.5rem;
+ padding: 0 50px;
}
.container {
- margin-left: -20px;
- line-height: 2rem;
+ margin-left: -20px;
+ line-height: 2rem;
+ margin: 20px 0; /* Adjusted for mobile */
}
.container h1 {
- font-size: 30px;
- max-width: 200px;
+ font-size: 30px;
+ max-width: 200px;
}
.container h2 {
- font-size: 20px;
- max-width: 70px;
+ font-size: 20px;
+ max-width: 70px;
}
.content-list {
max-width: 90%;
margin-top: 30px;
margin-right: -20px;
-
}
.content-list img {
- width: 25px;
+ width: 25px;
}
- .about {
- padding: 20px;
+ #content {
+ font-size: 15px;
+ line-height: 1.2rem;
+ max-width: -webkit-fill-available;
+ margin: auto;
+ margin-right: 0;
+ margin-top: 50px;
+ }
+
+ #content p {
+ width: 220px;
+ margin-left: 20mm;
+ }
+
+ #content h1 {display: none;}
+ #content h2, #content h3 {
+ text-decoration: underline;
+ text-align: center;
}
-}
\ No newline at end of file
+
+ #content strong {
+ position: absolute;
+ margin-left: -20mm;
+ width: 14mm;
+ }
+}