<style>
  body {
    margin: 0px;
  }
.cm-container {
  background-color: #333;
  width: 50vw;
  height: 100vh;
  position: relative;
  z-index: 9999;
  padding: 0px; margin: 0px;
} 
.cm-nav {
  position: absolute;
  width: 10vw;
  height: 10vw;
  left: 50%;
  transform: translateX(-50%);
  top: 40vh;
  /*background: #eaea10 !important;*/
}
  .cm-nav a {
  text-decoration: none;
  color: #ACF9F9;
  font-size: 1.2rem;
    z-index: 999;
}
.cm-nav a:hover {
  text-decoration: none;
  color: #333;
  background-color: #ACF9F9;
}
  .cm-item {
  position: absolute;
  text-align: center;
}
</style>
<div class="cm-container">
  <div class="cm-nav">
      <a href="google.com" class="cm-item it-1">Computer Basics</a>
      <a href="google.com" class="cm-item it-2">Resume</a>
      <a href="/job-search/" class="cm-item it-3">Job Search</a>
      <a href="google.com" class="cm-item it-4">Local Resources</a>
      <a href="google.com" class="cm-item it-5">FCPL</a>
      <a href="google.com" class="cm-item it-6">Library Resources</a>
      <a href="google.com" class="cm-item it-7">Smartphone</a>
      <a href="google.com" class="cm-item it-8">Success</a>
    </div>
   </div>

.it-1 {  
  border: .8rem solid #ACF9F9;
padding: 30px 1px;
  max-width: 100px;
    border-radius: 80px;
}
.it-2, .it-8, .it-5 {
  border: .4rem solid #ACF9F9;
  padding: 2rem .8rem;
  border-radius: 16rem;
}
.it-5 {
  border: .4rem solid #ACF9F9;
  padding: 1.5rem .8rem;
  border-radius: 16rem;
}
.it-3, .it-7 {
  width: 90px;
  border: .4rem solid #ACF9F9;
  padding: 2.7rem .7rem;
  border-radius: 16rem;
}
.it-4, .it-6 {
  width: 90px;
  border: .6rem solid #ACF9F9;
  padding: 2.2rem .7rem;
  border-radius: 16rem;
}




/* POSITIONS */
.it-1 {
  top: -36vh;
  left: -2vh;
}.it-5 {
  top: 33vh;
  left: 1vh;
}.it-2 {
  top: -25vh;
  left: 22vh;
}.it-8 {
  top: -25vh;
  left: -20vh;
}.it-3 {
  top: -6vh;
  left: 28vh;
}.it-7 {
  top: -6vh;
  left: -30vh;
}.it-4 {
  top: 18vh;
  left: 22vh;
}.it-6 {
  top: 18vh;
  left: -25vh;
}