:root {
  --orange: darkorange;
  --gray: #999999;
  --nav-items: 3;
  --angle: calc(180 / var(--nav-items));
  /* Limit the range of the circle to 350-500px*/
  --circle-size: min(max(40vw, 40vh, 350px), 500px);
  --circle-translation: calc(var(--circle-size) / 2);

  font-family: verdana, geneva, sans-serif;
}

body {
  background: #333;
}
.quote {
  display: none;
}

.nav-circle {
  width: 100%;
  height: 100%;
  margin: 0;
  position: relative;
}

.nav-circle nav {
  position: absolute;
  top: 90%;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  height: 10%;
}

.nav-circle nav a {
  height: 10vh;
  width: calc(100vw / var(--nav-items));
  background-color: var(--orange);
  display: flex;
  color: black;
  z-index: 10;
  align-items: center;
  justify-content: center;
}

.nav-circle nav a:hover {
  background-color: var(--gray);
}

.nav-circle nav a img {
  height: 50%;
  aspect-ratio: 1;
}

.initials {
    width: 100%;
    height: 90%;
    font-size: 5rem;
    font-weight: bold;
    color: var(--orange);
    background: #999;
    text-align: center;
    align-content: center;
    position: absolute;
    top: 0; 
    left: 0;
}

.initials > sup {
  color: #FFFFFF;
  font-size: 2.5rem;
}

*[aria-only] {
  display: none;
}



@media screen and (min-width: 600px) {

  body {
    background: linear-gradient(to top, #666666, #aaa, #ddd, #eee, #eee)
  }
  /* Skipping 2deg When an even number of nav items use it for Resume when there are odd */

  #linkedin {
    transform: rotate(calc(var(--angle) * 1deg)) translate(calc(-1* var(--circle-translation))) rotate(calc(var(--angle) * -1deg));
  }

  #resume {
    transform: translateY(calc(-1* var(--circle-translation)));
  }

  #git {
    transform: rotate(calc(var(--angle) * -1deg)) translate(calc(1* var(--circle-translation))) rotate(calc(var(--angle) * 1deg)) ;
  }

  /* #projects {
    transform: rotate(calc(var(--angle) * -3deg)) translate(var(--circle-translation)) rotate(calc(var(--angle) * 3deg));
  }

  #quote {
    transform: rotate(calc(var(--angle) * 4deg)) translate(var(--circle-translation)) rotate(calc(var(--angle) * -4deg));
  } */

  .quote {
    width: 50%; 
    height: 40px;
    background-color: rgba(255,255,255,0.6);
    margin: 0 auto; 
    position: relative;
    display: block;
    padding: 10px;
    border: 1px solid black;
    border-radius: 8px;    
  }
.nav-circle {
  width: var(--circle-size);
  height: var(--circle-size);
  min-width: 350px;
  min-height: 350px;
  margin: 5% auto 0 auto;
  position: relative;
}

.nav-circle nav { 
  height: 100%;
  display: unset;
  top: unset;
  left: unset;
  flex-direction: unset;
  align-items: unset;
}

.nav-circle nav a {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-color:var(--orange);
  color:black;
  overflow: hidden;
  position: absolute;
  padding: 10px;
  top: calc(var(--circle-translation) - 10px);
  left: calc(var(--circle-translation) - 10px);
  z-index: 100;
}

.nav-circle nav a img {
  height: inherit;
  width: inherit;
}

.initials {
    width: calc(var(--circle-size) / 4);
    height: unset;
    max-width: 300px;
    min-width: 200px;
    aspect-ratio: 1;
    font-size: 5rem;
    border-radius: 50%;
    position: absolute;
    top: calc(var(--circle-translation) / 2); 
    /* This placement isn't quite right and the initials move around when browser is resized but looks fine at the max*/
    left: calc(var(--circle-translation) / 2 + 40px);
}
}
@keyframes bounceY {
  from { transform: translate(0, 8px) }
  to { transform: translate(0, -2px)}
}
@keyframes bounceX {
  from { transform: translate(8px, 0) }
  to { transform: translate(-2px, 0)}
}