/* Scroll Bar Design */
/* width */
::-webkit-scrollbar {
    width: 7px;
  }
  ::-webkit-scrollbar:hover{
    width: 10px;
  }
  /* Track */
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
/* Body Customization */
body{
    margin:0%;
    padding:0%;
    box-sizing: border-box;
    overflow-x: hidden;
    color:white;
}
/* Custom CSS */

.round{
  border-radius: 3%;
}
.mail{
  text-decoration: none;
  color:#00ffd5;
  transition: 1s;
}
.mail:hover{
  color:#01705b;
  text-shadow: white;
  text-decoration: underline;
} 
.im{
  width:100%;
}
.footer{
  width:100%;
  opacity: 0.5;
  overflow: hidden;
  width: 100%;
}
.containerc{
  padding-left:25%;
  padding-right:25%;
}
.end{
  background-color: #000;
  width: 100%;
}
.hid{
  overflow: hidden;
}
.hoverable{
  display:inline-block;
  backface-visibility: hidden;
  vertical-align: middle;
  position:relative;
  box-shadow: 0 0 1px rgba(0,0,0,0);
  transform: translateZ(0);
  transition-duration: .3s;
  transition-property:transform;
}
.hoverable:before{
  position:absolute;
  pointer-events: none;
  z-index:-1;
  content: '';
  top: 100%;
  left: 5%;
  height:10px;
  width:90%;
  opacity:0;
  background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 80%);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 80%);
  transition-duration: 0.3s;
  transition-property: transform, opacity;
}

.hoverable:hover, .hoverable:active, .hoverable:focus{
  transform: translateY(-5px);
}
.hoverable:hover:before, .hoverable:active:before, .hoverable:focus:before{
  opacity: 1;
  transform: translateY(-5px);
}
@keyframes bounce-animation {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounce {
  animation-name: bounce-animation;
  animation-duration: 3s;
}
nav a{
      transition: .5s color ease-in-out;
}
.page-title {
  opacity: .75 !important;
}
.l{
  text-decoration: none;
}
#myBtn {
   /* Hidden by default */
  position: sticky; /* Fixed/sticky position */
  top: 0%; /* Place the button at the bottom of the page */
  left: 90%; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #555555; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 40%; /* Rounded corners */
  font-size: 18px; /* Increase font size */
  opacity: 1;
}

#myBtn:hover {
  background-color: #212529; /* Add a dark-grey background on hover */
}
.off{
  background-color: black;
  
}
.nav-header{
  display:flex;
}

.glow-on-hover {
  width: 110px;
  height: 50px;
  border: none;
  outline: none;
  color: #fff;
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
}

.glow-on-hover:before {
  content: '';
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  position: absolute;
  top: -2px;
  left:-2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
}

.glow-on-hover:active {
  color: #000
}

.glow-on-hover:active:after {
  background: transparent;
}

.glow-on-hover:hover:before {
  opacity: 1;
}

.glow-on-hover:after {
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  left: 0;
  top: 0;
  border-radius: 10px;
}
.menu{
  display:none;
  overflow: hidden;
}
@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}
.home{
  text-decoration: none;
  overflow: hidden;
}
li{
  cursor: pointer;
  text-decoration: none;
}
#nav{
 position: fixed;
 width: 100%;
 top:0%;
 left:0%;
}



/* MediaQuery Responsiveness */
/* Resposnisviness */

@media screen and (max-width:540px){
  .i{
      display:none;
  }
  .menu{
      display:unset;
      height:fit-content;
      width: fit-content;
  }
  .menu img{
      height:40px;
      cursor: pointer;
  }
  #contact{
      margin-right:-20px;
  }
}
@media screen and (max-width:200px){
  .i{
      display:none;
  }
  #contact{
      display:none;
  }
}
@media screen and (max-width:400px){
  .o{
      width:100%;
      margin-top: 10px;
  }
}
@media screen and (max-width:900px){
  .home{
     display: none;
  }
}