body {
  background-color: transparent;
  color: black;
  font-family: Verdana;
  border: 5px solid transparent;
  box-sizing: border-box;
}


.navbar {
  background-color: transparent; 
  text-align: center; 
  padding: 10px;
  border-top: 2px solid black;
  border-bottom: 2px dashed black;
  box-sizing: border-box;
  width: 100vw;
  margin: 0 auto;
  margin: 0 -13px;
  position: relative; 
  z-index: 10;
}

.navbar a {
  display: inline-block;
  color: black; 
  padding: 10px; 
  margin: -5.5px;
  text-decoration: none;
}

.navbar a:hover {
  background-color: #ededee; 
}


#base {
  width: 100%;
  height: 100%; 
  position: relative; 
  background-color: purple;  
  z-index: 1; 
}

  
button {
  position: relative;
  z-index: 10; 
}

.basegenerate > div {
  width: 100px;
  height: 100px;
  position: absolute; 
  z-index: 1; 
}




.Purple {
  background-color: #9e009b;
  display: inline-block;
}

.Green {
  background-color: #0ac200;
  display: inline-block;
}

.Red {
  background-color: #ff0303;
  display: inline-block;
}

.Orange{
  background-color: #ffa200;
  display: inline-block;
}

.Blue{
  background-color: #1e30d6;
  display: inline-block;
}

.Cyan{
  background-color: #00fbff;
  display: inline-block;
}



.exported{

width:85%
  
}


#NoPoint{
    list-style-type: none;
    padding-left: 0; 
    margin-left: 0;
}