@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

/* #393E46
    #D65A31
    #222831
    #EEEEEE

*/
* {
    font-family: 'Montserrat', sans-serif;
    cursor: url("/img/pngwing1.com.png"), url("/img/pngwing1.com.png"), default;


}

body {

    background: rgba(24, 27, 32, 1);
    background: -moz-linear-gradient(left, rgba(24, 27, 32, 1) 0%, rgba(33, 36, 38, 1) 49%, rgba(25, 28, 31, 1) 71%, rgba(16, 20, 25, 1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(24, 27, 32, 1)), color-stop(49%, rgba(33, 36, 38, 1)), color-stop(71%, rgba(25, 28, 31, 1)), color-stop(100%, rgba(16, 20, 25, 1)));
    background: -webkit-linear-gradient(left, rgba(24, 27, 32, 1) 0%, rgba(33, 36, 38, 1) 49%, rgba(25, 28, 31, 1) 71%, rgba(16, 20, 25, 1) 100%);
    background: -o-linear-gradient(left, rgba(24, 27, 32, 1) 0%, rgba(33, 36, 38, 1) 49%, rgba(25, 28, 31, 1) 71%, rgba(16, 20, 25, 1) 100%);
    background: -ms-linear-gradient(left, rgba(24, 27, 32, 1) 0%, rgba(33, 36, 38, 1) 49%, rgba(25, 28, 31, 1) 71%, rgba(16, 20, 25, 1) 100%);
    background: linear-gradient(to right, rgba(24, 27, 32, 1) 0%, rgba(33, 36, 38, 1) 49%, rgba(25, 28, 31, 1) 71%, rgba(16, 20, 25, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#181b20', endColorstr='#101419', GradientType=1);
    color: #EEEEEE;
    padding: 0%;
    margin: 0%;
}

.main-title-heading {
    display: flex;
    align-content: center;
    text-align: left;
    justify-content: center;
    flex-direction: column;

    width: 12%;
    margin: auto;
    margin-top: 10vmax;
    font-weight: 300;

}

.main-title-heading p {
    width: 114%;
    color: #D65A31;
    font-size: 2.5vmax;
}

#border-bottom-div {
    border-bottom: 0.2vmax solid #D65A31;
    width: 70%;
    margin: auto;
}

#main-name {
    margin-top: -2vmax;

    color: #EEEEEE;

}

.navigation-logo img {
    width: 8vmax;

    text-shadow: #222831;


}

.main-navigation-bar {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;



}

.navigation-menu ul {
    display: flex;
    list-style: none;

}

.navigation-menu .nav-item {
    padding: 1vmax 2vmax;


}
.personal-information {
   
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    font-size: 1.8vmax;
    width: 32%;
    margin: auto;
    margin-top:20vmax ;
}
.personal-information p{
   
  
    font-size: 1.8vmax;
    line-height: 4vmax;
  
}
#changing-text::before{
    content: "";
    position: absolute;
    top: -2%;
    left: 63%;
    height: 36%;
    width: 35%;
    background-color: red;
    border-left: 2px solid #D65A31;
    animation : animation 4s steps(12) infinite;
}
.personal-information strong{
    background-color: #D65A31;
    padding: 1vmax 0.5vmax;
    border-radius: 1.5vmax;
    color: #222831;
}
.navigation-menu .nav-item a:hover {
    transition: all 0.3s ease-in-out;
    
    color: #D65A31;


}

.navigation-menu .nav-item a {
    color: #EEEEEE;
    text-decoration: none;
    font-size: 1.1vmax;
    font-weight: 700;
}

.learn-more-button {
    transition:all 0.3s ease-in-out;
    display: flex;
    margin-top: 12vmax;
    padding: 0.5vmax 2vmax;
    background-color: #d65a3100;
    color: white;
    border: 1px solid #D65A31;
    cursor: pointer;
    border-radius: 1vmax;
}

