body{
  background-color:black;
  overflow-x: hidden;
}
::selection{
  background-color: blue;
  color: #DFE138;
}

/********FONTS************/
@font-face {
  font-family: "Heming";
  src: url(assets/font/HemingVariable.ttf);
  font-weight: 300;
}

h1{
  font-family: "Heming", monospace;
  font-weight: 400;
  font-style: normal;
  font-size: 70px;
  margin: 0%;
  text-align: center;
}
h2{
  font-family: "Heming";
  font-weight: 400;
  font-size: 45px;
  margin: 0%;
  margin-bottom: 2vh;
}
h3{
  font-family: "Heming";
  font-size: 30px;
  font-weight: 300;
  margin: 0%;
}
h4{
  font-family: "Heming";
  font-size: 25px;
  margin: 0%;
}
h5{
  font-family: "Heming";
  font-size: 25px;
  font-weight: 700;
  margin: 0%;
  letter-spacing: 1.5px;
}
p{
  font-size: 20px;
}
.yellowText{
  color: #DFE138;
}
.redText{
  color: #E14729;
}
.orangeText{
  color: #F37F26;
}
.greenText{
  color: #88EE22;
}
.cyanText{
  color: #00F0FF;
}
.whiteText{
  color: white;
}





/********ANIMATION************/

@keyframes fadeOut {
  from {
      opacity: 1;
  }
  to {
      opacity: 0;
  }
}



/********FILTERS************/
.ethnicity-filter-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row;
  align-items: center; /* Vertical centering */
  justify-content: center; /* Horizontal centering */
  margin: 0;
  /* margin-top: 3vw; */
  margin-left: 1vw;
  margin-right: 1vw;
  gap: 4vw;
}
.filter-page-row{
  display: flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  margin:0px;
  gap:4vw; 
}
.filter-circle{
  border-radius: 50%;
  border: 2px solid #DFE138;
  width: 18vw;
  height: 18vw;
  min-width: 250px;
  min-height: 250px;
  background-color: black;
  color: #DFE138;
}
.filter-circle:hover {
  color: black;
  opacity: 1;
  background-color: #DFE138;
}

@media screen and (min-width: 2000px) {
  .filter-circle{
    min-width: 400px;
    min-height: 400px;
  }
  .filter-page-row h3{
    font-size: 40px;
  }
  .filterpage-title h1{
    font-size: 120px;
    line-height: 120px;
  }
  .ethnicity-title h1{
    font-size: 120px;
    line-height: 120px;
  }
}
@media screen and (max-width: 1100px) {
  .ethnicity-filter-bar{
    flex-direction: column;
  }
  .filter-circle{
    width: 20vw;
    height: 20vw;
  }
}
@media screen and (max-width: 900px) {
  .ethnicity-filter-bar h3{
    font-size: 25px;
  }
  .filterpage-title h1{
    font-size: 50px;
    line-height: 50px;
  }
  .ethnicity-title h1{
    font-size: 50px;
    line-height: 50px;
  }
  .ethnicity-filter-bar{
    flex-direction: column;
  }
}
@media screen and (max-width: 600px) {
  .filter-circle{
    min-width: 180px;
    min-height: 180px;
  }
  .filter-page-row h3{
    font-size: 20px;
  }
}
@media screen and (max-width: 440px) {
  .filter-circle{
    min-width: 150px;
    min-height: 150px;
  }
  .filter-page-row h3{
    font-size: 18px;
  }
}


/********Title************/
.filterpage-title{
  position: absolute;
  align-self: center;
  width: 80%;
  text-align: center;
  margin: 0% auto;
  margin-top: 2vh;
  left: 0; 
  right: 0;
}
.ethnicity-title{
  width: 80%;
  margin: auto;
  margin-top: 2%;
  position: absolute;
  margin: 0% auto;
  margin-top: 1vw;
  left: 0; 
  right: 0;
  bottom: 2vh;
}
.title{
  align-self: center;
  width: 80%;
  margin: auto;
  text-align: center;
  margin-top: 0.5%;
  margin-bottom: 2%;
  z-index: -4;
}

.bar{
  display: flex;
  flex-direction:row;
  justify-content:space-between;
  align-items: flex-start;
  margin-left:1vw;
  margin-right:1vw;
  margin-top: 2vh;
  top: 0;
  text-align:center;
  gap: 20px;
}

.ethnicityW{
  text-decoration: none;
  background-color: none;
  color: #00F0FF;
}
.ethnicityH{
  text-decoration: none;
  background-color: none;
  color: #88EE22;
  z-index: 101;
}
.ethnicityAPI{
  text-decoration: none;
  background-color: none;
  color: #E14729;
  z-index: 101;
}
.ethnicityB{
  text-decoration: none;
  background-color: none;
  color: #F37F26;
  z-index: 101;
}
.row{
  display: flex;
  flex-direction:row;
  gap: 10px;
}
.box{
  height: 20px;
  width: 20px;
  border-radius: 50%;
}
.whiteBox{
  background-color: white;
}
.greenBox{
  background-color: #88EE22;
}
.orangeBox{
  background-color: #F37F26;
}
.redBox{
  background-color: #E14729;
}
.cyanBox{
  background-color: #00F0FF;
}





