fancies

main.css

@@ -40,6 +40,7 @@ h1 {
     background-image: url(https://www.state.gov/wp-content/uploads/2022/02/Kuwait-2323x1406.png);
     background-attachment: fixed;
     background-size: cover;
+    position: relative;
     /*clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 30% 100%, 0% 90%);*/
 }
 
@@ -59,6 +60,12 @@ h1 {
     box-sizing: border-box;
 }
 
+body {
+    /*display: grid;
+    grid-template-columns: var(--sidebar-size) auto;
+    grid-template-columns: var(--sidebar-size) auto;*/
+}
+
 .dropdown {
     background-color: aliceblue;
     padding: 10px;
@@ -91,6 +98,7 @@ h1 {
     display: flex;
     justify-content: center;
     align-items: center;
+    flex-direction: column;
 }
 
 h1 {
@@ -106,13 +114,14 @@ h1 {
     transition: background-color 0.3s, color 0.3s;
     top: 0px;
     left: 0px;
-    color: lightgreen;
-    /*margin-left: var(--sidebar-size);*/
-    width: calc(100vw); /*- var(--sidebar-size)*/
+    color: red;
+    /*margin-left: var(--sidebar-size);
+    width: calc(100vw - var(--sidebar-size));*/
+    width: 100vw;
 }
 
 #head-marker.scrolly-out + #headin > #links > * > *, #head-marker.scrolly-out + #headin > #links > * {
-    background-color: black;
+    /*background-color: black;*/
 }
 
 #outer {
@@ -177,4 +186,52 @@ a:hover {
     #headin {
         flex-direction: column;
     }
+}
+
+#carousel-inner > div {
+    width: max(15vw, 15vh);
+    height: max(15vw, 15vh);
+    background-size: cover;
+    background-position: center;
+    padding: max(2vw, 2vh);
+    box-sizing: border-box;
+    border-radius: 30px;
+    display: inline-block;
+    margin-left: 2%;
+    margin-right: 2%;
+}
+
+#carousel-outer {
+    --do-scroll: yes;
+    padding: 20px;
+    width: 100%;
+    box-sizing: border-box;
+    background-color: rgba(255, 125, 125, 0.8);
+}
+
+#carousel-outer:hover {
+    --do-scroll: no;
+}
+
+ /* Hide scrollbar for Chrome, Safari and Opera */
+ #carousel-inner::-webkit-scrollbar {
+     display: none;
+ }
+
+ /* Hide scrollbar for IE, Edge and Firefox */
+ #carousel-inner {
+     -ms-overflow-style: none;
+     /* IE and Edge */
+     scrollbar-width: none;
+     /* Firefox */
+ }
+
+#carousel-inner {
+    white-space: nowrap;
+    overflow-x: scroll;
+}
+
+h1 {
+    margin: 0 !important;
+    padding: 0 !important;
 }