html,
 body {
     margin: 0;
     padding: 0;
     height: 100%;
     overflow-x: hidden;
     overflow-y: scroll;
     scrollbar-width: none;
     background-color: #131211;
 }

 #header {
     position: absolute;
     z-index: 100;
     width: 100vw;
     height: 50px;
     /* rgb(242, 234, 227) -> #f2eae3 */
     border-bottom: 1px solid rgba(242, 234, 227, .25);
     /* rgb(19, 18, 17) -> #131211 */
     background-color: rgba(19, 18, 17, .75);
 }

 #marquee {
     position: absolute;
     z-index: 3;
     width: 500px;
     height: 300px;
     margin-left: 50px;
     margin-top: calc((100vh - 300px)/2);
     overflow: hidden;
     background-color: rgba(19, 18, 17, .5);
 }

 .marquee-item {
     padding: 20px;
     height: 1000px;
     color: #f2eae3;
     opacity: 0;
     transition: opacity 1s ease-out;
 }

 .marquee-item-title {
     font-family: n27-bold;
     font-size: 60px;
     line-height: 50px;
     padding-top: 20px;
     transition: padding-top 1s ease-out;
 }

 .marquee-item-description {
     margin-top: 20px;
     font-family: n27-regular;
     font-size: 20px;
 }

 #logo {
     position: absolute;
     margin-left: 15px;
     margin-top: 15px;
     height: 20px;
 }

 #landing {
     position: relative;
     width: 100vw;
     height: 100vh;
     display: flex;
     background-image: url("../images/landing.png");
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
     background-color: #131211;
 }

 #swarm-container {
     position: relative;
     width: 100vw;
     height: 100vh;
     display: flex;
     overflow: hidden;
     background-color: #131211;
 }

 #swarm-canvas {
     position: absolute;
     width: 100%;
     height: 100%;
 }

 #swarm-title {
     position: absolute;
     z-index: 2;
     width: 100%;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
     color: #f2eae3;
     font-family: n27-bold;
     font-size: 100px;
     line-height: 40px;
 }

 #swarm-instructions {
     font-family: n27-medium;
     font-size: 14px;
 }

 #contact {
     padding-top: 100px;
     padding-bottom: 100px;
     text-align: center;
     font-family: n27-light;
     font-size: 14px;
     color: #131211;
     background-color: #ff073a;
 }

 #contact a {
     font-family: n27-medium;
     text-decoration: none;
     color: #131211;
 }

 @media (max-width: 600px) {
     #marquee {
         width: 300px;
         height: 250px;
         margin-top: calc((100vh - 250px)/2);
     }

     .marquee-item-title {
         font-size: 40px;
         line-height: 35px;
     }

     .marquee-item-description {
         font-size: 14px;
     }
 }