/********FILTERS BUTTON************/
.filter-bar{
  display: flex;
  position:fixed;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  bottom:2vh;
  margin:0px;
  margin-left:1vw;
  margin-right:1vw;
  left:0px;
  right:0px;
  padding:0px 10px 0px;
  z-index: 10;
}
.filterButton{
  color:black;
  background-color: lightgrey;
  opacity: 0.9;
  width: 10%;
  height:30px;
  border: none;
  padding-top:4px
}
.filterButton:hover {
  opacity: 1;
}
.orangeButton:hover{
  background-color: #F37F26;
}
.orangeButtonClicked{
  background-color: #F37F26;
}
.redButton:hover{
  background-color: #E14729;
}
.redButtonClicked{
  background-color: #E14729;
}
.cyanButton:hover{
  background-color: #00F0FF;
}
.cyanButtonClicked {
  background-color: #00F0FF;
}
.greenButton:hover{
  background-color: #88EE22;
}
.greenButtonClicked {
  background-color: #88EE22;
}



/********W-CONTAINER************/
#w-circle-container2011{
  position: relative;
  margin-top: -450px;
  display: block;
  z-index:-1;
  animation: fadeIn 2s ease forwards;
}
#w-circle-container2012{
  position: relative;
  margin-top: -450px;
  display:none;
  animation: fadeIn 2s ease forwards;
}
#w-circle-container2013{
  position: relative;
  margin-top: -450px;
  display:none;
  animation: fadeIn 2s ease forwards;
}
#w-circle-container2014{
  position: relative;
  margin-top: -450px;
  display:none;
  animation: fadeIn 2s ease forwards;
}
#w-circle-container2015{
  position: relative;
  margin-top: -450px;
  display:none;
  animation: fadeIn 2s ease forwards;
}
#w-circle-container2016{
  position: relative;
  margin-top: -450px;
  display:none;
  animation: fadeIn 2s ease forwards;
}
#w-circle-container2017{
  position: relative;
  margin-top: -450px;
  display:none;
  animation: fadeIn 2s ease forwards;
}
#w-circle-container2018{
  position: relative;
  margin-top: -450px;
  display:none;
  animation: fadeIn 2s ease forwards;
}
#w-circle-container2019{
  position: relative;
  margin-top: -450px;
  display:none;
  animation: fadeIn 2s ease forwards;
}







/********CIRCLE************/
.hidden{
  display: none;
}
.expanded {
  transform: scale(1.3);
  min-height: 30vw;
  min-width: 30vw;
  max-height: 30vw;
  max-width: 30vw;
}
.white-circle{
  border: 2px solid white;
  color: white;
}
.white-circle:hover {
  background-color: white!important;
  color: black!important;
}
.yellow-circle{
  border: 2px solid #DFE138;
  color: #DFE138;
}
.yellow-circle:hover {
  background-color: #DFE138!important;
  color: black!important;
}
.green-circle{
  border: 2px solid #88EE22;
  color: #88EE22;
}
.green-circle:hover {
  background-color: #88EE22!important;
  color: black!important;
}
.orange-circle{
  border: 2px solid #F37F26;
  color: #F37F26;
}
.orange-circle:hover {
  background-color: #F37F26!important;
  color: black!important;
}
.cyan-circle{
  border: 2px solid #00F0FF;
  color: #00F0FF;
}
.cyan-circle:hover {
  background-color: #00F0FF!important;
  color: black!important;
}
.red-circle{
  border: 2px solid #E14729;
  color: #E14729;
}
.red-circle:hover {
  background-color: #E14729!important;
  color: black!important;
}



/* Adjust the hover effect for non-expanded circles */
.white-circle:hover:not(.is-expanded) {
  background-color: white;
  color: black;
}

.yellow-circle:hover:not(.is-expanded) {
  background-color: #DFE138;
  color: black;
}

.green-circle:hover:not(.is-expanded) {
  background-color: #88EE22;
  color: black;
}

.orange-circle:hover:not(.is-expanded) {
  background-color: #F37F26;
  color: black;
}

.cyan-circle:hover:not(.is-expanded) {
  background-color: #00F0FF;
  color: black;
}

.red-circle:hover:not(.is-expanded) {
  background-color: #E14729;
  color: black;
}








.circle1 {
  border-radius: 50%;
  width: 32vw;
  height: 32vw;
  text-align: center;
  display: flex; 
  justify-content: center; 
  align-items: center;
  flex-direction: column;
  transition: all 0.2s ease;
}
.circle1-position1{
  position: absolute;
  top: 655px;
  left: 34vw;
}
.circle1-position2{
  position: absolute;
  top: 1240px;
  left: 34vw;
}
.circle2 {
  border-radius: 50%;
  width: 29vw;
  height: 29vw;
  text-align: center;
  display: flex; 
  justify-content: center; 
  align-items: center;
  flex-direction: column;
  transition: all 0.2s ease;
}
.circle2-position1{
  position: absolute;
  top: 530px;
  left: 4vw;
}
.circle2-position2{
  position: absolute;
  top: 1410px;
  left: 3.5vw;
}



.circle3 {
  border-radius: 50%;
  width: 26vw;
  height: 26vw;
  text-align: center;
  display: flex; 
  justify-content: center; 
  align-items: center;
  flex-direction: column;
  transition: all 0.2s ease;
}
.circle3-position1{
  position: absolute;
  top: 550px;
  left: 68vw;
}
.circle3-position2{
  position: absolute;
  top: 1440px;
  left: 67vw;
}


.circle4 {
  border-radius: 50%;
  width: 23vw;
  height: 23vw;
  text-align: center;
  display: flex; 
  justify-content: center; 
  align-items: center;
  flex-direction: column;
  transition: all 0.2s ease;
}
.circle4-position1{
  position: absolute;
  top: 1020px;
  left: 63.5vw;
}
.circle4-position2{
  position: absolute;
  top: 1790px;
  left: 49.5vw;
}


.circle5 {
  border-radius: 50%;
  width: 20vw;
  height: 20vw;
  text-align: center;
  display: flex; 
  justify-content: center; 
  align-items: center;
  flex-direction: column;
  transition: all 0.2s ease;
}
.circle5-position1{
  position: absolute;
  top: 1050px;
  left: 16.5vw;
}
.circle5-position2{
  position: absolute;
  top: 1915px;
  left: 74vw;
}


