*{
    margin: 0;padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
body{
    overflow-x: hidden;
}

nav{
    height: 100px;
    width: 100%;
    background-color:#00000078;
    font-size: 31px;
   
}
ul{
    display: inline-flex;
    list-style: none;
    position: absolute;
    top: 50px;
    left: 32%;
   
}
li{
    margin-right: 80px;
    
   
}

a{
    text-decoration: none;
    color: white;
    border-bottom-style: ;
    

}
.logo{
    border-radius: 50%;
    margin-left: 20px;
   animation: logo 2s infinite;
}
/* @keyframes logo{
    25%{width: 25px;
    height: auto}
    50%{width: 50px height: auto}
    75%{width: 75px height: auto}
    100%{width: 100px height: auto}    
}
 */
 li a:hover{
    color:rgba(0,0,0,0.6);
     text-decoration: 3px underline; 
    transition: 0.5s;
   
 }

button{
    font-size: 20px;
    border-radius: 50px;
    padding-top: 6px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    background-color: #a9e6ff;
    color: black;
    cursor: pointer;
    position: relative;
    bottom: 10px;
    right: 16px;
    border: none;
}

.signup {
    margin-right: 39px;
}

button:hover{
    color: #00b7ff;
    background-color: black;
    transition: 0.5s;
    
}

.content{
    height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(215, 215, 215, 0.61),rgba(38, 35, 35, 0.84)), url(Images/PUBG.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    
}

h1.wellcome{
    font-size: 55px;
    line-height: 78px;
    color: #060000;
    word-spacing: 9px;
    position: absolute;
    left: 10%;
    top: 30%;
    
}
span{
    font-size: 68px;
    animation: pubg 5s infinite;
  

}


@keyframes pubg {
    25%{color: #f00;}
    50%{color: #00ff22;}
    75%{color: blue;}
    100%{color: #ff00cb;}
}


.profile{
    height: 101vh;
    width: 100%;
    background:linear-gradient(48deg,#3434e6,#ec6ead);
}
h1.myprofile{
    font-size: 55px;
    line-height: 78px;
    color: #060000;
    word-spacing: 9px;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: underline;
   
}

.profile-img img{
    height: 90vh;
    width: 98%;
    margin-right: 15px;
    margin-left: 15px;
    border-radius: 20px;
}

.stats{
    height: 101vh;
    width: 100%;
    background:linear-gradient(50deg,#9cecfb,#65c7f7,#0052d4);
}

.mystats{
    font-size: 55px;
    line-height: 78px;
    color: #060000;
    word-spacing: 9px;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: underline;
       
}
.stats img{
    height: 90vh;
    width: 98%;
    margin-right: 15px;
    margin-left: 15px;
    border-radius: 20px;
}
.my-tier{
    height: 101vh;
    width: 100%;
    background:linear-gradient(48deg,#a770ef,#cf8bf3,#fdb99b);
}

.mytier{
    font-size: 55px;
    line-height: 78px;
    color: #060000;
    word-spacing: 9px;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: underline;
       
}
.tier-img img{
    height: 90vh;
    width: 98%;
    margin-right: 15px;
    margin-left: 15px;
    border-radius: 20px;
}
 


.my-achivements{
    height: 101vh;
    width: 100%;
    background:linear-gradient(100deg,#e369e7,#8ca6db);
}

.myachivements{
    font-size: 55px;
    line-height: 78px;
    color: #060000;
    word-spacing: 9px;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: underline;
       

 }
.achivements-img img{
    height: 90vh;
    width: 98%;
    margin-right: 15px;
    margin-left: 15px;
    border-radius: 20px;

}

footer{
    height: 150px;
    width: 100%;
    
    color: white;
    background-color: #040404ad;
}


footer h2{
    font-size: 20px;
    text-decoration: underline;
    font-weight: 1;
    text-align: center;
}


.instagram img {
    height: 40px;
    width: 40px;
    float: left;
    margin-left: 44px;
    margin-top: 20px;
    display: inline-block;
}


.instagram a{
    position: relative;
    top: 32px;
    left: 27px;
}




.gmail img {
    height: 28px;
    width: 45px;
    float: left;
    margin-left: -39px;
    margin-top: 58px;
    display: inline-block;
    border-radius: 3px;
}

.gmail a {
    position: relative;
    top: 62px;
    left: 20px;
}


@media  only screen and (max-width:1080px) {

    
 .content {
      height: 56vh;
      width: 100%;
 }


 h1.wellcome {
      position: absolute;
      left: 10%;
      top: 22%;
 }

 #my-profile{
      height:70vh;
      width: 100%;

 }

 .profile-img img{
      height: 58vh;
      width: 97%;

 }


 #stats{
      height: 70vh;
      width: 100%;
     
 }

 .stats-img img{
      height: 58vh;
      width: 97%;

 }

 #teir{
      height: 70vh;
      width: 100%;

 }


 .tier-img img{
      height: 58vh;
      width: 97%;

 }

 #achivements{
      height: 70vh;
      width: 100%;

 }
  
  .achivements-img img{
     height: 58vh;
     width: 97%;

  }

  button{
     display: none;
}
 ul{
     display: inline-flex;
     list-style: none;
     position: absolute;
     top: 50px;
     left: 20%;
   
  }
}

@media  only screen and (max-width:1440px){

  button{
     display: none;
   }


}

@media  only screen and (max-width:880px) {

  nav{
     height: 83px;
     width: 100%;
     font-size: 25px;
  }
  ul{
     top: 45px;
     left: 20%;
  }

  img.logo{

     width: 65px;
     margin-top: 10px;
     margin-left: 10px;
  }


  h1.wellcome, span {
     font-size: 45px;
     left: 8%;
     top: 19%;
  }
}

@media  only screen and (max-width:500px) {

    ul{
        display: none;

    }

   .content{
       height: 50vh;
   }

   h1.wellcome, span {
       font-size: 34px;
       left: 8%;
       top: 19%;
       line-height: 61px;
       word-spacing: 5px;
   }
   h1.myprofile ,.mystats ,.mytier ,.myachivements{
       font-size: 25px;
       height: 58px;
   }
   .profile-img img ,.stats-img img ,.tier-img img ,.achivements-img img{
       height: 35vh;
       margin-right: 10px;
       margin-left: 10px;
       width: 95%;
   }

   #my-profile ,#stats ,#teir ,#achivements{
       height: 44vh;
   }
   
   footer h2{
       font-size: 14px;


   }
   .instagram img{
       height: 35px;
       width: auto;
       float: left;
       margin-left: 25px;
       margin-top: 23px;
   
   
     }
   
   .gmail img{
       height: 23px;
       width: 37px;
       float: left;
       margin-left: -34px;
       margin-top: 60px;
    }
     
    .instagram a ,.gmail a{
        left: 13px;
    }

    nav ,footer{
        background-color:gray;
    }
}