::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  border-radius: 5px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 25);
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgb(172, 172, 172);
}


* {
    margin: 0;
    padding: 0;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    background: #333;
    color: #fff;
    line-height: 1.6;
    height: 100vh;
    overflow: hidden;
}

.container {
    width: 100%;
    height: 100%;
    /* Css smooth scroll */
    overflow-y: scroll;
    scroll-behavior: smooth; 
    scroll-snap-type: y mandatory; 

}

.navbar {
    position: fixed;
    top: 0;
    z-index: 1;
    display: flex;
    width: 100%;
    height: 100%;
    height: 60px;
    background: rgba(0, 0, 0, 0, 7);
}


.navbar ul {
    display: flex;
    list-style: none;
    width: 100%;
    justify-content: center;
}

.navbar ul li {
    margin: 0 1rem;
    padding: 1rem;
}
.navbar ul li a {
    text-decoration: none;
    text-transform: uppercase;
    color: black;
}
.navbar ul li a:hover{
    color: skyblue;
}

section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100vh;
    scroll-snap-align: center;
}

section h1 {
    font-size: 4rem;
}

section p {
    font-size: 1.5rem;
}



section#home {
    background: url("background.jpg") no-repeat center center/cover;
}

section#buy {
    background: url("background2.jpg") no-repeat center center/cover;
}

section#about {
    background: url("background3.jpg") no-repeat center center/cover;
}

/* section#team {
    background: url("black-background6.jpg") no-repeat center center/cover;
} */


.opensea {
    text-decoration: none;
    color: white;
    border: 8px solid rgb(255, 255, 255);
    border-radius: 50px;
    padding: 15px;
}

.image {
    width: 250px;
    height: 250px;
    /* margin-right: auto; */
}

.name {
    font-family: monospace;
}

.dev {
    font-family: Arial, Helvetica, sans-serif;
}


.home {
    font-family: 'Times New Roman', Times, serif;
    animation-duration: 3.5s;
    animation-name: slidein;
}

@keyframes slidein {
    from {
      margin-left: 100%;
      width: 300%;
    }
  
    to {
      margin-left: 0%;
      width: 100%;
    }
  }


h1:hover span{
    color: #fff;
    text-shadow: 0 0 10px #fff,
                 0 0 20px #fff, 
                 0 0 40px #fff;
}

h1 span{
    transition: .5s linear
  }
h1:hover span:nth-child(1){
    margin-right: 5px
  }
h1:hover span:nth-child(1):after{
    content: "'";
  }
h1:hover span:nth-child(2){
    margin-left: 30px
  }

.h1{
    color: white;
    font-size: 50px;
    font-weight: bold;
    font-family: monospace;
    letter-spacing: 7px;
    cursor: pointer
  }


.p {
    position: relative;
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: 2em;
    letter-spacing: 4px;
    overflow: hidden;
    background: linear-gradient(90deg, #000, #fff, #000);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 4.5s linear infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

@keyframes animate {
    0% {
      background-position: -500%;
    }
    100% {
      background-position: 500%;
    }
  }

  

.typewriter h4 {
    color: #fff;
    font-family: monospace;
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    /* border-right: .15em solid orange; The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em; /* Adjust as needed */
    animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}


/* Background */


.container1 {
  text-align: center;
}

.glitch {
  font-size: 3.5rem;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
    0.025em 0.04em 0 #fffc00;
  animation: glitch 725ms infinite;
}

.glitch span {
  position: absolute;
  top: 0;
  left: 0;
}


.glitch span:first-child {
  animation: glitch 500ms infinite;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  transform: translate(-0.04em, -0.03em);
  opacity: 0.75;
}

.glitch span:last-child {
  animation: glitch 375ms infinite;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  transform: translate(0.04em, 0.03em);
  opacity: 0.75;
}

@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 black, -0.03em -0.04em 0 white,
      0.025em 0.04em 0 gray;
  }
  15% {
    text-shadow: 0.05em 0 0 black, -0.03em -0.04em 0 white,
      0.025em 0.04em 0 gray;
  }
  16% {
    text-shadow: -0.05em -0.025em 0 black, 0.025em 0.035em 0 white,
      -0.05em -0.05em 0 gray;
  }
  49% {
    text-shadow: -0.05em -0.025em 0 black, 0.025em 0.035em 0 white,
      -0.05em -0.05em 0 gray;
  }
  50% {
    text-shadow: 0.05em 0.035em 0 black, 0.03em 0 0 white,
      0 -0.04em 0 gray;
  }
  99% {
    text-shadow: 0.05em 0.035em 0 black, 0.03em 0 0 white,
      0 -0.04em 0 gray;
  }
  100% {
    text-shadow: -0.05em 0 0 black, -0.025em -0.04em 0 white,
      -0.04em -0.025em 0 gray;
  }
}



/* Slideshow */






:root {
  --color-primary: white;
  --color-secondary: white;
  --color-tertiary: black;
  --color-quaternary: gray;
  --color-quinary: gray;
  /*
  --color-primary: #5192ED;
  --color-secondary: #69A1F0;
  --color-tertiary: #7EAEF2;
  --color-quaternary: #90BAF5;
  --color-quinary: #A2C4F5;
  */
}

.content {
  display: flex;
  align-content: center;
  justify-content: center;
}

.text_shadows {
  text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary),
  9px 9px var(--color-quaternary), 10px 12px 0 var(--color-quinary);
  font-family: bungee, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: calc(1rem + 1.7vw);
  text-align: center;
  margin: 0;
  color: var(--color-primary);
  color: transparent;
  background-clip: text;
  animation: shadows 1.2s ease-in infinite, move 1.2s ease-in infinite;
  letter-spacing: 0.4rem;
}

@keyframes shadows {
  0% {
    text-shadow: none;
  }
  10% {
    text-shadow: 3px 3px 0 var(--color-secondary);
  }
  20% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary);
  }
  30% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
  }
  40% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
      12px 12px 0 var(--color-quinary);
  }
  50% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
      12px 12px 0 var(--color-quinary);
  }
  60% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
      12px 12px 0 var(--color-quinary);
  }
  70% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
  }
  80% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary);
  }
  90% {
    text-shadow: 3px 3px 0 var(--color-secondary);
  }
  100% {
    text-shadow: none;
  }
}

@keyframes move {
  0% {
    transform: translate(0px, 0px);
  }
  40% {
    transform: translate(-12px, -12px);
  }
  50% {
    transform: translate(-12px, -12px);
  }
  60% {
    transform: translate(-12px, -12px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}



.waviy {
  position: relative;
}
.waviy span {
  position: relative;
  display: inline-block;
  font-size: 40px;
  color: black;
  text-transform: uppercase;
  animation: flip 2s infinite;
  animation-delay: calc(.2s * var(--i))
}
@keyframes flip {
  0%,80% {
    transform: rotateY(360deg) 
  }
}