/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed and saved.
 *
 * Add your own CSS or Less to fully customize Atom.
 * If you are unfamiliar with Less, you can read more about it here:
 * https://lesscss.org
 */

/*Style Begins here*/

html, body {
  width: 100%;
  height:100%;
}

body {
		margin: 0;
		padding: 0;
		height: 100%;
		width: 100%;
    background: white;
    position: absolute;
	}

#Settings {
  position: fixed; /* Fixed/sticky position */
  top: 20px; /* Place the button at the top of the page */
  left: 20px; /* Place the button from the left */
  z-index: 99; /* Make sure it does not overlap */
  border: none; 
  outline: none; /* Remove outline */
  color: #c7c7c7; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 10px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 16px; /* Increase font size */
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

#Settings:hover {
  color: grey;
  border: none;
  -webkit-box-shadow:0px 0px 5px 2px rgba(27,179,221,0.9);
  -moz-box-shadow: 0px 0px 5px 2px rgba(27,179,221,0.9);
  box-shadow: 0px 0px 5px 2px rgba(27,179,221,0.9);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

canvas {
	  display: block;
	  position: absolute;
	  background: -moz-radial-gradient(center, ellipse cover,  rgba(171,209,234,0.5) 0%, rgba(125,185,232,0.75) 100%); /* FF3.6+ */
	  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(171,209,234,0.5)), color-stop(100%,rgba(125,185,232,0.75))); /* Chrome,Safari4+ */
	  background: -webkit-radial-gradient(center, ellipse cover,  rgba(171,209,234,0.5) 0%,rgba(125,185,232,0.75) 100%); /* Chrome10+,Safari5.1+ */
	  background: -o-radial-gradient(center, ellipse cover,  rgba(171,209,234,0.5) 0%,rgba(125,185,232,0.75) 100%); /* Opera 12+ */
	  background: -ms-radial-gradient(center, ellipse cover,  rgba(171,209,234,0.5) 0%,rgba(125,185,232,0.75) 100%); /* IE10+ */
	  background: radial-gradient(ellipse at center,  rgba(255,255,255,0.5) 0%,rgba(230,230,230,0.75) 100%); /* W3C */
	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6e6', endColorstr='#f2f2f2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	}

ul {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  margin:0;
  padding:0;
  display:flex;
}