.circle6 {
  border-radius: 50%;
  width: 17vw;
  height:17vw;
  text-align: center;
  display: flex; 
  justify-content: center; 
  align-items: center;
  flex-direction: column;
  transition: all 0.2s ease;
}
.circle6-position1{
  position: absolute;
  top: 1020px;
  left: -2vw;
}
.circle6-position2{
  position: absolute;
  top: 1780px;
  left: 29.5vw;
}


.circle7 {
  border-radius: 50%;
  width: 15vw;
  height: 15vw;
  text-align: center;
  display: flex; 
  justify-content: center; 
  align-items: center;
  flex-direction: column;
  transition: all 0.2s ease;
}
.circle7-position1{
  position: absolute;
  top: 960px;
  left: 87vw;
}
.circle7-position2{
  position: absolute;
  top: 1942px;
  left: 14vw;
}


.circle8 {
  border-radius: 50%;
  width: 13vw;
  height: 13vw;
  text-align: center;
  display: flex; 
  justify-content: center; 
  align-items: center;
  flex-direction: column;
  transition: all 0.2s ease;
}
.circle8-position1{
  position: absolute;
  top: 450px;
  left: 31vw;
}
.circle8-position2{
  position: absolute;
  top: 1900px;
  left: 0vw;
}


.circle9 {
  border-radius: 50%;
  width: 11vw;
  height: 11vw;
  text-align: center;
  display: flex; 
  justify-content: center; 
  align-items: center;
  flex-direction: column;
  transition: all 0.2s ease;
}
.circle9-position1{
  position: absolute;
  top: 500px;
  left: 57.5vw;
}
.circle9-position2{
  position: absolute;
  top: 1280px;
  left: 86vw;
}


.circle10 {
  border-radius: 50%;
  width: 7vw;
  height: 7vw;
  text-align: center;
  display: flex; 
  justify-content: center; 
  align-items: center;
  flex-direction: column;
  flex-direction: column;
  transition: all 0.2s ease;
}
.circle10-position1{
  position: absolute;
  top: 460px;
  left: 2vw;
}
.circle10-position2{
  position: absolute;
  top: 1340px;
  left: 2vw;
}



.filterButton:hover {
  cursor: pointer;
}





/********OUTPUT CONTAINER************/
#w-output-container{
  width: 100vw;
  height: 100%;
  margin-top: -2vh;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: -5px;
  margin-top: 180px;
}







@media screen and (min-width: 1800px) {
  .unknown-circle{
    border: 2px solid blue;
    color: blue;
  }
  .circle1-position1{
    position: absolute;
    top: 680px;
    left: 33vw;
  }
  .circle2-position1{
    position: absolute;
    top: 530px;
    left: 4vw;
  }
  .circle3-position1{
    position: absolute;
    top: 520px;
    left: 65vw;
  }
  .circle4-position1{
    position: absolute;
    top: 1025px;
    left: 63vw;
  }
  .circle5-position1{
    position: absolute;
    top: 1080px;
    left: 15vw;
  }
  .circle6-position1{
    position: absolute;
    top: 1030px;
    left: -3vw;
  }
  .circle7-position1{
    position: absolute;
    top: 925px;
    left: 86vw;
  }
  .circle8-position1{
    position: absolute;
    top: 460px;
    left: 31.5vw;
  }
  .circle9-position1{
    position: absolute;
    top: 490px;
    left: 54vw;
  }
  .circle10-position1{
    position: absolute;
    top: 440px;
    left: 3vw;
  }
  .circle1-position2{
    position: absolute;
    top: 1300px;
    left: 35vw;
  }
  .circle2-position2{
    position: absolute;
    top: 1470px;
    left: 4.5vw;
  }
  .circle3-position2{
    position: absolute;
    top: 1460px;
    left: 68vw;
  }
  .circle4-position2{
    position: absolute;
    top: 1875px;
    left: 51.5vw;
  }
  .circle5-position2{
    position: absolute;
    top: 1950px;
    left: 77vw;
  }
  .circle6-position2{
    position: absolute;
    top: 1860px;
    left: 30vw;
  }
  .circle7-position2{
    position: absolute;
    top: 2020px;
    left: 15vw;
  }
  .circle8-position2{
    position: absolute;
    top: 1960px;
    left: 0.5vw;
  }
  .circle9-position2{
    position: absolute;
    top: 1245px;
    left: 87vw;
  }
  .circle10-position2{
    position: absolute;
    top: 1360px;
    left: 5vw;
  }
}

