body {
  overflow: hidden;
  background-image: url('/images/BG.png');
  background-repeat: no-repeat;
  background-size: cover;
  overflow-y: scroll
}
.topBar{
    background: white;
    position: absolute;
    width: 70%;
    top:10%;
    left:15%;
    height: 5%;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    font-family: coolfont;
    align-items: center; 
    
}
.topBar a:hover{
    color: white;
    background: #6f9df2;
}
.topBar a{
    position: relative;
    margin: 10%;
    color: #6f9df2;
    background: white;
}
@font-face{
    font-family: awesomeFont;
    src: url(fonts/main1.ttf)
}
@font-face{
    font-family: coolfont;
    src: url(fonts/main2.otf)
}
.intro{
    position: absolute;
    width: 50%;
    height: 50%;
    left: 25%;
    top:25%;
    background: white;
    border-radius: 10px;
    text-align: center;
    font-family: coolfont;
}
.downhere{
    position: absolute;
    width: 100%;
    height: 200%;
    left: 0%;
    top:90%;
    background: white;
    border-radius: 10px;
    text-align: center;
    font-family: coolfont;
}
/* Target the whole scrollbar and set its width */
::-webkit-scrollbar {
  width: 12px;
}

/* Style the track (background) */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Style the thumb (draggable handle) */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Change thumb color on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
/* Target the whole scrollbar and set its width */
::-webkit-scrollbar {
  width: 12px;
}

/* Style the background*/
::-webkit-scrollbar-track {
  background: #ccffff;
}

/* Style the handle*/
::-webkit-scrollbar-thumb {
  background: #99e6e6;
  box-shadow: -1px -1px 0 #006699 inset;
}

/* Change thumb color on hover */
::-webkit-scrollbar-thumb:hover {
  background: #006699;
  box-shadow: -1px -1px 0 #99e6e6 inset;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.spinny_square {
  /* Keep the spinner visible during scroll for this effect */
  position: relative;
  width: 10%;
  height: 10%;
  /* Apply the animation and link it to the scroll timeline */
  animation: spin linear forwards; /* Use 'forwards' or 'both' fill-mode */
  animation-timeline: scroll();
}
#blue{
    background: #66ccff;
    top: 10%;
    left: 10%;
}
#red{
    background: #ff1aff;
    top: 40%;
    left: 80%;
}
.inspo{
    position: relative;
    width: 40%;
    left: 10%;
    display: flex;
}
.content{
    display: flex;
    height: 70%;
}
.highlight{
    background-color: DodgerBlue;
    color:SlateBlue;
}
.left_pannel{
    position: relative;
    width: 50%;
    overflow-y: scroll;
}
.right_pannel{
    width: 50%;
    height: 90%;
    overflow-y: scroll;
}