@font-face {
    font-family: 'CircularPro-Book';
    src: url("/assets/css/fonts/CircularPro-Book.otf");
  }
  body, html{
    margin: 0;
    padding: 0;
    background: #222222;
    color:#AAAAAA;
    font-family: 'CircularPro-Book', Roboto, Tahoma, sans-serif;
    font-size:18px;
    font-weight:normal;
    touch-action: none;
    
	-webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; 
            
  overscroll-behavior: contain;
  }
  #page_wrapper{
      display: block;
    max-width: 480px;
    min-width: 480px;
    width: 480px;
    margin: auto;
    text-align: center;
  }
  #seedling{
    position:relative;
    width:480px;
    height:480px;
    margin:auto;
  }
  .anchorPoint{
	cursor: pointer;
    width:4%;
    height:4%;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  }
  #anchor1{
    position:absolute;
    top:78%;
    left:18%;
  }
  #anchor2{
    position:absolute;
    top:78%;
    left:48%;
  }
  #anchor3{
    position:absolute;
    top:78%;
    left:78%;
  }
  #anchor4{
    position:absolute;
    top:48%;
    left:18%;
  }
  #anchor5{
    position:absolute;
    top:48%;
    left:48%;
  }
  #anchor6{
    position:absolute;
    top:48%;
    left:78%;
  }
  #anchor7{
    position:absolute;
    top:18%;
    left:18%;
  }
  #anchor8{
    position:absolute;
    top:18%;
    left:48%;
  }
  #anchor9{
    position:absolute;
    top:18%;
    left:78%;
  }
  
  .dot {
	border: 1px solid;
	border-color: #AAAAAA;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50%;
    margin-left: -50%;
  }
  
  .active .dot {
    background: white;
	border-color: white;
  }
  
  .startingPoint .dot {
    background: yellow;
	border-color: yellow;
  }
  
  h1{
    padding: 15px;
    font-weight:normal;
    font-size:18px;
  }
  #footer{
    width:100%;
  }
  #footer div{
    display:inline-block;
  }
  #restart_button{
    border: 1px solid;
    border-radius: 26px;
    padding: 15px 40px;
    display:inline-block;
	margin: 0px 10px;
	cursor: pointer;
	
	-webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; 
  }
  #plant_button{
    border: 1px solid;
    border-radius: 26px;
    padding: 15px 40px;
    display:inline-block;
	margin: 0px 10px;
	cursor: pointer;
	
  }
  
  @keyframes root_option_animation {
    0%   {border-color: #AAAAAA;}
    50%  {border-color: #FFFF00;}
    100% {border-color: #AAAAAA;}
  }
  .root_option .dot{
    animation-name: root_option_animation;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  .connector{
    pointer-events:none;
    position: absolute; /* allows to position it anywhere */
    width: 3px; /* your chosen line width */
    background-color: white; /* line color */
    z-index: 1000; /* make sure this is above your other elements */
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -o-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
  }