.learn-more-button:hover {
    -webkit-box-shadow: -4px 2px 30px -11px rgba(173, 173, 173, 1);
    -moz-box-shadow: -4px 2px 30px -11px rgba(173, 173, 173, 1);
    box-shadow: -4px 2px 30px -11px rgba(173, 173, 173, 1);
    transform: scale(1.04);
    background-color: #D65A31;
    border: 1px solid #D65A31;


}
.social-icons-container{
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 70vmax;
    margin-bottom: 10vmax;
}
.social-icons-container a{
    text-decoration: none;
    color: white;
   
}

.social-icons-container img{
    transition: all 0.2s ease-in-out;
    padding: 1vmax 1vmax;
    width: 4vmax;
    cursor: pointer;
}
.social-icons-container img:hover{
    transform: scale(1.2);
    

}
.arrow {
    width: 60px;
    height: 82px;
    

    z-index: 999;
  }
  /* set arrow styles */
  .arrow path {
    stroke: #e74c3c;
    stroke-width: 2px;
    fill: transparent;	
    animation: down 2s infinite;
  }
  /* arrow keyframe animation */
  @keyframes down{
  0% { opacity:0 }
  25% { opacity:1 }
  75% { opacity:0 }
  100% { opacity:0 }
  }
  /* arrow animation delay */
  .arrow path.a1{	animation-delay:-1s; }
  .arrow path.a2{	animation-delay:-.5s; }
  .arrow path.a3{	animation-delay:0s; }

  /* Pretty Stuff? */




/* Arrow */

.arrow1 {
	position: absolute;
  margin: 0 auto;
  left: 40%;
  width: 100px;
}

.arrow1 .curve {
  border: 2px solid #D65A31;
  border-color: transparent transparent transparent #D65A31;
  height: 275px;
  width: 396px;
  border-radius: 9px 0 0 5861px;
  animation: down 1.5s infinite;

}

.arrow1 .point {
  position: absolute;
  left: 81px;
  top: 192px;
  animation: down 1.5s infinite;
}

.arrow1 .point:before, .arrow .point:after {
	border: 1px solid #D65A31;
	height: 25px;
	content: "";
	position: absolute;
}

.arrow1 .point:before {
	top: -11px;
	left: -11px;
	transform:rotate(-74deg);
	-webkit-transform:rotate(-74deg);
  -moz-transform:rotate(-74deg);
  -ms-transform: rotate(-74deg);
}

.arrow1 .point:after {
  top: -20px;
	left: 5px;
	transform:rotate(12deg);
	-webkit-transform: rotate(12deg);
  -moz-transform:rotate(12deg);
  -ms-transform: rotate(12deg);
}
#game-center-div{
    margin-top: 10vmax;
   }
.game-button{
    margin-top:3vmax ;
}
.about-me-container{
    display: flex;
    width: 59%;
    margin: auto;
    padding-left: 16vmax;
    margin-top: 15vmax;

}
#about-me-heading{
  
}
.about-me-heading {
    color: #d65a31d0;
    font-size: 5vmax;
    font-weight: bold;
    position: absolute;
    z-index: 1;
    margin: -4vmax -18vmax;
   
    text-shadow: 690px 189px 0px rgb(255 255 255 / 12%);
}
.about-me-content{
    text-align: center;
    font-size: 1vmax;
}
.about-me-content strong{
    background-color: #D65A31;
    
    border-radius: 1.5vmax;
    color: #222831;
    line-height: 1.3vmax;
}
.game-container{
    margin-top: 20vmax;
}
.game-heading-title{
    color: #d65a31d0;
    font-size: 5vmax;
    font-weight: bold;
    position: absolute;
    z-index: 1;
    margin: -9vmax 9vmax;
    text-shadow: 795px 239px 0px rgb(255 255 255 / 12%);

}
.suprise-heading-title{
	
    margin: -4vmax 6vmax;
}
#suprise-title{
    margin-top: 10vmax;
    color: #cecece;
    font-size: 1.2vmax;
    font-weight: 600;
}
.surprise-button{
    animation: shake 1s infinite;
}
.rick-roll-container{
    margin-top: 40vmax;
    
}
.rick-roll-title{
    font-size: 3vmax;
    margin: -0vmax 9vmax;
}
.rick-roll-img{
    width: 30%;
}
@keyframes shake {
    0% { transform: translateY(0); }
    25% { transform: translateY(-10px); }
    50% { transform: translateY(10px); }
    75% { transform: translateY(-10px); }
    100% { transform: translateX(0); }
  }
  