/* ------------------------------------------------------------------------ */
@media screen and (max-width: 1500px) {
  .unknown-circle{
    border: 2px solid blue;
    color: blue;
  }
  .circle1-position1{
    position: absolute;
    top: 640px;
    left: 33vw;
  }
  .circle2-position1{
    position: absolute;
    top: 510px;
    left: 4vw;
  }
  .circle3-position1{
    position: absolute;
    top: 520px;
    left: 65vw;
  }
  .circle4-position1{
    position: absolute;
    top: 935px;
    left: 63vw;
  }
  .circle5-position1{
    position: absolute;
    top: 955px;
    left: 15vw;
  }
  .circle6-position1{
    position: absolute;
    top: 920px;
    left: -3vw;
  }
  .circle7-position1{
    position: absolute;
    top: 845px;
    left: 86vw;
  }
  .circle8-position1{
    position: absolute;
    top: 460px;
    left: 31.5vw;
  }
  .circle9-position1{
    position: absolute;
    top: 490px;
    left: 54.5vw;
  }
  .circle10-position1{
    position: absolute;
    top: 440px;
    left: 3vw;
  }
  .circle1-position2{
    position: absolute;
    top: 1140px;
    left: 35vw;
  }
  .circle2-position2{
    position: absolute;
    top: 1270px;
    left: 4.5vw;
  }
  .circle3-position2{
    position: absolute;
    top: 1290px;
    left: 68vw;
  }
  .circle4-position2{
    position: absolute;
    top: 1605px;
    left: 51.5vw;
  }
  .circle5-position2{
    position: absolute;
    top: 1690px;
    left: 76vw;
  }
  .circle6-position2{
    position: absolute;
    top: 1590px;
    left: 30vw;
  }
  .circle7-position2{
    position: absolute;
    top: 1720px;
    left: 15vw;
  }
  .circle8-position2{
    position: absolute;
    top: 1680px;
    left: 0.5vw;
  }
  .circle9-position2{
    position: absolute;
    top: 1145px;
    left: 86vw;
  }
  .circle10-position2{
    position: absolute;
    top: 1190px;
    left: 5vw;
  }
}

@media screen and (max-width: 1350px) {
  .unknown-circle{
    border: 2px solid cyan;
    color: cyan;
  }
  .circle1-position1{
    position: absolute;
    top: 640px;
    left: 33vw;
  }
  .circle2-position1{
    position: absolute;
    top: 510px;
    left: 4vw;
  }
  .circle3-position1{
    position: absolute;
    top: 520px;
    left: 65vw;
  }
  .circle4-position1{
    position: absolute;
    top: 890px;
    left: 63.5vw;
  }
  .circle5-position1{
    position: absolute;
    top: 915px;
    left: 15vw;
  }
  .circle6-position1{
    position: absolute;
    top: 875px;
    left: -3vw;
  }
  .circle7-position1{
    position: absolute;
    top: 810px;
    left: 86vw;
  }
  .circle8-position1{
    position: absolute;
    top: 470px;
    left: 32vw;
  }
  .circle9-position1{
    position: absolute;
    top: 500px;
    left: 54vw;
  }
  .circle10-position1{
    position: absolute;
    top: 440px;
    left: 3vw;
  }
  .circle1-position2{
    position: absolute;
    top: 1090px;
    left: 37vw;
  }
  .circle2-position2{
    position: absolute;
    top: 1205px;
    left: 6.5vw;
  }
  .circle3-position2{
    position: absolute;
    top: 1210px;
    left: 70.5vw;
  }
  .circle4-position2{
    position: absolute;
    top: 1530px;
    left: 50vw;
  }
  .circle5-position2{
    position: absolute;
    top: 1570px;
    left: 75vw;
  }
  .circle6-position2{
    position: absolute;
    top: 1500px;
    left: 31.5vw;
  }
  .circle7-position2{
    position: absolute;
    top: 1615px;
    left: 16.5vw;
  }
  .circle8-position2{
    position: absolute;
    top: 1570px;
    left: 2.5vw;
  }
  .circle9-position2{
    position: absolute;
    top: 1070px;
    left: 87vw;
  }
  .circle10-position2{
    position: absolute;
    top: 1115px;
    left: 8.5vw;
  }
}

@media screen and (max-width: 1200px) {
  .title h1{
    font-size: 70px;
    line-height: 70px;
  }
  .unknown-circle{
    border: 1.5px solid green;
    color: green;
  }
  .white-circle{
    border: 1.5px solid white ;
  }
  .circle1-position1{
    position: absolute;
    top: 610px;
    left: 33vw;
  }
  .circle2-position1{
    position: absolute;
    top: 480px;
    left: 4.5vw;
  }
  .circle3-position1{
    position: absolute;
    top: 490px;
    left: 64vw;
  }
  .circle4-position1{
    position: absolute;
    top: 825px;
    left: 64vw;
  }
  .circle5-position1{
    position: absolute;
    top: 840px;
    left: 14.5vw;
  }
  .circle6-position1{
    position: absolute;
    top: 795px;
    left: -3.5vw;
  }
  .circle7-position1{
    position: absolute;
    top: 740px;
    left: 85.5vw;
  }
  .circle8-position1{
    position: absolute;
    top: 455px;
    left: 33vw;
  }
  .circle9-position1{
    position: absolute;
    top: 480px;
    left: 53vw;
  }
  .circle10-position1{
    position: absolute;
    top: 430px;
    left: 3vw;
  }
  .circle1-position2{
    position: absolute;
    top: 1005px;
    left: 37.5vw;
  }
  .circle2-position2{
    position: absolute;
    top: 1100px;
    left: 7vw;
  }
  .circle3-position2{
    position: absolute;
    top: 1105px;
    left: 71vw;
  }
  .circle4-position2{
    position: absolute;
    top: 1380px;
    left: 53vw;
  }
  .circle5-position2{
    position: absolute;
    top: 1425px;
    left: 78vw;
  }
  .circle6-position2{
    position: absolute;
    top: 1370px;
    left: 31.5vw;
  }
  .circle7-position2{
    position: absolute;
    top: 1465px;
    left: 16vw;
  }
  .circle8-position2{
    position: absolute;
    top: 1420px;
    left: 2vw;
  }
  .circle9-position2{
    position: absolute;
    top: 980px;
    left: 87vw;
  }
  .circle10-position2{
    position: absolute;
    top: 1000px;
    left: 7.5vw;
  }
  .bar h5{
    font-size:18px;
  }
  .box{
    height: 15px;
    width: 15px;
  }
  .filter-bar h4{
    font-size: 20px;
  }
  .filterButton{
    width: 10%;
    height:25px;
  }
  .circle1 h2,
  .circle2 h2,
  .circle3 h2,
  .circle4 h2,
  .circle5 h2,
  .circle6 h2,
  .circle7 h2,
  .circle8 h2,
  .circle9 h2,
  .circle10 h2{
    font-size: 32px;
  }
  .circle1 h3,
  .circle2 h3,
  .circle3 h3,
  .circle4 h3,
  .circle5 h3,
  .circle6 h3,
  .circle7 h3,
  .circle8 h3,
  .circle9 h3,
  .circle10 h3{
    font-size: 25px;
  }
  .circle1 h4,
  .circle2 h4,
  .circle3 h4,
  .circle4 h4,
  .circle5 h4,
  .circle6 h4,
  .circle7 h4,
  .circle8 h4,
  .circle9 h4,
  .circle10 h4{
    font-size: 20px;
  }
  .title h1{
    font-size: 60px;
  }
}