ul img{
  position:absolute;
  top:-21%;
  left:50%;
  transform:translate(-50%,21%);
  margin:0;
  padding:0;
  display:flex;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

ul img:hover{
  position:absolute;
  filter:
    saturate(100%)
    drop-shadow(3px 3px 1px rgba(0,0,0,0.15));
  top:-21%;
  left:50%;
  transform:translate(-50%,21%);
  margin:0;
  padding:0;
  display:flex;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

ul li {
  list-style:none;
}

ul li a {
  display:block;
  position:relative;
  width:100px;
  height:100px;
  line-height:100px;
  font-size:40px;
  text-align:center;
  text-decoration:none;
  color:#404040;
  margin: 0 30px;
  filter:
      saturate(0%)
      opacity(20%)
      drop-shadow(3px 3px 1px rgba(0,0,0,0.0));
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

ul li a:hover {
  filter:
      saturate(100%)
      opacity(100%)
      drop-shadow(3px 3px 1px rgba(0,0,0,0.13));
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

ul li a span {
  position:absolute;
  transition: transform .5s;
}

ul li a span:nth-child(1),
ul li a span:nth-child(3){
  width:100%;
  height:3px;
  background:#404040;
}

ul li a span:nth-child(1) {
  top:0;
  left:0;
  transform-origin: right;
}

ul li a:hover span:nth-child(1) {
  transform: scaleX(0);
  transform-origin: left;
  transition:transform .5s;
}

ul li a span:nth-child(3) {
  bottom:0;
  left:0;
  transform-origin: left;
}

ul li a:hover span:nth-child(3) {
  transform: scaleX(0);
  transform-origin: right;
  transition:transform .5s;
}

ul li a span:nth-child(2),
ul li a span:nth-child(4){
  width:3px;
  height:100%;
  background:#404040;
}

ul li a span:nth-child(2) {
  top:0;
  left:0;
  transform:scale(0);
  transform-origin: bottom;
}

ul li a:hover span:nth-child(2) {
  transform: scale(1);
  transform-origin: top;
  transition:transform .5s;
}

ul li a span:nth-child(4) {
  top:0;
  right:0;
  transform:scale(0);
  transform-origin: top;
}

ul li a:hover span:nth-child(4) {
  transform: scale(1);
  transform-origin: bottom;
  transition:transform .5s;
}

ul li a:hover:nth-child(3) {
  color: #c32aa3;
}
ul li a:hover:nth-child(4) {
  color: #dd4b39;
}

/*Site Logos*/

.Google img{
  filter:
    saturate(0%)
    drop-shadow(3px 3px 1px rgba(0,0,0,0.0));
  top: -21%;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.Google img:hover{
  filter:
    saturate(100%)
    drop-shadow(3px 3px 1px rgba(0,0,0,0.15));
  top: -21%;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.Google {
  background-image: url(/images/google-logo.png);
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.Google:hover {
  color: #dd4b39;
  background-color: transparent;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.Google:hover span {
  background: #dd4b39;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.Reddit {
  background-image: url(/images/reddit-logo.png);
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.Reddit:hover {
  color: #FF5700;
  background-color: transparent;
}

.Reddit:hover span {
  background: #FF5700;
}

.Amazon img{
  top: -53%;
  padding: 24px;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.Amazon img:hover{
  top: -53%;
  padding: 24px;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.Amazon:hover {
  color: #05A0D1;
  background-color: transparent;
}

.Amazon:hover span {
  background: #05A0D1;
}

.Amazon {
  background-image: url(/images/amazon-logo.png);
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.YouTube:hover {
  color: #FF0000;
  background-color: transparent;
}

.YouTube:hover span {
  background: #FF0000;
}

.YouTube {
  background-image: url(/images/youtube-logo.png);
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.Facebook:hover {
  color: #3b5998;
  background-color: transparent;
}

.Facebook:hover span {
  background: #3b5998;
}

.Facebook {
  background-image: url(/images/facebook-logo.png);
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.Vantaca img{
  top: -50%;
  padding: 20px;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.Vantaca img:hover{
  top: -50%;
  padding: 20px;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.Vantaca:hover {
  color: #0d689d;
  background-color: transparent;
}

.Vantaca:hover span {
  background: #0d689d;
}

.Vantaca {
  background-image: url(/images/vantaca-logo.png);
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.HomeWise img{
  top: -65%;
  padding: 32px;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.HomeWise img:hover{
  top: -65%;
  padding: 32px;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.HomeWise:hover {
  color: #8bc541;
  background-color: transparent;
}

.HomeWise:hover span {
  background: #053954;
}

.HomeWise {
  background-image: url(/images/homewise-logo.png);
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.FirstCitizensBank img{
  top: -73%;
  padding: 36px;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.FirstCitizensBank img:hover{
  top: -73%;
  padding: 36px;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.FirstCitizensBank:hover {
  color: #cc1a44;
  background-color: transparent;
}

.FirstCitizensBank:hover span {
  background: #013874;
}

.FirstCitizensBank {
  background-image: url(/images/fcb-logo.png);
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.Wildix img{
  top: -66%;
  padding: 32px;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.Wildix img:hover{
  top: -66%;
  padding: 32px;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.Wildix:hover{
  color: #003d69;
  background-color: transparent;
}

.Wildix:hover span{
  background: #003d69;
}

.Wildix {
  background-image: url(/images/wildix-logo.png);
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.ChatGPT img{
  top: -66%;
  padding: 32px;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.ChatGPT img:hover{
  top: -66%;
  padding: 32px;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.ChatGPT:hover {
  color: #18a585;
  background-color: transparent;
}

.ChatGPT:hover span {
  background: #18a585;
}

.ChatGPT {
  background-image: url(/images/chatgpt-logo.png);
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}


@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");
* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}
section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  z-index: -10;
}
section .wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ebebeb;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
  transition: 2s;
  z-index: -5;
}
section .wave span {
  content: "";
  position: absolute;
  width: 325vh;
  height: 325vh;
  top: 0;
  left: 50%;
  transform: translate(-50%, -75%);
  background: #ebebeb;
  z-index: -5;
}
.content {
  position: relative;
  z-index: 1;
  font-size: 4em;
  letter-spacing: 2px;
  color: #fff;
  z-index: -5;
}
section .wave span:nth-child(1) {
  border-radius: 45%;
  background: rgba(20, 20, 20, 1);
  animation: animate 60s linear infinite;
  z-index: -5;
}

section .wave span:nth-child(2) {
  top: 10%;
  border-radius: 40%;
  background: rgba(20, 20, 20, 0.5);
  animation: animate 80s linear infinite;
  z-index: -5;
}
section .wave span:nth-child(3) {
  top: 10%;
  border-radius: 42.5%;
  background: rgba(20, 20, 20, 0.5);
  animation: animate 120s linear infinite;
  z-index: -5;
}
@keyframes animate {
  0% {
    transform: translate(-50%, -75%) rotate(0deg);
    z-index: -5;
  }
  100% {
    transform: translate(-50%, -75%) rotate(360deg);
    z-index: -5;
  }
}

* {
  box-sizing: border-box;
}

:root {
  --size: 20px;
}

.el {
  background: conic-gradient(from 180deg at 50% 100%,hsla(0,0%,98%,1) 0deg,#fdf8e7 72.0000010728836deg,#ff9999 144.0000021457672deg,#33adff 216.00000858306885deg,#ffb380 288.0000042915344deg,hsla(0,0%,98%,1) 1turn);
  width: 100%;
  height: 100%;
  top: auto!important;
  position: absolute!important;
  mask:
    radial-gradient(circle at 50% 50%, white 1.0px, transparent 1.0px) 50% 50% / var(--size) var(--size),
    url("https://assets.codepen.io/605876/noise-mask.png") 256px 50% / 256px 256px;
  mask-composite: intersect;
  animation: flicker 20s infinite linear;
}

@keyframes flicker {
  to {
    mask-position: 50% 50%, 0 50%;
  }
}