/**  HOME **/

#home {
  --black: black;
  --white: white;
  --logo-color: pink;
  --accent-color: black;
  --page-bg-color: #c0002c;
  --panel-bg-color: #888888;
  --inline-link-color: black;
  --inline-link-hover-color: red;
  --menu-item-color: pink;
  --paragraph-color: pink;
  --heading-color: pink;
}

/**  SERVICES **/

#services {
  --black: black;
  --white: white;
  --accent-color: #f7202c;
  --panel-bg-color: #black;
  --inline-link-color: black;
  --inline-link-hover-color: #f7202c;
}

#services h1 {
  font-size: 4em;
  line-height: 0.92;
}

#services .btn {
  border-radius: 0;
}
#services .menu-item {
  text-transform: capitalize;
}

#services .main-right-panel-bg {
  background-image: url("../img/cr-voronoi-tile.png");
  background-image: url("../img/v-tile-2.png");
  background-size: 100%;
  --image-rendering: pixelated;
  --background-repeat: no-repeat;
  background-position: -0.5em -20px;
 --animation: rotate-hue 60s infinite;
  
  
}
@keyframes rotate-hue {
  0% {
    filter: hue-rotate(0deg);
  }

  100% {
    filter: hue-rotate(360deg);
  }
}

#services ul {
  margin: 0;
  padding: 0;
  text-align: right;
  position: relative;
  margin-bottom: 1.2em;
}

#services li {
  list-style: none;
  border-bottom: 2px solid black;
  --animation: rotate-hue 60s infinite;
}

#services li:before {
  margin-top: 0.05em;
  width: 1.35em;
  height: 1.35em;
  background-color: black;
  --display: none;
  position: absolute;
  content: " ";
  border-radius: 1em;
  margin-left: -1.5em;
  opacity: 1;
}

#services li:hover:before {
  --display: block;
  animation: slide 0.25s ease-in-out;
  cursor: pointer;
  opacity: 0;

}

@keyframes slide {
  0% {
    left: 1.5em;
    opacity: 1;
  }

  100% {
    left: 50%;
    opacity: 0;
  }
}

#services li:hover {
  cursor: pointer;
}

#services .caption {
  position: fixed;
  bottom: 1em;
  right: 1em;
  z-index: 1000;
  --animation: translate 15s infinite linear;
  font-size: 0.8em;
}

.wave{
  position:absolute;
  --animation: upDown 1.5s alternate infinite ease-in-out;
  width:200px;
  z-index: 1000;
}



@keyframes upDown {
  to { transform: translatey(100px);}
}
@keyframes translate {
  to { transform: translatex(900%);}
}


#services li:nth-child(1):before {
  background: greenyellow;
}
#services li:nth-child(2):before {
  background: purple;
}
#services li:nth-child(3):before {
  background: pink;
}
#services li:nth-child(4):before {
  background: dodgerblue;
}
#services li:nth-child(5):before {
  background: Crimson;
}
#services li:nth-child(6):before {
  background: darkgreen;
}
#services li:nth-child(7):before {
  background: cornflowerblue;
}
#services li:nth-child(8):before {
  background: DeepPink;
}
#services li:nth-child(9):before {
  background: OrangeRed;
}
#services li:nth-child(10):before {
  background: Yellow;
}
#services li:nth-child(11):before {
  background: LimeGreen;
}
#services li:nth-child(12):before {
  background: Aquamarine;
}
#services li:nth-child(13):before {
  background: goldenrod;
}
/** CONTACT **/

#contact {
  --black: black;
  --white: antiquewhite;
  --logo-color: antiquewhite;
  --accent-color: goldenrod;
  --page-bg-color: darkslategrey;
  --panel-bg-color: var(--accent-color);
  --inline-link-color: var(--accent-color);
  --inline-link-hover-color: var(--black);
  --menu-item-color: wheat;
  --paragraph-color: var(--white);
  --heading-color: var(--accent-color);
}

/**  WEB DESIGN **/

#webdesign {
  --black: black;
  --white: antiquewhite;
  --logo-color: rgb(234, 149, 241);
  --accent-color: rgb(234, 149, 241);
  --page-bg-color: rgb(17, 49, 14);
  --panel-bg-color: rgb(12, 36, 10);
  --inline-link-color: var(--accent-color);
  --inline-link-hover-color: var(--black);
  --menu-item-color: antiquewhite;
  --paragraph-color: var(--accent-color);
  --heading-color: var(--accent-color);
}

#webdesign .main-right-panel-bg {
  background-image: url("/img/Motorola_68030_die.png");
  background-size: 600%;
  background-position: center;
  image-rendering: pixelated;
}

#webdesign .btn {
  color: var(--accent-color);
  background-color: var(--page-bg-color);
  border: 4px solid var(--accent-color);
}

#webdesign .btn:hover {
  background-color: var(--accent-color);
  color: var(--page-bg-color);
}

#webdesign .menu-item {
  background-color: var(--page-bg-color);
  border: 2px solid var(--accent-color);
  color: var(--accent-color);
}

#webdesign .menu-item:hover {
  background-color: var(--accent-color);
  color: var(--page-bg-color);
}

#webdesign .menu-item.selected {
  color: var(--page-bg-color);
  background-color: var(--accent-color);
}

#webdesign .logoSVG:hover {
  fill: var(--white);
}

/** About **/

#about {
  --black: black;
  --white: #36005c;
  --logo-color: dodgerblue;
  --accent-color: dodgerblue;
  --page-bg-color: #36005c;
  --panel-bg-color: dodgerblue;
  --inline-link-color: dodgerblue;
  --inline-link-hover-color: var(--black);
  --menu-item-color: dodgerblue;
  --paragraph-color: dodgerblue;
  --heading-color: dodgerblue;
}

#about .main-right-panel-bg {
  background: none;
}

#about .image-overlay {
  background-image: url("/img/cloudroom-type-02.svg");
  background-size: 75%;
  background-position: center 30vh;
  width: 100%;
  height: 100%;
}

#about .SVG-cloudroom-type-02 {
  fill: darkslategrey;
}

#about .btn {
  color: var(--accent-color);
  background-color: var(--page-bg-color);
  border: 4px solid var(--accent-color);
}

#about .btn:hover {
  background-color: var(--accent-color);
  color: var(--page-bg-color);
}

#about .menu-item {
  background-color: var(--page-bg-color);
  border: 2px solid var(--accent-color);
  color: var(--accent-color);
}

#about .menu-item:hover {
  background-color: var(--accent-color);
  color: var(--page-bg-color);
}

#about .menu-item.selected {
  color: var(--page-bg-color);
  background-color: var(--accent-color);
}

/** SECTION **/
/** SECTION **/
/** SECTION **/
/** SECTION **/
/** SECTION **/