@media screen and (max-width: 1050px) {
  .title h1{
    font-size: 70px;
    line-height: 70px;
  }
  .unknown-circle{
    border: 1.5px solid orange;
    color: orange;
  }
  .white-circle{
    border: 1.5px solid white;
  }
  .circle1-position1{
    position: absolute;
    top: 590px;
    left: 33vw;
  }
  .circle2-position1{
    position: absolute;
    top: 470px;
    left: 4.5vw;
  }
  .circle3-position1{
    position: absolute;
    top: 480px;
    left: 64vw;
  }
  .circle4-position1{
    position: absolute;
    top: 775px;
    left: 64vw;
  }
  .circle5-position1{
    position: absolute;
    top: 790px;
    left: 14vw;
  }
  .circle6-position1{
    position: absolute;
    top: 750px;
    left: -4vw;
  }
  .circle7-position1{
    position: absolute;
    top: 700px;
    left: 85.5vw;
  }
  .circle8-position1{
    position: absolute;
    top: 450px;
    left: 33.3vw;
  }
  .circle9-position1{
    position: absolute;
    top: 475px;
    left: 52.9vw;
  }
  .circle10-position1{
    position: absolute;
    top: 420px;
    left: 3vw;
  }
  .circle1-position2{
    position: absolute;
    top: 947px;
    left: 37vw;
  }
  .circle2-position2{
    position: absolute;
    top: 1020px;
    left: 6vw;
  }
  .circle3-position2{
    position: absolute;
    top: 1025px;
    left: 71vw;
  }
  .circle4-position2{
    position: absolute;
    top: 1300px;
    left: 48vw;
  }
  .circle5-position2{
    position: absolute;
    top: 1320px;
    left: 73vw;
  }
  .circle6-position2{
    position: absolute;
    top: 1270px;
    left: 30vw;
  }
  .circle7-position2{
    position: absolute;
    top: 1345px;
    left: 14vw;
  }
  .circle8-position2{
    position: absolute;
    top: 1300px;
    left: 0vw;
  }
  .circle9-position2{
    position: absolute;
    top: 905px;
    left: 87.5vw;
  }
  .circle10-position2{
    position: absolute;
    top: 950px;
    left: 7vw;
  }
}

@media screen and (max-width: 900px) {
  .unknown-circle{
    border: 1.5px solid pink;
    color: pink;
  }
  .circle1-position1{
    position: absolute;
    top: 580px;
    left: 33vw;
  }
  .circle2-position1{
    position: absolute;
    top: 480px;
    left: 4.5vw;
  }
  .circle3-position1{
    position: absolute;
    top: 480px;
    left: 64.5vw;
  }
  .circle4-position1{
    position: absolute;
    top: 735px;
    left: 64.5vw;
  }
  .circle5-position1{
    position: absolute;
    top: 755px;
    left: 14vw;
  }
  .circle6-position1{
    position: absolute;
    top: 720px;
    left: -4vw;
  }
  .circle7-position1{
    position: absolute;
    top: 670px;
    left: 85.5vw;
  }
  .circle8-position1{
    position: absolute;
    top: 450px;
    left: 33.3vw;
  }
  .circle9-position1{
    position: absolute;
    top: 475px;
    left: 52.9vw;
  }
  .circle10-position1{
    position: absolute;
    top: 440px;
    left: 3vw;
  }
  .circle1-position2{
    position: absolute;
    top: 880px;
    left: 37vw;
  }
  .circle2-position2{
    position: absolute;
    top: 948px;
    left: 6vw;
  }
  .circle3-position2{
    position: absolute;
    top: 950px;
    left: 70.5vw;
  }
  .circle4-position2{
    position: absolute;
    top: 1180px;
    left: 48.5vw;
  }
  .circle5-position2{
    position: absolute;
    top: 1200px;
    left: 73vw;
  }
  .circle6-position2{
    position: absolute;
    top: 1170px;
    left: 30vw;
  }
  .circle7-position2{
    position: absolute;
    top: 1225px;
    left: 13.5vw;
  }
  .circle8-position2{
    position: absolute;
    top: 1180px;
    left: 0vw;
  }
  .circle9-position2{
    position: absolute;
    top: 855px;
    left: 87.5vw;
  }
  .circle10-position2{
    position: absolute;
    top: 880px;
    left: 7vw;
  }
  .circle1 h2,
  .circle2 h2,
  .circle3 h2,
  .circle4 h2,
  .circle5 h2,
  .circle6 h2,
  .circle7 h2,
  .circle8 h2,
  .circle9 h2,
  .circle10 h2{
    font-size: 24px;
  }
  .circle1 h4,
  .circle2 h4,
  .circle3 h4,
  .circle4 h4,
  .circle5 h4,
  .circle6 h4,
  .circle7 h4,
  .circle8 h4,
  .circle9 h4,
  .circle10 h4{
    font-size: 12px;
  }
  .circle1 h3,
  .circle2 h3,
  .circle3 h3,
  .circle4 h3,
  .circle5 h3,
  .circle6 h3,
  .circle7 h3,
  .circle8 h3,
  .circle9 h3,
  .circle10 h3{
    font-size: 25px;
  }
}

