/* Diagnostic Styling */
/* * {
  outline: 2px dotted gray;
}  */

/* temp background color */
body {
    background: white;
}
  
/* vertical and horizontal centering */
body {
  display: grid;
  place-content: center;
  height: 100vh;
  background: black;
  
}

/* containers */
main {
  display: flex;
}

/* cptionally changef */
main section {
  height: 100px;
  width: 100px;
}

/* scale SVG to fit container */
svg {
  width: 100%; /* or any specific size */
  height: auto;
  /* Center and fit */
  preserveAspectRatio: xMidYMid meet;
}


#dataFolder {
	
	opacity: 0;
}

.leftBracket, .rightBracket {
	stroke: cyan;
  opacity: 0;
}

.folder {
	stroke: pink;

}

#contact {
	stroke: red;
}

.rightTick, .leftTick {
	stroke: red;
}

.body, .head {
	stroke: white;
}


.middleLine2 {
	stroke: cyan;
}

#globe {
	stroke: #1F51FF;
}



@keyframes spinGlobe {
  0% {
    transform: rotate(0deg); 
  }
  100% {
    transform: rotate(360deg);
  }
}


.circle, .middle, .middleLine {
  animation: spinGlobe 8s linear infinite; 
  transform-origin: center;