@font-face {
    font-family: "chilly";
    src: url(ChillyUI-Bold.ttf);
}
@font-face {
    font-family: "leap";
    src: url(LT\ Leap\ Medium.ttf);
}
@font-face {
    font-family: "geo";
    src: url(GeoffreyJP-Regular\(1\).ttf);
}
@font-face {
    font-family: "pixel";
    src: url(rainyhearts.ttf);
}
@font-face
{
    font-family: "up";
    src: url(upheavtt.ttf);
}
@font-face
{
    font-family: "mine";
    src: url(Minecraftia-Regular.ttf);

}
@font-face {
    font-family: "arcade";
    src: url(8-bit\ Arcade\ Out.ttf);
}
@font-face {
    font-family: "pixel2";
    src: url(slkscre.ttf);
}
*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
html,body
{
   
    background-color: floralwhite;
    

}
.lower
{
    width: 110%;
  position:relative;
 
    text-align: center;
    background-color:rgb(250, 247, 247);
    
}
.mint h6{
    color:#e43603;
}
.lower h2
{
    text-align: center;
    padding: 5vh;
    position: relative;
    color:black;
    font-family: "arcade";
    font-size: 50px;
    
}
.lower h6
{
    position: relative;
   top: -30px;
    text-align: center;
    color: grey;
    font-family: "pixel2";
}
.lowerlogo
{
    position: relative;
    top: -12vh;
    right: 55px;
}
.lowerpic
{
    position: relative;
    top: -0vh
}
.aboutpic h4
{
       text-align: center;
    font-family: "pixel2";
    align-content: center;
    padding: 15px 10%;
    line-height: 25px;
    color: darkgray;
    font-size: 15px;
    
}
.banner{
    
    width:110%;
    height: 200%;
    background-color: whitesmoke;
    text-align: center;
    position: relative;
    background-size: 17%;
   
}
.banner h6
{
    color: rgb(65, 57, 57);
  font-size: medium;
  padding: 2vh 15%;
 position: relative;
 top: -13vh;
   font-family: "pixel2";
   line-height: 17px;
}
.navbar
{
     
    width: auto;
    height: 6vh ;
    margin : auto;
    padding: 2% 3px;
    margin-right: 4%;
    display: flex;
    justify-content: space-evenly;
    
    
}

.navbar ul li
{
    list-style: none;
   
    position: relative;
    
}
.navbar ul li a
{
        text-decoration: none;
    font-family: "pixel2";
    color:yellow;
    text-transform: uppercase;
   
}
.navbar ul li::after{
    content: '';
    height:3px;
    width:5%;
    background: yellow;
    position : absolute;
    left: 0;
    bottom: -10px;
    transition: 0.5s;
}
.navbar ul li:hover::after
{
    width :100%;
}





.about 
{
  background-color: darkslategray;
    width: 110%;
    height: 250%;
    background-size: 17%;
    text-align: center;
    position: relative;
    
    
    
    
  
   
    
}

.about h2
{
    
    
    text-align: center;
    color: black;
    line-height: 70px;
    font-size: 35px;
    font-family: Lucida Console;
    padding: 0px;
      
    
    
}
.about h6
{
    color: white;
    font-family: Lucida Console;
    font-size:85%; 
    line-height:3%;
    text-align: center;
    width:100%;
    align-items: center;
    
}
.about h3
{
    text-align: center;
}
.button
{
    width :100%;
    position: absolute;
    top: 70%;
    text-align: center;
    height: auto;
}
.butt{
    
        width: 15%;
          
}


.buttonloc
{
  position: relative;
  top: -10vh;
 
 
   
}
.images
{
   
  width=100%;
 
    
}
.care
{
    width:100%;
    position: absolute;
    top: 110%;
}
.ship{
    text-align: center;
    align-content: center;
    position: relative;
    padding: 10px 30%;
    top: -7vh;
}
.sad{
    
}

.ship2
{
padding: 0px 5%;
    position: absolute;
    top: 1280px;
}

