ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {
    font-family: 'Roboto', sans-serif;
}

ul,
h1,
h3,
h2,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}
*, :before, :after {
    box-sizing: inherit;
}
.box-1 {
    width: 276px;
    height: 142px;
    /* border-top: 1px solid white; */
    background-color: #208492;
    background-image: linear-gradient(to bottom, #88CBD8, #208492);
    /* transform: rotate(122deg); */
    position: absolute;
    z-index: 99;
    right: 71.3%;
    top: 58px;
    color: white;
}

.box-1 .title {
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 34px;
}

.box-2 {
    width: 276px;
    height: 142px;
    /* border-top: 1px solid white; */
    background-color: #208492;
    background-image: linear-gradient(to bottom, #88CBD8, #208492);
    /* transform: rotate(122deg); */
    position: absolute;
    z-index: 99;
    right: 18%;
    top: 132px;
    color: white;
}

.box-2 .title {
    font-size: 16px;
    font-weight: bold;
    margin-top: 37px;
    text-transform: uppercase;
}
input{
    color: white !important;
}
.box-3 {
    width: 276px;
    height: 142px;
    /* border-top: 1px solid white; */
    background-color: #208492;
    background-image: linear-gradient(to bottom, #88CBD8, #208492);
    /* transform: rotate(122deg); */
    position: absolute;
    z-index: 99;
    right: 13.3%;
    top: 450px;
    color: white;
    padding: 10px;
}

.box-3 .title {
    font-size: 16px;
    font-weight: bold;
    margin-top: 30px;
    text-transform: uppercase;
}

.box-1 .b2,
.box-2 .b2,
.box-3 .b2,
.box-4 .b2,
.box-5 {
    font-size: 14px;
    /* font-weight: bold; */
    /* text-transform: uppercase; */
}

.box-4 {
    width: 281px;
    height: 142px;
    /* border-top: 1px solid white; */
    background-color: #208492;
    background-image: linear-gradient(to bottom, #88CBD8, #208492);
    /* transform: rotate(122deg); */
    position: absolute;
    z-index: 99;
    right: 77.2%;
    top: 462px;
    color: white;
}

.box-4 .title {
    font-size: 16px;
    font-weight: bold;
    margin-top: 37px;
    text-transform: uppercase;
}

.box-5 {
    width: 128px;
    height: 84px;
    /* border-top: 1px solid white; */
    background-color: #208492;
    background-image: linear-gradient(to bottom, #88CBD8, #208492);
    /* transform: rotate(122deg); */
    position: absolute;
    z-index: 99;
    right: 50.01%;
    top: 323px;
    color: white;
    cursor: pointer;
}

.box-5 .title {
    font-size: 14px;
    font-weight: bold;
    margin-top: 37px;
    text-transform: uppercase;
}

.line-6 {
    width: 276px;
    border-top: 1px solid white;
    transform: rotate(122deg);
    position: absolute;
    right: 65%;
    top: 280px;
}

.line-7 {
    width: 215px;
    border-top: 1px solid white;
    transform: rotate(23deg);
    position: absolute;
    right: 40%;
    top: 165px;
}

.line-8 {
    width: 248px;
    border-top: 1px solid white;
    transform: rotate(102deg);
    position: absolute;
    right: 46%;
    top: 254px;
}

.line-9 {
    width: 286px;
    border-top: 1px solid white;
    transform: rotate(77deg);
    position: absolute;
    right: 45%;
    top: 478px;
}

.line-10 {
    width: 391px;
    border-top: 1px solid white;
    transform: rotate(17deg);
    position: absolute;
    right: 56%;
    top: 312px;
}

.line-11 {
    width: 391px;
    border-top: 1px solid white;
    transform: rotate(87deg);
    position: absolute;
    right: 57.5%;
    top: 359px;
}

.line-12 {
    width: 242px;
    border-top: 1px solid white;
    transform: rotate(-7deg);
    position: absolute;
    right: 52%;
    top: 533px;
}

.line-13 {
    width: 132px;
    border-top: 1px solid white;
    transform: rotate(26deg);
    position: absolute;
    right: 45.5%;
    top: 547px;
}

.line-14 {
    width: 214px;
    border-top: 1px solid white;
    transform: rotate(15deg);
    position: absolute;
    right: 39.5%;
    top: 412px;
}

.line-15 {
    width: 187px;
    border-top: 1px solid white;
    transform: rotate(69deg);
    position: absolute;
    right: 32.8%;
    top: 525px;
}

.line-16 {
    width: 142px;
    border-top: 1px solid white;
    transform: rotate(143deg);
    position: absolute;
    right: 32.8%;
    top: 397px;
}

.line-17 {
    width: 195px;
    border-top: 1px solid white;
    transform: rotate(168deg);
    position: absolute;
    right: 40.8%;
    top: 339px;
}

.line-18 {
    width: 148px;
    border-top: 1px solid white;
    transform: rotate(14deg);
    position: absolute;
    right: 33%;
    top: 337px;
}

.line-19 {
    width: 198px;
    border-top: 1px solid white;
    transform: rotate(-39deg);
    position: absolute;
    right: 31.6%;
    top: 260px;
}

.line-20 {
    width: 287px;
    border-top: 1px solid white;
    transform: rotate(45deg);
    position: absolute;
    right: 38.4%;
    top: 219px;
}

.line-21 {
    width: 255px;
    border-top: 1px solid white;
    transform: rotate(-13deg);
    position: absolute;
    right: 54.4%;
    top: 407px;
}

.line-22 {
    width: 148px;
    border-top: 1px solid white;
    transform: rotate(7deg);
    position: absolute;
    right: 67.4%;
    top: 425px;
}

.line-23 {
    width: 201px;
    border-top: 1px solid white;
    transform: rotate(-29deg);
    position: absolute;
    right: 67%;
    top: 485px;
}

.line-24 {
    width: 177px;
    border-top: 1px solid white;
    transform: rotate(66deg);
    position: absolute;
    right: 51%;
    top: 258px;
}

.line-25 {
    width: 132px;
    border-top: 1px solid white;
    transform: rotate(-30deg);
    position: absolute;
    right: 51%;
    top: 143px;
}

.line-26 {
    width: 178px;
    border-top: 1px solid white;
    transform: rotate(12deg);
    position: absolute;
    right: 57.2%;
    top: 157px;
}

.line-27 {
    width: 100px;
    border-top: 1px solid white;
    transform: rotate(96deg);
    position: absolute;
    right: 54.6%;
    top: 129px;
}

.line-28 {
    width: 229px;
    border-top: 1px solid white;
    transform: rotate(21deg);
    position: absolute;
    right: 27.6%;
    top: 482px;
}

.circle-1 {
    width: 117px;
    height: 117px;
    border: 4px solid #ffffff61;
    border-radius: 100%;
    position: absolute;
    top: -12px;
    right: -12.5%;
}

.circle-2 {
    width: 134px;
    height: 134px;
    border: 4px solid #ffffff61;
    border-radius: 100%;
    position: absolute;
    top: -20px;
    right: -20.5%;
}

.circle-3 {
    width: 117px;
    height: 117px;
    border: 4px solid #ffffff61;
    border-radius: 100%;
    position: absolute;
    top: -12px;
    right: -12.5%;
}

.circle-4 {
    width: 134px;
    height: 134px;
    border: 4px solid #ffffff61;
    border-radius: 100%;
    position: absolute;
    top: -20px;
    right: -20.5%;
}

.circle-5 {
    width: 65px;
    height: 65px;
    border: 4px solid #ffffff61;
    border-radius: 100%;
    position: absolute;
    top: -11px;
    right: -20.5%;
}

.circle-6 {
    width: 85px;
    height: 85px;
    border: 4px solid #ffffff61;
    border-radius: 100%;
    position: absolute;
    top: -20px;
    right: -40.5%;
}

.circle-7 {
    width: 47px;
    height: 47px;
    border: 4px solid #ffffff61;
    border-radius: 100%;
    position: absolute;
    top: -10px;
    right: -31.5%;
}

.circle-8 {
    width: 64px;
    height: 64px;
    border: 4px solid #ffffff61;
    border-radius: 100%;
    position: absolute;
    top: -18px;
    right: -53.5%;
}

.circle-9 {
    width: 150px;
    height: 150px;
    border: 4px solid #ffffff61;
    border-radius: 100%;
    position: absolute;
    top: -14px;
    right: -10.7%;
}

.circle-10 {
    width: 180px;
    height: 180px;
    border: 8px solid #ffffff61;
    border-radius: 100%;
    position: absolute;
    top: -33px;
    right: -24.7%;
}

.circle-11 {
    width: 210px;
    height: 210px;
    border: 4px solid #ffffff61;
    border-radius: 100%;
    position: absolute;
    top: -44px;
    right: -32.7%;
}

.point-1 {
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 100%;
    position: absolute;
    top: 434px;
    right: 39.2%;
}

.point-2 {
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 100%;
    position: absolute;
    top: 315px;
    right: 40.5%;
}

.point-3 {
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 100%;
    position: absolute;
    top: 195px;
    right: 32.5%;
}

.point-4 {
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 100%;
    position: absolute;
    top: 170px;
    right: 57.4%;
}

.point-5 {
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 100%;
    position: absolute;
    top: 75px;
    right: 56.7%;
}

.point-6 {
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 100%;
    position: absolute;
    top: 249px;
    right: 75.9%;
}

.point-7 {
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 100%;
    position: absolute;
    top: 529px;
    right: 76.7%;
}

.point-8 {
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 100%;
    position: absolute;
    top: 431px;
    right: 67.3%;
}

.point-9 {
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 100%;
    position: absolute;
    top: 515px;
    right: 51.8%;
}

.point-10 {
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 100%;
    position: absolute;
    top: 571px;
    right: 45.5%;
}

.point-11 {
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 100%;
    position: absolute;
    top: 518px;
    right: 27.8%;
}

/* *, *::before, *::after {
    box-sizing: border-box;
  } */

  /* html {
    font-family: "Segoe UI", Helvetica, sans-serif;
  } */

  /* body {
    padding: 0;
    margin: 0;
    overflow: hidden;
  } */

  .topbar {
    color: #fff;
    position: absolute;
    z-index: 10;
    top: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0 .5rem;
    background: rgba(20,20,20,.25);
    text-align: right;
  }

  a {
    color: #ddd;
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }

  .canvas {
    position: absolute;
    top: 70px;
    width: 100%;
    left: 0;
    /* width: 100%; */
    /* height: 990px; */
    background: linear-gradient(to bottom,#262530,#312);
  }