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

}

#context-menu {
  backdrop-filter: blur(40px);

  position: fixed;
  z-index: 10000;
  width: 20%;
  background: #0b011a1a;
  border-radius: 10px;
  transform: scale(0);
  transform-origin: top left;
}
.material-icons.md-48 {
  font-size: 56px;
}
.material-icons.headz {
  font-size: 56px;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.5px;
}
#header nav a[href="#menu"] {
  text-decoration: none;
  transition: background-color 0.2s ease-in-out;
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 13%);
  padding: 0 1.35em;
  font-weight: 100;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
}
#menu .links li a {
  border-radius: 5px;
  border: 0;
  display: block;
  font-family: Raleway, Helvetica, sans-serif;
  font-size: 0.8em;
  font-weight: 200;
  letter-spacing: 0.1em;
  line-height: 1.85em;
  padding: 0.75em 0;
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
}
.material-icons.navbaricon {
  font-size: 120px;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px;
 
}
.contact{
  font-family: 'Poppins', sans-serif;
}
.material-icons.baseicon {
  font-size: 50px;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px;
 
  
 
}
.material-icons.rightcl {
  font-size: 14px;
 
}
#context-menu.visible {
  transform: scale(1);
  transition: transform 200ms ease-in-out;
}
p {
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
}
#context-menu .item {
  padding: 8px 10px;
  font-size: 15px;
  color: #eee;
  cursor: pointer;
  border-radius: inherit;
  font-family:'contextfont'
}
h2 {
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  font-size: 1.2em;
}

#context-menu .item:hover {
  
  background: rgb(48,2,107);
background: linear-gradient(90deg, rgba(48,2,107,1) 0%, rgba(87,0,255,0) 100%);
  border-radius: 10px;
}

.iconatedx{
    font-size: 85px;
border-radius: 50%;
width: 225px;
height: 139px;
padding: 19px;
color: #94a1bb;
border-width: thin;



  }







  .hide-pc { 
    

    display: none; 
  } 

  @media screen and (max-width: 900px) { 
    .hide-pc { 
     

      display: block; 
    } 
  }
 

  @media only screen and (max-width: 900px) {
    .hide-mobile2 
    {display:none;}
   }
   

        @media only screen and (max-width: 750px) {
 .hide-mobile 
 {display:none;}
}





$blue: #2962ff;

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.xh1 {
	font-size: 2.5em;
	
	@media (max-width: 768px) {
		font-size: 1.3em;
	}
}

.text-shadow {
  font-family: 'triforcetriforce';
  border-bottom: solid 2px rgba(255, 255, 255, 0.125);
  padding-bottom: 14px;
	font-style: italic;
	text-transform: uppercase;

    text-decoration: none;   
	text-shadow: 2px 2px 10px $blue;
	transition: all 0.5s ease-in-out;
	
	letter-spacing: 0.2em;
	animation: flicker 0.5s ease-in-out infinite alternate;

	&:hover {
		color: #fff;
	}
  
}

.tags small {
	@media (max-width: 768px) {
		font-size: 0.5em;
	}
}
      .cody{
        font-family: cursivehead;
        color:Cyan;
         -webkit-animation: glow 2s ease-in-out infinite alternate;
  -moz-animation: glow 2s ease-in-out infinite alternate;
  animation: glow 2s ease-in-out infinite alternate;
        font-size: 9rem;
        text-transform: none;
      }

@-webkit-keyframes glow {
     from {
      color: #fff;
    text-shadow: 0 0 10px #00fff2, 0 0 20px #00fff2, 0 0 30px #00fff2, 0 0 40px #00fff2, 0 0 50px #00fff2, 0 0 60px #00fff2, 0 0 70px #00fff2, 0 0 90px #00fff2;
  }
  
  to {
     color: gray;
    text-shadow: 0 0 20px #00fff2, 0 0 30px #00fff2, 0 0 40px #00fff2, 0 0 50px #00fff2, 0 0 60px #00fff2, 0 0 70px #00fff2, 0 0 80px #00fff2, 0 1 90px #00fff2;
  }
}
@keyframes flicker {
	0% {
		opacity: 0.5;
		text-shadow: 2px 2px 10px $blue;
	}
	100% {
		opacity: 1;
		text-shadow: 2px 2px 20px $blue;
	}
}
      .iconated{
        font-size: 50px;
        border-radius: 50%;
  width: 95px;
  height: 95px;
  padding: 19px;
 
  border: 1px solid #fff;
  color: #fff;
  border-width: thin;

        
      }
    /* animate hover */

      

.containerx {
  perspective: 30px;
}

.innerx {
  transition: transform 0.5s;
  -webkit-transition: transform 0.5s;
  
  text-align: center;
}

/*============================================================
 * EXTRAS
 *============================================================*/

.containerx:hover .demo-overlay {
  opacity: 1;
}

.containerx:hover {
  cursor: pointer;
}




      

#container {
  perspective: 30px;
}

#inner {
  transition: transform 0.5s;
  -webkit-transition: transform 0.5s;
  
  text-align: center;
}

#demo{
    font-family: 'Varela Round';
    /* Will override color (regardless of order) */
  -webkit-text-stroke: 3px white;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.5px;
  font-weight: 700;
}
/*============================================================
 * EXTRAS
 *============================================================*/

#container2:hover .demo-overlay {
  opacity: 1;
}

#container2:hover {
  cursor: pointer;
}

/* ------------------------------------------------------------------
      Cursor custom setup
      ---------------------------------------------------------------   */


#follower {
  position: absolute;
 
  cursor: none
  
}
#follower #circle1 {
  position: absolute;
  -webkit-animation: pulse 2s infinite; /* Chrome, Safari, Opera */
  animation: pulse 2s infinite;
  background: #000000;
  border-radius: 50%;
  height: 0em;
  width: 0em;
  margin-top: 0em;
  margin-left: 0em;
  
}
#follower #circle2 {
  position: absolute;
  -webkit-animation: pulse 4s infinite; /* Chrome, Safari, Opera */
  animation: pulse 4s infinite;
  background: rgb(75, 0, 146);
  border-radius: 50%;
  height: 0em;
  width: 0em;
  margin-top: 0em;
  margin-left: 0em;
  
}
@-moz-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
@-webkit-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
@-o-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
@keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
      .heads{
        cursor: none;
  
        z-index:100000;
      }
.headbody{
  font-family: "pixel";
  color: white;
font-size: 26px;
opacity: 0.5;
}
.contentx {
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height:100%;
}
body{
    display: block;
    }

.material-icons.md-48 {
    font-size: 59px;
}