.mint
{
    background-color: #e43603;
   width: 110%;
 
   
    text-align: center;
     

}
.upper
{
    width: 110%;
    position: fixed;
    height:10vh;
    background-color:black;
    background: linear-gradient(rgba(0,0,0,0.45),(0,0,0,0.35));

}
.mintpanda
{
   text-align: center;
  
    
  padding: 20vh;
    
    
 
}
button
{
    position: relative;
    height: 60px;
    width: 200px;
    margin: 0 35px;
    border-radius: 50px;
    border: none;
    outline: none;
    background: #111;
    color: #fff;
    font-size: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    
    
}
button:first-child{
background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
    background-size: 400%;
   
    
}
button:last-child{
background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
    background: linear-gradient(90deg,#03a9f4 ,#f441a5, #ffeb3b, #03a9f4 );
    background-size: 400%;
    
}
button:first-child:before,button:last-child:before
{
    content: '';
    position: absolute;
    background: inherit;
    top:-5px;
    right:-5px;
    bottom: -5px;
    left: -5px;
    border-radius: 50px;
    filter: blur(20px);
    opacity: 0;
    transition: opacity 0.5s;
}

button:first-child:before, button:last-child:before
{
    opacity: 1;
    z-index: -1;
}

button{
    z-index: 1;
    animation: glow 8s linear infinite;
}


@keyframes glow
{
    0%{background-position: 0%;}
    100%{background-position: 400%;}

}
.mintbutton
{
   
   text-align: center;
   padding : 5vh;
   
}
.egg
{
    background-color: hotpink;
    height: 130vh;
    text-align: center;
}
.easter
{
    position: relative;
    top: 10vh;
}
.egg h2
{
     font-family: Lucida Console;
    font-size: 40px;
    padding: 30px;
}
.egg h5
{
  font-family: Lucida Console;
}
.homelower
{
    background-color: floralwhite;
}
.phases
{
    width: 110%;
    height:100%;
    background-color:black;
    text-align: center;
    
    
    
    

}
.phasebutton
{
  

}

.phase2w
{
  margin: 10vh 20%;
  background-color: yellow;
  height: 100%;
}


.coming h2
{
    font-family: Arial Black;
    color: white;
    font-size: 45px;
    position: relative;
    top: 7vh;
    line-height: 130px;

}
.phase4
{
    margin: 15vh 20%;
    background-color: yellow;
   
   

}
.main{
   padding: 15vh;
}
.homepanda
{
   
    position: relative;
    top: 1vh;
    
    
}
.head
{
    position: relative;
    top: 10vh;
    

}
.head2
{
    position: relative;
    top: 10vh;

}
.black
{
    background-color: darkorchid;
    position: relative;
    height: 80%;
    
}
.black h2
{
    color: black;
    font-family: "arcade";
    position: relative;
    font-size: 60px;
}
.black h4
{
    color: darkgray;
   position: relative;
  
   

}
.coming
{
    width: 100%;
    background-color: black;
    background-size: 17%;
    text-align: center;
    height: 160vh;
    

}
.coming h2
{
    color: black;
    top: -3vh;
}
.ship3
{
   
}
.now
{
   background-color: orange;
 
    height: 100%;
   
}
.now h2
{
    color: black;
    padding: 20px;
    font-family: "arcade";
    font-size: 70px;
}
.now h4
{
    
    color: black;
}
.cowboy
{
   
    
    
}
.specs1
{
   
    background-color: rgb(246, 246, 63);
    text-align: center;
    width: 110%;
  
  
    
}
.specs1 h4
{
    text-align: center;
    color: black;
   padding: 3vh;
  
    
    font-family:"pixel2";
    
   
}
.blackpanda
{
    padding: 13vh;
    background-color: black;
    text-align: center;
  
}
.exphase
{
    margin: 10vh 20%;
   background-color: yellow;
   height: 100%;

}

.coming h6
{
    color: black;
    
}
.coming h5
{
    color: darkgrey;
    font-family: Lucida Console;
    padding: 3px 15%;
    position: relative;
    line-height: 17px;
}
.phase4 h5
{
   

}
.text1
{
    position: relative;
    top: -10vh;
}
.broke
{
    margin: 10vh 20%;
    background-color: yellow;
}
.specs2
{
    
    background-color :rgb(248, 58, 58);
    text-align: center;
    width: 110%;
}
.specs2 h4
{
     text-align: center;
    color: black;
   padding: 3vh;
  
  
    font-family:"pixel2";
    
}
.specs3
{
    background-color: rgb(243, 88, 139);
    text-align: center;
    width: 110%;
}
.specs3 h4
{
    text-align: center;
    color: black;
   
    padding: 3vh;
    font-family:"pixel2";
   

}
.specs4
{
    background-color: rgb(78, 143, 241);
   text-align: center;
   width: 110%;

}
.specs4 h4
{
     text-align: center;
    color: black;
   
    font-family:"pixel2";
    padding: 3vh;
}


.phase1
{
  
    margin: 10vh 20%;
    background-color: yellow;
    height: 100%;
}

.phases h5
{
    font-family:"pixel2";
    padding: 20px;
}


.exphase2
{
    margin : 10vh 20%;
    background-color: yellow;
}

.reddit
{
    position: relative;
    right: -5px;

}
.abouth h2
{
    line-height: 50px;
    font-family: "arcade";
    font-size: 60px;
    padding: 30px;
    text-align: center;

}
.ultimate
{
    background-image:  linear-gradient(rgba(0,0,0,0.90),rgba(0,0,0,0.90)) ;
}
.why
{
    background-color: orange;
   padding: 10px;
   
}
.why h4
{
    color: black;
}
.why h2
{
    font-family: "arcade";
    font-size: 60px;
    color: black;

}

.mint h3
{
  
    color: yellow;
    font-family: "pixel2";
    padding: 0vh 15%;
   
}

.yellow
{
    background-color: yellow;
    margin: 0 10%;
    
    
 
   
}
.yellow h5
{
    padding: 10px;
    font-family: "pixel2";
    line-height: 20px;

}
.yellow h4
{
    color: yellow;
    
}

.panda15
{
    position: relative;
    padding: 15vh;
}
.minted
{
    padding: 13vh;
}

.mint h1
{
   
    font-family: "arcade";
    font-size: 80px;
    line-height: 50px;
    color:rgb(64, 39, 87);
  
    
  
   
}
.mint h2{
    color:rgb(64, 39, 87);
    font-family: "pixel2";
    
    position: relative;
   
    padding: 3vh 10%;
}
.panda
{
    padding: 15vh;
}
.heaven
{
    width: 110%;
    background-size: cover;
   text-align: center;
   background-image: linear-gradient(rgba(0,0,0,0.50),rgba(0,0,0,0.50)) ,url(pandahev.png)
}

.cash
{
    background-color: rgb(25, 25, 25);
    width: 110%;
    text-align: center;
}
.cash h5
{
    color:darkgrey;
    padding: 5vh 10%;
    text-align: center;
    font-family: "pixel2";
    line-height: 25px;
}
.heaven h2{
    font-family: "arcade";
    color: #f5ce62;
    font-size: 80px;
}
.glasses
{
   
    padding: 5vh;
}
.cash h2{
    font-family: "pixel";
    color: #e43603;
    font-size: 50px;
    padding: 3vh 5%;
}
.cash h1
{
    color: rgb(25, 25, 25);
}
.buttonloc h3
{
    font-family: "pixel2";
    font-size: 18px;
}