@font-face {
    font-family: 'PDU';
    src: url(PDU_Regular.ttf);
}

body, *{
  margin: 0;
}

h1{
  font-family: 'PDU';
  font-size: 30px;
}

.navi{
  position: fixed;
  left: 3%;
  top: 3%;
  float: left;
}

.works{
  margin-bottom: 8px;
}

.submit{
  position: fixed;
  left: 3%;
  bottom: 3%;
  cursor: pointer;
}

.title{
  position: fixed;
  right: 3%;
  top: 3%;
  cursor: default;
}

.circlepurple{
  position: absolute;
  left: 28vw;
  top: -10vh;
  border-radius: 50%;
	width: 31vw;
	height: 31vw;
  background-color: #ff66ff;
  z-index: -1;
}

.circlegreen{
  position: absolute;
  left: 60vw;
  top: 3vh;
  border-radius: 50%;
	width: 27vw;
	height: 27vw;
  background-color: #33ffcc;
  z-index: -1;
}

.circleblue{
  position: absolute;
  left: 40vw;
  top: 55vh;
  border-radius: 50%;
	width: 25vw;
	height: 25vw;
  background-color: #3399ff;
  z-index: -1;
}

.circlered{
  position: absolute;
  left: 65vw;
  top: 50vh;
  border-radius: 50%;
	width: 36vw;
	height: 36vw;
  background-color: #ff0733;
  z-index: -1;
}

.circleyellow{
  position: absolute;
  left: 6vw;
  top: 60vh;
  border-radius: 50%;
	width: 30vw;
	height: 30vw;
  background-color: #ffff2f;
  z-index: -1;
}

.circlebagie{
  position: absolute;
  left: 14vw;
  top: 30vh;
  border-radius: 50%;
	width: 16vw;
	height: 16vw;
  background-color: #fcffd7;
  color: #fcffd7;
  z-index: -1;
}

p{
  position: relative;
  top: 45%;
  font-family: 'PDU';
  font-size: 1.5vw;
  text-align: center;
  text-transform: uppercase;
  cursor: default;
}

a{
  color: black;
  text-decoration: none;
}

@media (max-width: 740px){
  .circlebagie{
    width: 30vw;
    height: 30vw;
    color: black;
  }

  p{
    font-size: 3vw;
  }
}