body,
 html {
     margin: unset;
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     overflow-x: hidden;
     scrollbar-width: none;
     font-family: "Rubik", sans-serif;
 }

 .outline {
     outline: 2px solid black;
 }

 .round {
     border-radius: 2em;
 }

 .spread {
     display: flex;
     justify-content: space-between;
 }

 .header {
     padding: 4px 1em;
     margin: 4px;
     background-color: #000000;
     /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
     border-radius: 4em;
 }

 footer {
     margin-top: 2em;
     background-color: #000000;
     color: white;
 }

 footer a {
     color: white;
     text-decoration: none;
 }

 .title {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .content {
     margin: 2px;
     display: flex;
     background-color: white;
     flex-grow: 1;

 }

 h1 {
     font-family: "Dela Gothic One", sans-serif;
     font-size: 2em;
     font-weight: 900;
     font-weight: 900;
     line-height: 0.9;
     letter-spacing: -1px;
     margin: unset;
 }

 p {
     font-family: "Rubik", sans-serif;
 }

 button {
     transition-duration: 0.1s;
     background-color: #000000;
     color: white;
     border: unset;
     border-radius: 24px;
     padding: 8px;
     font-family: "Rubik", sans-serif;
     font-style: italic;
     font-size: large;
     font-weight: 900;
     height: 40px;
 }

 button:hover {
     transition-duration: 0.15s;
     background-color: #007bff;
     color: #000000;
 }

 .panel-v {
     display: flex;
     flex-grow: 1;
     flex-shrink: 1;
     /* outline: 2px dashed red; */
     min-height: 1em;
     min-width: 1em;
     flex-direction: column;
 }

 .panel-h {
     display: flex;
     flex-grow: 1;
     flex-shrink: 1;
     /* outline: 2px solid red; */
     min-height: 1em;
     min-width: 1em;
     flex-direction: row;
 }

 .chip {
     border-radius: 16px;
     margin: 4px;
     padding: 4px;
 }

 .uni-support {
     background-color: lightblue;
 }

 .student-group {
     background-color: rgb(173, 230, 177);
 }

 .separator-v {
     flex-shrink: 0;
     height: 2px;
     margin: 0.5em;
     min-width: calc(100% - 0.5em);
     background-color: black;
 }

 .scroll {
     overflow: scroll;
 }

 .separator-h {
     flex-shrink: 0;
     min-height: calc(100% - 0.5em);
     width: 2px;
     margin: 0.5em;
     background-color: black;
 }



 .textbox {
     flex-grow: 0;
     flex-shrink: 1;
     padding: 0.4em;
     min-height: 1em;
     min-width: 1em;
     max-width: 30vw;
 }

 .startup-map {
     display: block;
     margin: 0;
     max-width: none;
     height: auto;
     width: 4000px;

 }

 .image-container {
     display: block;
     margin: 2em;
     max-width: 100vh;
     width: 100vh;
     height: 100vh;
     overflow: scroll;
     border-radius: 1em;
     border: 2px solid black;
     scrollbar-width: none;
 }

 nav {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 #scroller {
     width: 100vw;
     overflow-x: auto;
     white-space: nowrap;
     scroll-behavior: smooth;
     scrollbar-width: none;

     -webkit-mask-image: linear-gradient(to right, transparent 0px, black 100px, black calc(100% - 100px), transparent 100%);
     mask-image: linear-gradient(to right, transparent 0px, black 100px, black calc(100% - 100px), transparent 100%);

     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;

 }

 .item {
     display: inline-block;
     width: 300px;
     height: 100px;
     margin-right: 1.5em;
     text-align: center;
     line-height: 200px;
     font-size: 24px;
     border-radius: 10px;
 }


 /* nav a to target only nav*/
 nav a,
 h2 {
     margin: 0.5rem;
     text-decoration: none;
     color: white;
     font-family: "Rubik", sans-serif;
     font-style: italic;
     font-size: x-large;
     font-weight: 900;
     letter-spacing: -1px;
     font-optical-sizing: auto;
     font-style: bold;
     display: flex;
     text-transform: uppercase;
     transition-duration: 0.1s;
 }

 h2 {
     margin: unset;
     color: #000000;
 }

 a:hover {
     transition-duration: 0.15s;
     color: #007bff;
     letter-spacing: 0;
 }

 .center {
     display: flex;
     justify-content: center;
     justify-items: center;
     align-items: center;
     align-content: center;
 }

 .padding {
     padding: 0.4em;
 }

 .margin {
     margin: 0.25em;
 }

 .spacer {
     flex-grow: 10000;
     min-width: 1em;
     min-height: 1em;
 }