Site text and Design Updated

Styles/home.css

@@ -2,6 +2,10 @@
    font-family: "Nunito", "Times New Roman", Times, serif;
 }
 
+body {
+   overflow-x: hidden;
+}
+
 .content {
    transition: .2s;
 }
@@ -42,7 +46,7 @@ h3 {
    margin: .75rem 0 0 2rem;
 }
 
-p {
+.main-text p {
    margin: .5rem 2rem;
 }
 
@@ -70,6 +74,45 @@ a {
    color: var(--theme-color);
 }
 
+.content {
+   display: grid;
+   grid-template-columns: 70% calc(30% - 2em);
+   gap: 1em;
+}
+
+.main-text {
+   max-width: 900px;
+   transition: .2s;
+}
+
+.thoughts-preview {
+   padding-top: 8.5em;
+}
+
+.thoughts-preview a {
+   color: initial;
+   text-decoration: initial;
+}
+
+.thoughts-preview h2 {
+   margin: 0 0 .4em -.1em;
+   font-family: sans-serif;
+   opacity: .8;
+}
+
+.thoughts-preview h2:before {
+   display: none;
+}
+
+.thoughts-bit {
+   padding: .8em 0;
+   border-bottom: .1em solid #bbb;
+}
+
+.thoughts-bit.first-of-class {
+   border-top: .1em solid #bbb;
+}
+
 .thoughts {
    margin: 2rem 2rem 0 0;
    float: right;
@@ -116,6 +159,29 @@ a {
    animation-fill-mode: both;
 }
 
+@media only screen and (min-width: 1200px) {
+   .main-text, .thoughtsblock {
+      padding: 0 2rem 0 4rem;
+      line-height: 1.7rem;
+   }
+}
+
+@media only screen and (max-width: 700px) {
+   .content {
+      grid-template-columns: 100%;
+      margin-right: 0;
+      width: 100vw;
+   }
+   .thoughts-preview {
+      margin: 0 .6em;
+      padding: 1em 1.4em;
+      background-color: #dddddd20;
+      border-radius: .4em;
+      width: calc(100% - 2em);
+      box-sizing: border-box;
+   }
+}
+
 @media (prefers-color-scheme: dark) {
    .progress-parent {
       background-color: #444;
@@ -123,11 +189,9 @@ a {
    button {
       box-shadow: 0 .2rem .2rem #000;
    }
-}
-
-@media only screen and (min-width: 1200px) {
-   .content {
-     padding: 0 6rem;
-     line-height: 1.7rem;
+   @media only screen and (max-width: 700px) {
+      .thoughts-preview {
+         background-color: #77777720;
+      }
    }
 }

Styles/styles.css

@@ -27,6 +27,7 @@ a {
    color: #fff;
    border-bottom: solid .4rem var(--theme-color);
    font-family: "Nunito", "Times New Roman", Times, serif;
+   overflow: auto;
 }
 
 .footer h2 {
@@ -64,6 +65,12 @@ a {
    color: #bbb;
 }
 
+@media only screen and (max-width: 750px) {
+   .footer {
+      grid-template-columns: auto;
+   }
+}
+
 @media (prefers-color-scheme: dark) {
    .footer {
       background-color: #000;