@media screen and (max-width: 750px) {
  .circle1-position1{
    position: absolute;
    top: 580px;
    left: 33vw;
  }
  .circle2-position1{
    position: absolute;
    top: 490px;
    left: 4.5vw;
  }
  .circle3-position1{
    position: absolute;
    top: 500px;
    left: 64.5vw;
  }
  .circle4-position1{
    position: absolute;
    top: 715px;
    left: 64.5vw;
  }
  .circle5-position1{
    position: absolute;
    top: 720px;
    left: 14vw;
  }
  .circle6-position1{
    position: absolute;
    top: 690px;
    left: -4vw;
  }
  .circle7-position1{
    position: absolute;
    top: 660px;
    left: 85.5vw;
  }
  .circle8-position1{
    position: absolute;
    top: 480px;
    left: 33.3vw;
  }
  .circle9-position1{
    position: absolute;
    top: 495px;
    left: 52.9vw;
  }
  .circle10-position1{
    position: absolute;
    top: 455px;
    left: 3vw;
  }
  .circle1-position2{
    position: absolute;
    top: 835px;
    left: 37vw;
  }
  .circle2-position2{
    position: absolute;
    top: 885px;
    left: 6vw;
  }
  .circle3-position2{
    position: absolute;
    top: 895px;
    left: 71vw;
  }
  .circle4-position2{
    position: absolute;
    top: 1080px;
    left: 48.5vw;
  }
  .circle5-position2{
    position: absolute;
    top: 1100px;
    left: 73vw;
  }
  .circle6-position2{
    position: absolute;
    top: 1060px;
    left: 30vw;
  }
  .circle7-position2{
    position: absolute;
    top: 1120px;
    left: 13.5vw;
  }
  .circle8-position2{
    position: absolute;
    top: 1080px;
    left: 0vw;
  }
  .circle9-position2{
    position: absolute;
    top: 810px;
    left: 87.5vw;
  }
  .circle10-position2{
    position: absolute;
    top: 830px;
    left: 7vw;
  }
  .circle1 h2,
  .circle2 h2,
  .circle3 h2,
  .circle4 h2,
  .circle5 h2,
  .circle6 h2,
  .circle7 h2,
  .circle8 h2,
  .circle9 h2,
  .circle10 h2{
    font-size: 28px;
  }
  .circle1 h3,
  .circle2 h3,
  .circle3 h3,
  .circle4 h3,
  .circle5 h3,
  .circle6 h3,
  .circle7 h3,
  .circle8 h3,
  .circle9 h3,
  .circle10 h3{
    font-size: 20px;
  }
  .circle1 h4,
  .circle2 h4,
  .circle3 h4,
  .circle4 h4,
  .circle5 h4,
  .circle6 h4,
  .circle7 h4,
  .circle8 h4,
  .circle9 h4,
  .circle10 h4{
    font-size: 15px;
  }
}


/* ------------------------------------------------------------------------ */

/* CHANGE LAYOUT */
@media screen and (max-width: 700px) {
  .unknown-circle{
    border: 1.5px solid pink;
    color: pink;
  }
  .bar {
    gap: 20px;
  }
  .title h1{
    font-size: 60px;
    line-height: 60px;
  }
  .circle1 {
    width: 64vw;
    height: 64vw;
  }
  .circle2 {
    width: 59vw;
    height: 59vw;
  }
  .circle3 {
    width: 54vw;
    height: 54vw;
  }  
  .circle4 {
    width: 49vw;
    height: 49vw;
  }
  .circle5 {
    width: 44vw;
    height: 44vw;
  }
  .circle6 {
    width: 39vw;
    height: 39vw;
  }
  .circle7 {
    width: 34vw;
    height: 34vw;
  }
  .circle8 {
    width: 29vw;
    height: 29vw;
  }
  .circle9 {
    width: 24vw;
    height: 24vw;
  }
  .circle10 {
    width: 19vw;
    height: 19vw;
  }
  .circle1-position1{
    position: absolute;
    top: 560px;
    left: 44vw;
  }
  .circle2-position1{
    position: absolute;
    top: 1220px;
    left: 37vw;
  }
  .circle3-position1{
    position: absolute;
    top: 990px;
    left: -10vw;
  }
  .circle4-position1{
    position: absolute;
    top: 1390px;
    left: -12vw;
  }
  .circle5-position1{
    position: absolute;
    top: 1760px;
    left: -10vw;
  }
  .circle6-position1{
    position: absolute;
    top: 690px;
    left: 2vw;
  }
  .circle7-position1{
    position: absolute;
    top: 1010px;
    left: 76vw;
  }
  .circle8-position1{
    position: absolute;
    top: 470px;
    left: 21vw;
  }
  .circle9-position1{
    position: absolute;
    top: 1020px;
    left: 47vw;
  }
  .circle10-position1{
    position: absolute;
    top: 550px;
    left: 0vw;
  }

  .circle1-position2{
    position: absolute;
    top: 1750px;
    left: 37vw;
  }
  .circle2-position2{
    position: absolute;
    top: 2090px;
    left: -7vw;
  }
  .circle3-position2{
    position: absolute;
    top: 2500px;
    left: 17vw;
  }
  .circle4-position2{
    position: absolute;
    top: 2220px;
    left: 55vw;
  }
  .circle5-position2{
    position: absolute;
    top: 2830px;
    left: 53vw;
  }
  .circle6-position2{
    position: absolute;
    top: 2840px;
    left: -4vw;
  }
  .circle7-position2{
    position: absolute;
    top: 2580px;
    left: 75vw;
  }
  .circle8-position2{
    position: absolute;
    top: 2500px;
    left: -13vw;
  }
  .circle9-position2{
    position: absolute;
    top: 1600px;
    left: 80vw;
  }
  .circle10-position2{
    position: absolute;
    top: 1630px;
    left: 37vw;
  }
  .filter-bar{
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
  }
  .filterButton{
    color:black;
    background-color: lightgray;
    opacity: 0.9;
    width: 10%;
    min-width: 16%;
    border: none;
    padding-top:4px
  }
  .expanded{
    transform: scale(1.5);
    min-height: 64vw;
    min-width: 64vw;
    max-height: 64vw;
    max-width: 64vw;
    left: 20%;
  }
  .circle1 h2,
  .circle2 h2,
  .circle3 h2,
  .circle4 h2,
  .circle5 h2,
  .circle6 h2,
  .circle7 h2,
  .circle8 h2,
  .circle9 h2,
  .circle10 h2{
    font-size: 45px;
  }
  .circle1 h3,
  .circle2 h3,
  .circle3 h3,
  .circle4 h3,
  .circle5 h3,
  .circle6 h3,
  .circle7 h3,
  .circle8 h3,
  .circle9 h3,
  .circle10 h3{
    font-size: 30px;
  }
  .circle1 h4,
  .circle2 h4,
  .circle3 h4,
  .circle4 h4,
  .circle5 h4,
  .circle6 h4,
  .circle7 h4,
  .circle8 h4,
  .circle9 h4,
  .circle10 h4{
    font-size: 25px;
  }
  .filter-bar h4{
    font-size: 18px;
  }
  .redButtonClicked {
    background-color: #E14729;
  }
  .greenButtonClicked {
    background-color: #88EE22;
  }
  .orangeButtonClicked {
    background-color: #F37F26;
  }
  .cyanButtonClicked {
    background-color: #00F0FF;
  }
  .filterButton{
    min-width: 16%;
  }
}