@media screen  and (max-width:750px){ 
    .arrow {
        width: 60px;
        height: 82px;
        left: 42%;
        margin-left: 0px;
        bottom: 83%;
        z-index: 999;
    }
    .arrow1 .curve {
        border: 2px solid #D65A31;
        border-color: transparent transparent transparent #D65A31;
        height: 245px;
        width: 226px;
        border-radius: 9px 0 0 5861px;
        animation: down 1.5s infinite;
    }
    .arrow1 {
        position: absolute;
        margin: -23px auto;
        left: 17%;
        width: 99px;
    }
    /* .arrow1 .point {
        position: absolute;
        left: 35px;
        top: 84px;
        animation: down 1.5s infinite;
    } */
    .main-title-heading {
      
        width: 29%;
        padding-right: 2vmax;
    }
    .personal-information {
       
        margin-top: 51vmax;
    }
    .personal-information p {
        font-size: 3.8vmax;
        line-height: 8vmax;
    }
    .arrow1 .point {
        position: absolute;
        left: 66px;
        top: 176px;
        animation: down 1.5s infinite;
    }
    .main-title-heading p {
        width: 124%;
        color: #D65A31;
        font-size: 6vmax;
        margin: none;
        padding: none;
    }
    .main-navigation-bar {
        
        flex-direction: column;
        padding-top: 5vmax;
        padding-right: 2vmax;
        
        -webkit-box-shadow: -4px 2px 30px -11px rgb(32, 32, 32);
        -moz-box-shadow: -4px 2px 30px -11px rgb(49, 48, 48);
        box-shadow: -4px 2px 30px -11px rgb(56, 56, 56);
    
    }
    .navigation-menu .nav-item a {
        
        font-size: 1.7vmax;

    
    
    }
    .personal-information {
        
        width: 67%;
       
    }
    .learn-more-button {
        margin-top: 19vmax;
        font-size: 1.3vmax;
    }
    #hello-line{
        margin-bottom: 1vmax;
    }
   #game-center-div{
    margin-top: 20vmax;
   }
   .social-icons-container img {
    transition: all 0.2s ease-in-out;
    padding: 1vmax 1vmax;
    width: 7vmax;
    cursor: pointer;
}
.about-me-content{
    
}
.about-me-container {
    display: flex;
    width: 70%;
    margin: auto;
    padding-left: 0vmax;
    margin-top: 15vmax;
}
.about-me-heading {
    color: #d65a31d0;
    font-size: 5vmax;
    font-weight: bold;
    position: absolute;
    z-index: 1;
    margin: -6vmax -6vmax;
    text-shadow: 118px 366px 0px rgb(255 255 255 / 12%);
}
.about-me-content {
    text-align: center;
    font-size: 1.7vmax;
}
.game-container {
    margin-top: 40vmax;
}
 
   .game-container-mobile{
    display: none;
   }
   .suprise-heading-title{
    color: #d65a31d0;
    font-size: 5vmax;
    font-weight: bold;
    position: absolute;
    z-index: 1;
    margin: -21vmax 2vmax;
    text-shadow: 87px 321px 0px rgb(255 255 255 / 12%)
   }
   .rick-roll-container{
    margin-top:100vmax ;
   }
   .rick-roll-img {
    width: 94%;
}
.rick-roll-title{
    color: #d65a31d0;
    font-size: 4vmax;
    font-weight: bold;
    position: absolute;
    z-index: 1;
    margin: -9vmax 0vmax;
    text-shadow: 0px 116px 0px rgb(255 255 255 / 80%);
}
.navigation-logo img {
    width: 13vmax;
}

}