body {
  background: rgb(2, 0, 36);
  background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(170, 93, 205, 1) 100%);
}

span img {
  padding-top: 6px;
  width: 160px;
  margin-left: -50px;
}

span img:hover {
  padding-top: 6px;
  width: 120px;
  margin-left: -24px;
  transition: 0.24s 0.2s;
}

.icon {
  left: -20px;
  position: relative;
  background: white;
  cursor: pointer;
  margin: auto;
  color: deepskyblue;
  border-radius: 50%;
  height: 150px;
  width: 150px;
  line-height: 150px;
  text-align: center;
  font-size: 2.75em;
  transition: 0.24s 0.2s;
}

.icon:hover {
  background: rgba(255, 255, 255, 0.75);

}

span {
  position: absolute;
  bottom: -32px;
  left: 0px;
}

.menu {
  position: absolute;
  top: -108px;
  left: -107px;
  border: 150px solid transparent;
  cursor: default;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 1.4s 0.07s;
  z-index: -5;
}

.iconrow{
  margin-top: -100px;
}

.spread {
  position: absolute;
  top: -100px;
  left: -185px;
  transform-origin: 200px 100px;
  transition: all 0.5s 0.1s;
}
.spread a:hover{
  border: 4px solid red !important;
  border-radius: 50px;
  transition: 0.24s 0.2s;
  
  
}

.icon:hover .menu {
  transition: transform 1.4s 0.08s, z-index 0s 0.5s;
  transform: scale(1);
  z-index: 5;
}

.icon:hover .spread,
.icon:hover .unit {
  transition: all 0.6s;
}

 .icon:hover .spread:nth-child(1) {
  transition-delay: 0.02s;
  transform: rotate(85deg);
} 

.icon:hover .spread:nth-child(1) .unit {
  transition-delay: 0.04s;
  transform: rotate(635deg);
}

.icon:hover .spread:nth-child(2) {
  transition-delay: 0.04s;
  transform: rotate(125deg);
}

.icon:hover .spread:nth-child(2) .unit {
  transition-delay: 0.08s;
  transform: rotate(595deg);
}

.icon:hover .spread:nth-child(3) {
  transition-delay: 0.06s;
  transform: rotate(165deg);
}

.icon:hover .spread:nth-child(3) .unit {
  transition-delay: 0.12s;
  transform: rotate(555deg);
}

.icon:hover .spread:nth-child(4) {
  transition-delay: 0.08s;
  transform: rotate(205deg);
}

.icon:hover .spread:nth-child(4) .unit {
  transition-delay: 0.16s;
  transform: rotate(515deg);
}

.icon:hover .spread:nth-child(5) {
  transition-delay: 0.1s;
  transform: rotate(245deg);
}

.icon:hover .spread:nth-child(5) .unit {
  transition-delay: 0.2s;
  transform: rotate(475deg);
}

.icon:hover .spread:nth-child(6) {
  transition-delay: 0.12s;
  transform: rotate(285deg);
}

.icon:hover .spread:nth-child(6) .unit {
  transition-delay: 0.24s;
  transform: rotate(435deg);
}

.icon:hover .spread:nth-child(7) {
  transition-delay: 0.14s;
  transform: rotate(325deg);
}

.icon:hover .spread:nth-child(7) .unit {
  transition-delay: 0.28s;
  transform: rotate(395deg);
}

.icon:hover .spread:nth-child(8) {
  transition-delay: 0.16s;
  transform: rotate(365deg);
}

.icon:hover .spread:nth-child(8) .unit {
  transition-delay: 0.32s;
  transform: rotate(355deg);
}

.icon:hover .spread:nth-child(9) {
  transition-delay: 0.18s;
  transform: rotate(405deg);
}

.icon:hover .spread:nth-child(9) .unit {
  transition-delay: 0.36s;
  transform: rotate(315deg);
}


/* END .icon:hover */
.unit {
  position: absolute;
  background: white;
  font-size: 60%;
  text-decoration: none;
  width: 60px;
  height: 60px;
  line-height: 45px;
  color: dodgerblue;
  border-radius: 50%;
  transition: 0.6s;
}

/* Just CodePen layout stuff: */
body,
a,
ul,
li {
  margin: 0;
  outline: 0;
  padding: 0;
  list-style: none;
}

html,
body {
  height: 100%;
  min-height: 300px;
}

body {
  font-family: sans-serif;
  /* background: radial-gradient(deepskyblue, dodgerblue);
  transform: translate3d(0, 0, 0); */
}

.icon {
  top: 50%;
  margin-top: 15%;
}



.unit:hover {
  width: 130px;
  height: 130px;
  font-size: 30px;
  padding-top: 5px;
  /* transition: width 1s ease 0s; */
  font-size: 12px;
  border-radius: 90% !important;
  z-index: 999999;
}

