things work on mobile now

main.css

@@ -33,7 +33,7 @@ h1 {
 
 #header {
     text-align: center;
-    padding-top: 10%;
+    padding-top: 6%;
     padding-bottom: 10%;
     min-height: 80vh;
     box-sizing: border-box;
@@ -94,12 +94,16 @@ body {
 }
 
 #headin {
-    padding-bottom: 2%;
+    padding: 20px;
     display: flex;
     justify-content: center;
     align-items: center;
-    padding-top: 2%;
     z-index: 10000000;
+    box-sizing: border-box;
+}
+
+#hambugha + label {
+    display: none;
 }
 
 h1 {
@@ -112,6 +116,7 @@ h1 {
 
 #head-marker.scrolly-out + #headin {
     position: fixed;
+    justify-content: space-between;
     transition: background-color 0.3s, color 0.3s;
     top: 0px;
     left: 0px;
@@ -119,6 +124,7 @@ h1 {
     margin-left: var(--sidebar-size);
     width: calc(100vw - var(--sidebar-size));
     /*width: 100vw;*/
+    background-color: white;
 }
 
 #head-marker.scrolly-out + #headin > #links > * > *, #head-marker.scrolly-out + #headin > #links > * {
@@ -161,15 +167,14 @@ body:not(.sidebar-opened) > #sider-outer > #sider > img {
     left: 0px;
     padding-left: 10px;
     background-color: red;
-    border-radius: 20px;
     padding: 20px;
+    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
 }
 
 #sider > img {
     position: absolute;
     right: 10px;
     top: 50%;
-    transform: translateY(-50%);
     width: 20px;
 }
 
@@ -219,12 +224,6 @@ a:hover {
     color: darkgreen;
 }
 
-@media (max-width: 1000px) {
-    #headin {
-        flex-direction: column;
-    }
-}
-
 .carousel > div {
     min-width: max(15vw, 15vh);
     min-height: max(15vw, 15vh);
@@ -301,4 +300,129 @@ h1 {
 
 .carousel-outer > img:last-child {
     right: 2vw;
+    text-align: center;
+}
+
+.image-relational-scrolling {
+    display: flex;
+    justify-content: space-between;
+}
+
+.image-relational-scrolling > div:last-child > p:last-child {
+    padding-bottom: 25vh;
+}
+
+.image-relational-scrolling > div:last-child > p {
+    padding-bottom: 75px;
+    max-width: 600px;
+}
+
+.image-relational-scrolling > div:first-child {
+    min-width: 30vw;
+    max-width: 30vw;
+    box-sizing: border-box;
+    position: sticky;
+    top: calc(25vh);
+    left: 0px;
+    overflow: hidden;
+    align-self: flex-start;
+}
+
+.image-relational-scrolling > div:first-child > img {
+    width: 100%;
+    height: 0px;
+    box-sizing: border-box;
+    position: relative;
+    opacity: 0%;
+    transition: opacity 200ms;
+    position: absolute;
+}
+
+.image-relational-scrolling > div:first-child > img.selected {
+    opacity: 100%;
+    height: auto;
+    position: initial;
+}
+
+#footer {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    justify-content: space-evenly;
+    background-color: black;
+}
+
+#footer > p {
+    padding: 2em;
+    color: white;
+}
+
+#truebottom {
+    background-color: black;
+    text-align: center;
+    padding: 5px;
+    color: white;
+    font-size: 0.7em;
+}
+
+.image-relational-scrolling > div:last-child > p > img {
+    display: none;
+    max-width: 100%;
+}
+
+@media (max-width: 900px) {
+    #footer {
+        grid-template-columns: 1fr;
+    }
+
+    .image-relational-scrolling > div:first-child {
+        display: none;
+    }
+
+    .image-relational-scrolling > div:last-child > p > img {
+        display: initial;
+        padding: 3em;
+        box-sizing: border-box;
+    }
+
+    .image-relational-scrolling {
+        display: flex;
+        justify-content: center;
+    }
+
+    #hambugha + label {
+        display: inline-block;
+        background-color: aliceblue;
+        padding: 10px;
+        margin: 10px;
+        margin-bottom: 0px;
+    }
+
+    #hambugha + label:hover {
+        background-color: grey;
+    }
+
+    #links {
+        display: flex;
+        visibility: hidden;
+        flex-direction: column;
+        height: 0px;
+    }
+
+    #links-outer {
+        display: flex;
+        flex-direction: column;
+    }
+
+    #links > div:nth-child(2n) {
+        display: none;
+    }
+
+    #links > div:nth-child(2n - 1):hover + div, #links > div:nth-child(2n):hover {
+        display: inline-block;
+        visibility: visible;
+    }
+
+    #hambugha:checked + label + #links {
+        visibility: visible;
+    }
 }