Update style.css

static/style.css

@@ -716,3 +716,212 @@ footer a:hover { color: white; text-decoration: underline; }
 .content-card h2 {
   font-size: 1.5rem;
 }
+/* Reset some default styles for consistency */
+body, h1, p {
+    margin: 0;
+    padding: 0;
+}
+
+/* Create a container to hold the image and paragraph */
+.container {
+    display: flex;
+    margin-top:6%;
+    margin-left: 20%; 
+    
+    /* Vertically center the contents */
+    /*height: 100vh;*/
+}
+.container-fluid{
+    margin-left:10%;
+    margin-right:10%;
+}
+.circle{
+    background-color: black;
+    margin-left:25%;
+    width: 30px;
+    height:30px;
+    border-radius:50%;
+}
+.box{
+    margin-top:-10px ;
+    margin-left:26%;
+    width:10px;
+    border-radius: 30px 30px;
+    background-color: black;
+    
+}
+.arrow{
+    margin-top:-10px;
+    margin-left:26%;
+    height:12px;
+    width: 54%;
+    border-radius: 30px 30px 30px 30px;
+    background-color: black;
+    color:white;
+}
+.arr {
+    margin-left:80%;
+    width: 120px;
+  }
+  .line {
+    border-radius:10px;
+    margin-top:-48px;
+    margin-left:-10px;
+    width: 10px;
+    height: 80px;
+    background: black;
+    float: left;
+  }
+  
+  .point {
+    margin-left:-20px;
+    margin-top:24px;
+    rotate: 90deg;
+    width: 0;
+    height: 0;
+    border-top: 20px solid transparent;
+    border-bottom: 20px solid transparent;
+    border-left: 30px solid black;
+  }
+
+/* Create a container to hold the image and paragraph */
+/*.content {
+    /*width: 60%;*/ /* Set the content container to 60% of the screen width} */
+
+/* Style the image */
+.image {
+    width: 30%; /* Ensure the image does not exceed its container */
+}
+#imgshift{
+    margin-top:-80px;
+   
+}
+
+.circle1{
+    margin-top:0px;
+    margin-left:72%;
+    background-color: black;
+    width: 35px;
+    height:35px;
+    border-radius:50%;
+}
+.box1{
+    margin-top:-4px ;
+    margin-left:73%;
+    width:9px;
+    border-radius: 30px 30px 30px 30px;
+    background-color: black;
+    
+}
+.arrow1{
+    margin-top:-7px;
+    margin-left:13.7%;
+    height:12px;
+    width: 60%;
+    border-radius: 30px 30px 30px 30px;
+    background-color: black;
+    color:white;
+}
+.arr1 {
+    margin-left: 26.4%;    
+    width: 120px;
+  }
+.line1 {
+    border-radius:10px;
+    margin-top:-48px;
+    margin-left:-10px;
+    width: 10px;
+    height: 200px;
+    background: black;
+    float: left;
+  }
+
+  .line2 {
+    border-radius:10px;
+    margin-top:-48px;
+    margin-left:130px;
+    width: 10px;
+    height: 70px;
+    background: black;
+    float: left;
+  }
+  .line3 {
+    border-radius:10px;
+    margin-top:-48px;
+    margin-left:-162px;
+    width: 10px;
+    height: 70px;
+    background: black;
+    float: left;
+  }
+ 
+
+#shift{
+    margin-top:10%;
+}
+
+/* Style the paragraph */
+.first-para {
+    font-family: "Courier New", monospace; /* Use the Monotype Courier font */
+    font-size: 12pt;
+    color: black;
+    background-color: white;
+    padding: 20px; /* Add some padding for spacing */
+    margin-left: 20px;
+    text-align: left;
+}
+
+.second-para {
+    margin-top:-50px;
+    font-family: "Courier New", monospace; /* Use the Monotype Courier font */
+    font-size: 12pt;
+    color: black;
+    background-color: white;
+    padding: 20px; /* Add some padding for spacing */
+    margin-right: 20px;
+    text-align: right;
+}
+
+.third-para {
+    font-family: "Courier New", monospace; /* Use the Monotype Courier font */
+    font-size: 12pt;
+    color: black;
+    background-color: white;
+    padding: 20px; /* Add some padding for spacing */
+    margin-left: 20px;
+    text-align: left;
+}
+
+/* Style the enlarged text */
+.enlarge {
+    font-size: 16pt; /* Larger font size for the first four words */
+    font-weight: bold; /* Bold text */
+    font-style: italic; /* Italic text */
+}
+
+/* Style the black background paragraph */
+.black-bg-paragraph {
+    font-family: "Italian Typewriter Unicode", monospace; /* Use the Monotype Courier font */
+    background-color: black;
+    color: white;
+    padding: 20px;
+    margin-left: 20px;
+    margin-right: 20px;
+    text-align: left;
+}
+
+/* Style the white text within the black background paragraph */
+.fourth-para {
+    font-family: "Italian Typewriter Unicode", monospace;
+    font-size: 18pt; /* Font size for the white text */
+}
+
+.fifth-para {
+    font-family: "Courier New", monospace; /* Use the Monotype Courier font */
+    font-size: 12pt;
+    color: black;
+    background-color: white;
+    padding: 20px; /* Add some padding for spacing */
+    margin-left: 20px;
+    text-align: left;
+}