body {
  font-family: Arial;
  background: hsl(204 100% 5%);
}::-webkit-scrollbar {
  display: none; /* removes scroll bar */ 
}  

/* titles for each new section */
.animate-charcter {
  padding-top: 25vh;
  text-transform: uppercase;
  background-image: linear-gradient(
  -225deg,
  rgb(7, 9, 18), 
  rgb(17, 133, 192),
  hsl(100, 100%, 60%), 
  hsl(200 100% 60%), 
  hsl(100 100% 60%)
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  text-align:left;
  font-size: 16vmin;
}@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

.animate-charcter-2 {
  padding-left: 10vh;
  padding-top: 10vh;
  text-transform: uppercase;
  background-image: linear-gradient(
  -225deg,
  rgb(7, 9, 18), 
  rgb(17, 133, 192),
  hsl(100, 100%, 60%), 
  hsl(200 100% 60%), 
  hsl(100 100% 60%)
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  text-align:left;
  font-size: 10vmin;
} @keyframes textclip {
  to {
    background-position: 200% center;
  }
}


.indent {
  padding-left: 125px;
  text-align: left;
}

/* intro text */
.intro {
  color: white;
  min-block-size: 100vh;
  min-inline-size: 100%;
  padding: 5vmin;
  box-sizing: border-box;
  display: grid;
  place-content: center;
  font-family: system-ui;
  font-size: min(200%, 5vmin);
  padding-top:150px;
  
  
  
  
  /*  leverage cascade for cross-browser gradients  */
  background: radial-gradient(
  rgb(106, 117, 174), 
  rgb(17, 133, 192) 
  ) fixed;
  background: conic-gradient(
  hsl(101, 100%, 60%), 
  hsl(200 100% 60%), 
  hsl(100 100% 60%) 
  ) fixed;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
} 


h1{
  margin: 0;
  font-size: 10vmin;
  line-height: 1.1;
  max-inline-size: 15ch;
  margin: auto;
}

a {
  margin: 0;
  font-size: 4vmin;
  line-height: 1.1;
  max-inline-size: 15ch;
  margin: auto;
}



.text { 
  min-inline-size: 100%;
  color: white; 
  font-size: 5vmin;
  line-height: 1.3;
  max-inline-size: 50ch;
}

.panel { 
  min-block-size: 250vh;
}

.subsection {
  min-block-size: 50vh;
}
.subsection-last {
  min-block-size: 90vh;
}


.yes_border {
  fill: blueviolet;
  stroke: black;
  stroke-width: 5px;
}


.column {
  display: flex;
  flex-direction: row;
  
}

video {
  display: block;
  margin: auto;
}

/* First Visualization */
#column1 {
  width: 50%;
}

/* Second Visualization */
#column2 {
  width: 50%;
  text-align: center
}



.navbar { 
  display: block; 
  text-align: center;
  padding-bottom: 100px;
}

.enterSong {
  justify-content: center;
  display: flex;
}


.arrow {
  height: 5vw;
  width: 5vw;
  border-style: solid;
  border-color: white;
  border-width: 0px 1px 1px 0px;
  transform: rotate(45deg);
}


.arrows {
  padding-top: 100px;
  display: flex;
  justify-content: center;
  opacity: 12%;
};