@media screen and (max-width: 600px) {
  .unknown-circle{
    border: 1.5px solid blue;
    color: blue;
  }
  .title h1{
    font-size: 60px;
    line-height: 60px;
  }
  .circle1-position1{
    position: absolute;
    top: 560px;
    left: 44vw;
  }
  .circle2-position1{
    position: absolute;
    top: 1140px;
    left: 36vw;
  }
  .circle3-position1{
    position: absolute;
    top: 930px;
    left: -10vw;
  }
  .circle4-position1{
    position: absolute;
    top: 1270px;
    left: -15vw;
  }
  .circle5-position1{
    position: absolute;
    top: 1580px;
    left: -10vw;
  }
  .circle6-position1{
    position: absolute;
    top: 675px;
    left: 2vw;
  }
  .circle7-position1{
    position: absolute;
    top: 950px;
    left: 74vw;
  }
  .circle8-position1{
    position: absolute;
    top: 480px;
    left: 22vw;
  }
  .circle9-position1{
    position: absolute;
    top: 940px;
    left: 46vw;
  }
  .circle10-position1{
    position: absolute;
    top: 550px;
    left: 0vw;
  }

  .circle1-position2{
    position: absolute;
    top: 1590px;
    left: 37vw;
  }
  .circle2-position2{
    position: absolute;
    top: 1870px;
    left: -10vw;
  }
  .circle3-position2{
    position: absolute;
    top: 2220px;
    left: 16vw;
  }
  .circle4-position2{
    position: absolute;
    top: 1985px;
    left: 55vw;
  }
  .circle5-position2{
    position: absolute;
    top: 2500px;
    left: 53vw;
  }
  .circle6-position2{
    position: absolute;
    top: 2520px;
    left: -4vw;
  }
  .circle7-position2{
    position: absolute;
    top: 2290px;
    left: 75vw;
  }
  .circle8-position2{
    position: absolute;
    top: 2220px;
    left: -14vw;
  }
  .circle9-position2{
    position: absolute;
    top: 1460px;
    left: 80vw;
  }
  .circle10-position2{
    position: absolute;
    top: 1490px;
    left: 33vw;
  }
  .expanded{
    transform: scale(1.5);
    min-height: 64vw;
    min-width: 64vw;
    max-height: 64vw;
    max-width: 64vw;
    left: 20%;
  }
  .filterButton{
    min-width: 16%;
  }
}


