/* main stuff*/
body {
  background-color: hsl(169 20% 45%);
  height: 100%;
}
.main {
    justify-content: space-evenly;
    margin: 1.5% auto; 
    grid-auto-flow: column;
    width: 60%
}
.container {
  display: flex;
  align-items: center;
  height: 100svh;
}
.title {
  position: absolute;
  top: -4%;
  left: 2%;
}
/* everything with text */
a, h1 {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: hsl(0 0 90%);
    padding: 1%;
    letter-spacing: -0.1em;
    text-decoration: none;
}
a {
    font-size: 200%
}
h1 {
    font-size: 400%
}
a:hover, a:active, a:focus {
    font-style: italic;
    color: hsl(0 0 100%);
}
/* circle of links */
.navring {
    position: relative;
    width: 30vw;
    height: 30vw;
}
.navring a {
    display: block;
    position: absolute;
    margin: -2em;
}
.deg0 {
  left: 110%;
  bottom: 60%;
}
.deg72 {
  left: 75.4508497%;
  bottom: 107.552826%;
}
.deg144 {
  left: 19.5491503%;
  bottom: 89.3892626%;
}
.deg216 {
  left: 19.5491503%;
  bottom: 30.6107374%;
}
.deg288 {
  left: 75.4508497%;
  bottom: 12.4471742%;
}
@media screen and (width <=700px) {
  .navring {
    width: 70vw;
    height: 70vw;
  }
  a {
    font-size: 230%
  }
}