@media only screen and (max-width: 600px) {
  .menu {
    margin-left: 0px;
  }

  img {
    width: 90%;
    /* margin-left: -%; */
    z-index: 1000;
    margin-top: 6px;
    width: 30px;
  }

  span img {
    width: 50px;
    margin-left: -14px;
    margin-top: -2px;
  }

  span img:hover {
    width: 60px;
  }

  h1 {
    color: #fff;
    font-size: 20px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  }

  .icon {
    height: 50px;
    width: 50px;
    margin-top: 200px !important;
    margin-left: 162px;
  }

  .spread {
    position: absolute;
    top: -100px;
    left: -100px;
    transform-origin: 200px 200px;
    transition: all 0.5s 0.1s;
  }

  .unit {
    width: 50px !important;
    height: 50px !important;
  }

  a img {
    padding-top: 0px !important;
  }
  .spread a {
    font-size: 10px !important;
    
    text-decoration: none;
  }
}

.message {
  height: 38px;
}

.chat {
  position: relative;
  display: inline-block;

  min-width: 220px;
  max-width: 0%;
  margin-top: 40%;
  margin-left: 80px;
}

.spread i {
  font-size: 25px;
  padding-top: 10px;
}

.unit {
  width: 100px;
  height: 100px;
  transition: width 1s ease 0s;
}

.icon {
  height: 50px;
  width: 50px;
  margin-top: 23%;
}

span {
  position: absolute;
  bottom: -44px;
  left: 14px;
}

.icon span i {
  font-size: 25px;
}

.button {
  position: absolute;
  top: 220px;
  left: 110px;
  font-size: 14px;
}

.menu {
  top: -122px;
  left: -124px;
}


a img {
  padding-top: 27px;
}

/* Marquee  */


.mark {
  background-color: transparent;
  position: relative;
  top: 400px;
}

marquee h1 {
  
  color: lightyellow;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.spread a {
  font-size: 13px;
  color: black;
  text-decoration: none;
}


.mainlogo{
  width: 100px;
  height: 100px;
}

.sidebar {
  top: 10p;
  left: 0;
  width: 150px;
  height: max-content;
  color: black;
  padding-top: 20px;
}
.sidebar a {
  color: black;
}


/* .btn{
  border-radius: 17px;
  padding-top: -10px;
  box-shadow: 0px 0px 10px white;
}
.btn:hover{
  box-shadow: 0px 0px 15px black;
} */




:root {
  --hue: 190deg;
  --sat: 50%;
  --blur: 0px;
}




@media screen and (min-width: 660px) {
  button {
    font-size: 3vw;
  }
}

button {
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.025em;
  background-color: var(--clr);
  background-image: linear-gradient(180deg, var(--clr2) var(--gradgap));
  background-repeat: no-repeat;
  background-position: center var(--gradoffset);
  background-size: 100% 200%;
  padding: 1.1em 1.5em;
  border-radius: 2em;
  border: none;
  box-shadow: 0 -0.2em 1em hsla(var(--hue2), 70%, 80%, 0.3), 0 0.5em 1.5em hsla(var(--hue), 70%, 80%, 0.5), 0 0.25em 0.3em -0.2em hsl(var(--hue) 90% 70%), 0 0.25em 0.5em hsla(var(--hue), 20%, 30%, 0.2), inset 0 -2px 2px rgba(255, 255, 255, 0.2);
  position: relative;
  transition: all 0.5s ease;
  outline: none;
}

button::before,
button::after {
  content: "";
  inset: 0;
  position: absolute;
  border-radius: 5em;
}

button::before {
  background-image: radial-gradient(ellipse, hsla(var(--hue), 100%, 90%, 0.8) 20%, transparent 50%, transparent 200%), linear-gradient(90deg, hsl(0deg, 0%, 25%) -10%, transparent 30%, transparent 70%, hsl(0deg, 0%, 25%) 110%);
  box-shadow: inset 0 0.25em 0.75em hsla(0deg, 0%, 0%, 0.8), inset 0 -0.05em 0.2em rgba(255, 255, 255, 0.4), inset 0 -1px 3px hsla(var(--hue), 80%, 50%, 0.75);
  background-blend-mode: overlay;
  background-repeat: no-repeat;
  background-size: 200% 80%, cover;
  background-position: center 220%;
  mix-blend-mode: overlay;
  filter: blur(calc(var(--blur) * 0.5));
}

button::after {
  background: linear-gradient(180deg, hsla(var(--hue2), 100%, 90%, 0.9), hsla(var(--hue2), calc(var(--sat2) * 0.7), 50%, 0.75) 40%, transparent 80%);
  top: 0.075em;
  left: 0.75em;
  right: 0.75em;
  bottom: 1.4em;
  filter: blur(var(--blur));
  mix-blend-mode: screen;
}

button:hover,
button:active,
button:focus {
  outline: none;
  box-shadow: 0 -0.2em 1em hsla(var(--hue2), 70%, 80%, 0.3), 0 0.5em 1.5em hsla(var(--hue), 70%, 80%, 0.5), 0 0.25em 0.3em -0.2em hsl(var(--hue) 90% 70%), 0 0.25em 0.5em hsla(var(--hue), 20%, 30%, 0.2), inset 0 -2px 2px rgba(255, 255, 255, 0.2);
  background-position: center calc(var(--gradoffset) - 0.75em);
}