@media screen and (max-width: 500px) {
  .unknown-circle{
    border: 1.5px solid green;
    color: blue;
  }
  .circle1-position1{
    position: absolute;
    top: 560px;
    left: 44vw;
  }
  .circle2-position1{
    position: absolute;
    top: 1050px;
    left: 36vw;
  }
  .circle3-position1{
    position: absolute;
    top: 870px;
    left: -10vw;
  }
  .circle4-position1{
    position: absolute;
    top: 1170px;
    left: -15vw;
  }
  .circle5-position1{
    position: absolute;
    top: 1440px;
    left: -13vw;
  }
  .circle6-position1{
    position: absolute;
    top: 650px;
    left: 2vw;
  }
  .circle7-position1{
    position: absolute;
    top: 890px;
    left: 74vw;
  }
  .circle8-position1{
    position: absolute;
    top: 490px;
    left: 22vw;
  }
  .circle9-position1{
    position: absolute;
    top: 880px;
    left: 46vw;
  }
  .circle10-position1{
    position: absolute;
    top: 550px;
    left: 0vw;
  }

  .circle1-position2{
    position: absolute;
    top: 1430px;
    left: 35vw;
  }
  .circle2-position2{
    position: absolute;
    top: 1680px;
    left: -10vw;
  }
  .circle3-position2{
    position: absolute;
    top: 1980px;
    left: 17vw;
  }
  .circle4-position2{
    position: absolute;
    top: 1770px;
    left: 55vw;
  }
  .circle5-position2{
    position: absolute;
    top: 2220px;
    left: 53vw;
  }
  .circle6-position2{
    position: absolute;
    top: 2230px;
    left: -4vw;
  }
  .circle7-position2{
    position: absolute;
    top: 2030px;
    left: 75vw;
  }
  .circle8-position2{
    position: absolute;
    top: 1980px;
    left: -14vw;
  }
  .circle9-position2{
    position: absolute;
    top: 1320px;
    left: 80vw;
  }
  .circle10-position2{
    position: absolute;
    top: 1340px;
    left: 33vw;
  }
  .expanded{
    transform: scale(1.5);
    min-height: 64vw;
    min-width: 64vw;
    max-height: 64vw;
    max-width: 64vw;
    left: 20%;
  }
  .circle1 h2,
  .circle2 h2,
  .circle3 h2,
  .circle4 h2,
  .circle5 h2,
  .circle6 h2,
  .circle7 h2,
  .circle8 h2,
  .circle9 h2,
  .circle10 h2{
    font-size: 28px;
  }
  .circle1 h3,
  .circle2 h3,
  .circle3 h3,
  .circle4 h3,
  .circle5 h3,
  .circle6 h3,
  .circle7 h3,
  .circle8 h3,
  .circle9 h3,
  .circle10 h3{
    font-size: 28px;
  }
  .circle1 h4,
  .circle2 h4,
  .circle3 h4,
  .circle4 h4,
  .circle5 h4,
  .circle6 h4,
  .circle7 h4,
  .circle8 h4,
  .circle9 h4,
  .circle10 h4{
    font-size: 15px;
  }
  .filterButton{
    min-width: 16%;
  }
  .filter-bar h4{
    font-size: 16px;
  }
}

@media screen and (max-width: 440px) {
  .unknown-circle{
    border: 1.5px solid green;
    color: blue;
  }
  .bar h5{
    font-size:12px;
  }
  .box{
    height: 10px;
    width: 10px;
  }
  .title{
    margin-top: 2%;
  }
  .title h1{
    font-size: 50px;
    line-height: 50px;
  }
  .circle1-position1{
    position: absolute;
    top: 530px;
    left: 44vw;
  }
  .circle2-position1{
    position: absolute;
    top: 960px;
    left: 36vw;
  }
  .circle3-position1{
    position: absolute;
    top: 800px;
    left: -10vw;
  }
  .circle4-position1{
    position: absolute;
    top: 1060px;
    left: -15vw;
  }
  .circle5-position1{
    position: absolute;
    top: 1300px;
    left: -15vw;
  }
  .circle6-position1{
    position: absolute;
    top: 610px;
    left: 1.5vw;
  }
  .circle7-position1{
    position: absolute;
    top: 820px;
    left: 74vw;
  }
  .circle8-position1{
    position: absolute;
    top: 460px;
    left: 22vw;
  }
  .circle9-position1{
    position: absolute;
    top: 820px;
    left: 46vw;
  }
  .circle10-position1{
    position: absolute;
    top: 520px;
    left: 0vw;
  }

  .circle1-position2{
    position: absolute;
    top: 1290px;
    left: 33vw;
  }
  .circle2-position2{
    position: absolute;
    top: 1510px;
    left: -11vw;
  }
  .circle3-position2{
    position: absolute;
    top: 1770px;
    left: 17vw;
  }
  .circle4-position2{
    position: absolute;
    top: 1585px;
    left: 55vw;
  }
  .circle5-position2{
    position: absolute;
    top: 1990px;
    left: 53vw;
  }
  .circle6-position2{
    position: absolute;
    top: 1995px;
    left: -4vw;
  }
  .circle7-position2{
    position: absolute;
    top: 1810px;
    left: 75vw;
  }
  .circle8-position2{
    position: absolute;
    top: 1770px;
    left: -14vw;
  }
  .circle9-position2{
    position: absolute;
    top: 1200px;
    left: 80vw;
  }
  .circle10-position2{
    position: absolute;
    top: 1210px;
    left: 33vw;
  }
  .filterButton{
    min-width: 16%;
    height: 18px;
    padding-top:2px;
  }
  .circle1 h2,
  .circle2 h2,
  .circle3 h2,
  .circle4 h2,
  .circle5 h2,
  .circle6 h2,
  .circle7 h2,
  .circle8 h2,
  .circle9 h2,
  .circle10 h2{
    font-size: 24px;
  }
  .circle1 h3,
  .circle2 h3,
  .circle3 h3,
  .circle4 h3,
  .circle5 h3,
  .circle6 h3,
  .circle7 h3,
  .circle8 h3,
  .circle9 h3,
  .circle10 h3{
    font-size: 24px;
  }
  .circle1 h4,
  .circle2 h4,
  .circle3 h4,
  .circle4 h4,
  .circle5 h4,
  .circle6 h4,
  .circle7 h4,
  .circle8 h4,
  .circle9 h4,
  .circle10 h4{
    font-size: 15px;
  }
  .expanded{
    transform: scale(1.5);
    min-height: 64vw;
    min-width: 64vw;
    max-height: 64vw;
    max-width: 64vw;
    left: 20%;
  }
  .filter-bar h4{
    font-size: 14px;
  }
}
.fade-in {
  animation: fadeIn 2s ease forwards;
}

.fade-out {
  animation: fadeOut 0.5s ease forwards;
}

@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}